{"id":18896787,"url":"https://github.com/shakibamoshiri/soma","last_synced_at":"2026-05-07T07:39:45.537Z","repository":{"id":57366036,"uuid":"181466072","full_name":"shakibamoshiri/soma","owner":"shakibamoshiri","description":"Pure CSS3 Solutions for the Web","archived":false,"fork":false,"pushed_at":"2019-04-24T08:02:22.000Z","size":65,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-11T01:34:55.454Z","etag":null,"topics":["backface","button","carousel","css3","css3-flexbox","slick","tab"],"latest_commit_sha":null,"homepage":"http://somacss.ir","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/shakibamoshiri.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-04-15T10:40:14.000Z","updated_at":"2020-04-16T01:14:17.000Z","dependencies_parsed_at":"2022-08-23T20:10:32.328Z","dependency_job_id":null,"html_url":"https://github.com/shakibamoshiri/soma","commit_stats":null,"previous_names":["k-five/soma"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shakibamoshiri%2Fsoma","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shakibamoshiri%2Fsoma/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shakibamoshiri%2Fsoma/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shakibamoshiri%2Fsoma/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shakibamoshiri","download_url":"https://codeload.github.com/shakibamoshiri/soma/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239877078,"owners_count":19712013,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["backface","button","carousel","css3","css3-flexbox","slick","tab"],"created_at":"2024-11-08T08:35:23.625Z","updated_at":"2026-02-28T15:30:22.862Z","avatar_url":"https://github.com/shakibamoshiri.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n\t\u003ca  href=\"http://somacss.ir\"\u003e\u003cimg src=\"public/img/soma-logo.svg.png\" alt=\"soma-logo.svg.png\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\n\u003ch2 align=\"center\"\u003eDescription\u003c/h2\u003e\n\nSoma CSS is a small, functional and pure CSS3 library which offers CSS components that are:\n + Immutable like Pure Functions in FP approach\n + Reusable like Objects in OOP approach\n + Nestable like Components in React approach\n \nComponents can be created:  \n + manually using simple editors or emmet plugin\n + or using JavaScript  \n \nBut, For their actions they do not need JavaScript.\n\n\u003ch2 align=\"center\"\u003ePrerequisites\u003c/h2\u003e\n\n\u003ch4\u003eCSS Part\u003c/h4\u003e\nThe CSS part is heavily base on \n\n  - flex-box\n  - input's UI-State pseudo-class (= :checked)\n  - label's [for] attribute\n  - transform: translate\n\n\u003ch4\u003eJavaScript Part\u003c/h4\u003e\nThe JS part uses Pure JS DOM APi provided by browsers like\n\n  - document.createElement\n  - element.[get|set]Attribute\n  - element.appendChild( Node )\n  - etc\n\n\u003ch4\u003eReact Part\u003c/h4\u003e\nThe React is base on:\n\n  - react 16+\n  - react-dom\n  - JSX\n\n\n\u003ch2 align=\"center\"\u003eHow to Use\u003c/h2\u003e\n\nYou can use them in either way of Pure CSS or creating them using JS and then using them.\nActually API has been divided in to three types:  \n\n\u003ch4\u003eUsing Pure CSS (= \u003ca href=\"http://somacss.ir\"\u003esomacss.ir\u003c/a\u003e)\u003c/h4\u003e\nJavaScript is used for creating the components but CSS manages the state.\n\nCSS file:\n```CSS\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"soma.prefixed.min.css\" /\u003e\n```\n\n\nJS in ES6 format:  \n\n```js\nimport { carouselZ, carouselY, carouselX, slickX, progressX } from 'somacss';\n```\n\nJS in ES5 format using Global `S`  \n\n```html\n\u003cscript type=\"application/javascript\" src=\"soma.es5.js\"\u003e\u003c/script\u003e\n// Global S.xxx are available to use\n// S.carouselZ\n// S.carouselY\n// S.carouselX\n// and so on\n```\n\n\u003ch4\u003eUsing JavaScript (= \u003ca href=\"http://somajs.ir\"\u003esomajs.ir\u003c/a\u003e)\u003c/h4\u003e\nJavaScript is used for both creating the and managing the state.\n\n\u003ch4\u003eUsing React (= \u003ca href=\"http://somareact.ir\"\u003esomareact.ir\u003c/a\u003e)\u003c/h4\u003e\nReact (JSX) is used for both creating the and managing the state.\n\n\u003ch2 align=\"center\"\u003eDownload\u003c/h2\u003e\n\n\u003ch4\u003eJust Source\u003c/h4\u003e\n\n```\n# Soma CSS\ngit clone https://github.com/k-five/soma\n\n# Soma JS\n\n\n# Soma React\n\n```\nIf you want to build it from source, install:\n\n - sass \u0026\u0026 jest globally\n - And devDependencies on package.json file\n \nThere is no `__tests__` directory, so for running test just try:\n\n```bash\njest src/\n# or\njest --max-workers 2 src/\n```\n\n\n\u003ch4\u003eJust Last Release\u003c/h4\u003e\n\n```\n# Soma CSS\nnpm install somacss     # install the package\ncd node_modules/somacss # package root\ncd build                # release file are here\ntree --dirsfirst -sh\n.\n├── [4.0K]  css\n│   ├── [ 47K]  soma.css              # raw version\n│   ├── [ 23K]  soma.css.map\n│   ├── [ 40K]  soma.min.css          # minified version\n│   ├── [ 23K]  soma.min.css.map\n│   ├── [ 50K]  soma.prefixed.css     # prefixed version\n│   ├── [ 15K]  soma.prefixed.css.map\n│   └── [ 42K]  soma.prefixed.min.css # prefixed + minified\n└── [4.0K]  js\n    ├── [ 11K]  soma.es5.js           # is used with \u003cscript src\u003e which has global S\n    └── [ 11K]  soma.js               # import { name-of-the-component } from 'somacss'\n\n# Soma JS\n\n\n# Soma React\n\n```\n\n\u003ch4\u003e\u003c/h4\u003e\n\u003ch4\u003e\u003c/h4\u003e\n\n\n\n\u003ch2 align=\"center\"\u003eExample\u003c/h2\u003e\n\u003ch4\u003eCombining 5 components to build a super carousel\u003c/h4\u003e\n\n - CarouselZ (managing Brands)\n - CarouselY (managing Categories)\n - CarouselX (managing Sections)\n - SlickX    (managing Products)\n - Carousel(Z or Y or X) (managing Types)  \n \n\n\u003ch4\u003eThe Code for final part of the challenge on \u003ca href=\"http://somacss.ir/\"\u003esomacss.ir\u003c/a\u003e\u003c/h4\u003e\n\n```js\n// eCommerce is a JSON file\n// var keys = Object.keys\nbrands = keys( eCommerce );\nvar final = carouselZ({\n    titles: brands,\n    children: brands.map( function( brand ){\n\n        // array of categories for each brand\n        var categories = keys( eCommerce[ brand ] );\n\n        // and for each brand creating carousel-y\n        return carouselY({\n            titles: categories,\n            children: categories.map( function( category ){\n\n                // array of sections for each category\n                var sections = keys( eCommerce[ brand ][ category ] );\n\n                // and for each category creating carousel-x\n                return carouselX({\n                    titles: sections,\n                    children: sections.map( function( section ){\n\n                        // if we have any products\n                        var products = keys( eCommerce[ brand ][ category ][ section ] );\n\n                        // one slide for each product\n                        return slickX({\n                            children: products.map( function( product, productIndex ){\n\n                                // when we have types of products\n                                var types = keys( eCommerce[ brand ][ category ][ section ][ product ] );\n\n\t\t\t\t\t\t\t\t// just playing with combination of carousel(Z or Y or X)\n                                switch( types.length ){\n                                    case 0:\n                                        return h1( \"dummy content \" + productIndex ).cloneNode( true );\n\t\t\t\t\t\t\t\t\tbreak;\n\n                                    case 2:\n                                    return carouselX({\n                                        titles: types,\n                                        children: types.map( function( typeName ){\n                                            return h1( typeName ).cloneNode( true );\n                                        })\n                                    });\n\t\t\t\t\t\t\t\t\tbreak;\n\n                                    case 3:\n                                    return carouselY({\n                                        titles: types,\n                                        children: types.map( function( typeName ){\n                                            return h1( typeName ).cloneNode( true );\n                                        })\n                                    });\n\t\t\t\t\t\t\t\t\tbreak;\n\n                                    default:\n                                    return carouselZ({\n                                        titles: types,\n                                        children: types.map( function( typeName ){\n                                            return h1( typeName ).cloneNode( true );\n                                        })\n                                    });\n                                } // end of switch()\n                            })\n                        });\n                    })\n                });\n            })\n        });\n    })\n});\n```\n\n\u003ch4\u003ethe structure\u003c/h4\u003e\n\n```bash\ncarouselZ\n├── titles\n└── children\n    └── carouselY\n        ├── titles\n        └── children\n            └── carouselX\n                ├── titles\n                └── children\n                    └── slickX\n                        └── children\n                            └── carouselZ\n                                ├── titles\n                                └── children\n\n\n```\n\n\u003ch4\u003ethe output\u003c/h4\u003e\n \n \u003cp align=\"center\"\u003e\n\t\u003ca  href=\"http://somacss.ir/\"\u003e\u003cimg src=\"public/img/somacss-challenge-shot.png\" alt=\"somacss-challenge-shot.png\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n \n\n\u003ch2 align=\"center\"\u003eCopyright \u0026 License\u003c/h2\u003e\n\u003cp align=\"center\"\u003e\n\t\u003ca  href=\"https://github.com/k-five/soma/blob/master/LICENSE\"\u003e\u003cimg src=\"public/img/MIT.svg.png\" alt=\"MIT.svg.png\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshakibamoshiri%2Fsoma","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshakibamoshiri%2Fsoma","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshakibamoshiri%2Fsoma/lists"}