{"id":15041425,"url":"https://github.com/alimansoor/omcss","last_synced_at":"2025-10-20T00:44:06.409Z","repository":{"id":57314236,"uuid":"131937878","full_name":"alimansoor/omcss","owner":"alimansoor","description":"OMCSS (Organisable and Maintainable CSS) is an approach towards creating a scalable and modular architecture for your application's stylesheet.","archived":false,"fork":false,"pushed_at":"2018-05-05T07:32:38.000Z","size":904,"stargazers_count":8,"open_issues_count":0,"forks_count":5,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-04-14T20:17:06.032Z","etag":null,"topics":["bem","bem-css","css","css-framework","css3","front-end-development","frontend","frontend-framework","modular-css","oocss","oocss-framework","sass","sass-framework","scss","scss-framework","smacss"],"latest_commit_sha":null,"homepage":null,"language":"CSS","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/alimansoor.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-05-03T03:37:58.000Z","updated_at":"2023-07-14T17:36:33.000Z","dependencies_parsed_at":"2022-09-20T23:20:45.562Z","dependency_job_id":null,"html_url":"https://github.com/alimansoor/omcss","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alimansoor%2Fomcss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alimansoor%2Fomcss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alimansoor%2Fomcss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alimansoor%2Fomcss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alimansoor","download_url":"https://codeload.github.com/alimansoor/omcss/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248952358,"owners_count":21188427,"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":["bem","bem-css","css","css-framework","css3","front-end-development","frontend","frontend-framework","modular-css","oocss","oocss-framework","sass","sass-framework","scss","scss-framework","smacss"],"created_at":"2024-09-24T20:46:05.850Z","updated_at":"2025-10-20T00:44:06.313Z","avatar_url":"https://github.com/alimansoor.png","language":"CSS","readme":"# OMCSS\n\nOMCSS (Organisable and Maintainable CSS) is an approach towards creating a scalable and modular architecture for your CSS that you can expand and maintain with ease.\n\n## Getting Started\n\nOMCSS provides a bootstrap framework that will help you get started with your application's stylesheet. You can download OMCSS framework from the below options available:\n\n* [Download OMCSS framework](https://github.com/alimansoor/omcss/archive/master.zip)\n* Clone the repo: `git clone https://github.com/alimansoor/omcss.git`\n* Install with npm: `npm install omcss`\n\n### Prerequisites\n\n[Sass](https://sass-lang.com) compiler is a must to compile individual files into your application stylesheet.\n\nPlease visit [https://sass-lang.com/install](https://sass-lang.com/install) to setup Sass based on your environment i.e. Linux, Windows, Mac OS X.\n\n### File Structure\n\n```\nomcss/\n├── base/\n│   ├── _grid.scss\n│   ├── _reset.scss\n│   └── _typography.scss\n│   \n├── layout/\n│   ├── _header.scss\n│   ├── _footer.scss\n│   ├── _sidebar.scss\n│   └── _form.scss\n│   \n├── modules/\n│   ├── _brand.scss\n│   ├── _breadcrumb.scss\n│   ├── _card.scss\n│   ├── _carousel.scss\n│   └── _modal.scss│\n│   \n├── pages/\n│   ├── _home.scss\n│   ├── _about.scss\n│   └── _contact.scss\n│   \n├── themes/\n│   ├── _default.scss\n│   └── _dashboard.scss\n│   \n├── utils/\n│   ├── _config.scss\n│   ├── _extends.scss\n│   ├── _functions.scss\n│   ├── _helpers.scss\n│   ├── _mixins.scss\n│   └── _variables.scss\n│   \n├── vendors/\n│   ├── _jquery-ui.scss\n│   └── _bootstrap.scss\n│   \n├── shame/\n│   └── _shame.scss\n│   \n└── application.scss\n\n```\n\n### Installation\n\nOMCSS provides a file structure that your can place in your application's source stylesheet directory and make use of it.\n\n```\napplication/\n├── css/\n│   ├── omcss/\n│   └── application.css\n│\n├── js/\n│\n├── img/\n│   \n└── index.html\n```\n\n## Deployment\n\nYou need to run sass compiler to compile individual scss files into your application into  main stylesheet:\n\n```\nsass css/omcss/application.scss css/application.css\n```\n\nan alternative example would be:\n\n```\nsass source/stylesheets/omcss/application.scss build/stylesheets/application.css\n```\n\n## Documentation\n\nOMCSS is an approach that will help designers and developers write code that will be future-clean and scalable at the same time. OMCSS' file structure helps developer organise their stylesheets in a manner that produces understandable and clean css structure that is easy to organise and maintain - OMCSS\n\n### OMCSS File Structure\n\nOMCSS is a modular approach that helps you arrange your css into `theme`, `pages`, `layouts` and `modules`. Along with these, it also provide helper folders i.e. `base`, `utils` and `vendors` to organise your helper css files.\n\nBelow is a complete description of OMCSS file structure:\n\n* **Base**\nBase contains css styles on base content such as reset, grid, typography etc.\n\n* **Themes**\nThemes contains css styles for your application themes such as primary, secondary, default, dashboard etc.\n\n* **Pages**\nPages contains css styles for your individual pages such as home, about-us, contact etc.\n\n* **Layouts**\nLayouts contains css style for main application components such as header, footer, sidebar etc.  \n\n* **Modules**\nModules contains css style for re-usable application ui components such as carousel, navigation, breadcrumb, card etc.\n\n* **Utils**\nModules contains utility styles such as mixins, functions, variables etc.\n\n* **Vendors**\nVendor contains third-party css libraries and frameworks such as jquery-ui, bootstrap, foundation etc.\n\n* **Shame**\nShame contains css styles that you are shame about or you have written as an urgent request and will soon change it and write proper code. Its wise to write messy css for any of the above styles over here.\n\n### Naming Convention\n\nOMCSS follows Kebab case naming convention in its core e.g. `.txt-white`, `.nav-item` etc.\n\nFor components that contains sub-classes, OMCSS encourages `_underscore` naming convention which add an underscore as it goes within the tree:\n\n```\n.parent {\n  ._child {\n    .__sub-child {\n      ...\n    }\n  }\n}\n```\n\nPlease note that above convention is not mandatory. It will facilitate developers to write consistent and future-proof code. However you are free to use any convention of your choice.\n\n## Contributing\n\nPlease read [CONTRIBUTING.md](https://github.com/alimansoor/omcss/blob/master/CONTRIBUTING.md) for details on our code of conduct, and the process for submitting pull requests to us.\n\n## Versioning\n\nWe use [SemVer](http://semver.org/) for versioning. For the versions available, see the [tags on this repository](https://github.com/your/project/tags).\n\n## Creator\n\n**Muhammad Ali Mansoor**\n\n- \u003chttps://www.linkedin.com/in/muhammad-mansoor-70857239/\u003e\n- \u003chttps://github.com/alimansoor\u003e\n\n### Special Contributions\n\n**Ruchi Singhal**\n\n- \u003chttps://www.linkedin.com/in/ruchi-singhal\u003e\n- \u003chttps://github.com/ruchi-singhal\u003e\n\n**Santanu Satapathy**\n\n- \u003chttps://www.linkedin.com/in/santanu-satapathy-san-7175234/\u003e\n- \u003chttps://github.com/sansata\u003e\n\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details\n\n## Acknowledgments\n\n* SMACSS, OOCSS, BEM\n* Twitter Bootstrap, Foundation CSS, Materialize CSS, Semantic UI, Tailwind, Marvel.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falimansoor%2Fomcss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falimansoor%2Fomcss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falimansoor%2Fomcss/lists"}