{"id":15041407,"url":"https://github.com/meerita/utilcss","last_synced_at":"2025-10-13T22:34:15.898Z","repository":{"id":77241891,"uuid":"170006056","full_name":"meerita/utilcss","owner":"meerita","description":"Utilitarian CSS Framework","archived":false,"fork":false,"pushed_at":"2021-10-15T09:05:31.000Z","size":229,"stargazers_count":29,"open_issues_count":0,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-07-06T00:33:08.028Z","etag":null,"topics":["column-gap","css","css-framework","css-grid","flexbox-grid","functional-css","grid","grid-gap","grid-layout","grid-row","grid-system","methodology","mobile-web","sass","sass-framework","scss","scss-files","scss-framework"],"latest_commit_sha":null,"homepage":null,"language":"SCSS","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/meerita.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,"governance":null}},"created_at":"2019-02-10T17:38:04.000Z","updated_at":"2025-04-21T11:55:48.000Z","dependencies_parsed_at":"2023-06-26T01:02:11.999Z","dependency_job_id":null,"html_url":"https://github.com/meerita/utilcss","commit_stats":{"total_commits":161,"total_committers":3,"mean_commits":"53.666666666666664","dds":"0.037267080745341574","last_synced_commit":"52b9e3b73e25ebe89ffbc9e23d9e54fa201cba8f"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/meerita/utilcss","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meerita%2Futilcss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meerita%2Futilcss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meerita%2Futilcss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meerita%2Futilcss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/meerita","download_url":"https://codeload.github.com/meerita/utilcss/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meerita%2Futilcss/sbom","scorecard":{"id":634743,"data":{"date":"2025-08-11","repo":{"name":"github.com/meerita/utilcss","commit":"52b9e3b73e25ebe89ffbc9e23d9e54fa201cba8f"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":3.2,"checks":[{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Code-Review","score":1,"reason":"Found 2/14 approved changesets -- score normalized to 1","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Vulnerabilities","score":10,"reason":"0 existing vulnerabilities detected","details":null,"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 24 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}}]},"last_synced_at":"2025-08-21T08:49:16.656Z","repository_id":77241891,"created_at":"2025-08-21T08:49:16.656Z","updated_at":"2025-08-21T08:49:16.656Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279017148,"owners_count":26085983,"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","status":"online","status_checked_at":"2025-10-13T02:00:06.723Z","response_time":61,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["column-gap","css","css-framework","css-grid","flexbox-grid","functional-css","grid","grid-gap","grid-layout","grid-row","grid-system","methodology","mobile-web","sass","sass-framework","scss","scss-files","scss-framework"],"created_at":"2024-09-24T20:46:04.165Z","updated_at":"2025-10-13T22:34:15.875Z","avatar_url":"https://github.com/meerita.png","language":"SCSS","readme":"The Utilitarian CSS Framework (UCSSM) is a Functional CSS framework and a methodology for developing any website with incredible loading, rendering and painting performance, helping developers to work over time without having to carry architectural problems, technical debt or legacy problems. Yes, you can do responsive too.\n\nUnlike other similar projects such as Bootstrap or BEM, UCSSM focuses on the [utilitarian/functional philosophy of CSS](http://minid.net/2019/04/07/the-css-utilitarian-methodology/): which advocates using atomized classes with individual utility applied to the element instead of creating an initial set of predefined structures, styles and effects, thus increasing the overall size of the CSS file and the time it takes to maintain it or resume  development.\n\nWebsites and apps that were made with UCSSM have generally offered incredible performance results: the painting speed will be reduced by half or more than that; the rendering time will be around 400% faster of your previous projects and the size of CSS files will remain smaller by x10 and it will be easy to maintain.\n\n## Setup\n\nSetting up UCSS is really straightforward if you already worked with SCSS. Assuming you already have a CSS folder in your project, that compiles Sass:\n\n1. Clone this repo on your `/stylesheet/` folder.\n2. Create a new file as a main `.scss`, ex. `styles.scss`.\n3. Copy `config_css`, `config_normalizer` and `config_vars` to your `/stylesheet/` folder.\n4. Append `.scss` to the template files: `config_css`, `config_normalizer` and `config_vars`.\n5. Open your main `styles.scss` and `@import` each template and `util.css`.\n\nThe correct order in your `styles.scss` must be:\n\n\u003cpre\u003e\n@import 'config_vars.scss';\n@import 'config_css.scss';\n@import 'config_normalizer.scss';\n@import 'utilcss/util.scss';\n\n/* my style here */\n@import 'custom.scss';\n\u003c/pre\u003e\n\nIf you don't copy the variables files outside the repo you will have problems when you commit your project, since you will have a cloned repo on your git repo. To avoid problems, it is better to have those files copied outside and be part of your repo in case you want update the framework in the future.\n\n## Usage\n\nYou can read an introductory [article about the Utilitarian CSS Methodology](http://minid.net/2019/04/07/the-css-utilitarian-methodology/) to learn how to build with this new approach.\n\nOnce you have imported all the files into your main `styles.scss` you can open `config_css.scss` in order to start activating all the CSS properties you need for your project. You can start with the basic one, `display`, by searching the variable `$config-display` and change its value to `true`:\n\n\u003cpre\u003e\n$config-display: true;\n\u003c/pre\u003e\n\nThe next step is to open `$config_vars.scss` and search for `$displays`. Uncomment some values:\n\n\u003cpre\u003e\n$displays: (\n  // inline,\n  block,\n  // contents,\n  flex,\n  grid,\n  // inline-block,\n  // inline-flex,\n  // inline-grid,\n  // inline-table,\n  // list-item,\n  // run-in,\n  // table,\n  // table-caption,\n  // table-column-group,\n  // table-header-group,\n  // table-row-group,\n  // table-cell,\n  // none,\n  // initial,\n  // inherit\n);\n\u003c/pre\u003e\n\nRefresh your website and open the compiled version of `styles.css` it must compile:\n\n\u003cpre\u003e\n.display--block { display: block }\n.display--flex { display: flex }\n.display--grid { display: grid }\n\u003c/pre\u003e\n\nNow you can add this classes to your project:\n\n\u003cpre\u003e\n   \u0026lt;span class=\"display--block\"\u0026gt;This is a block now \u0026lt;/span\u0026gt;\n\u003c/pre\u003e\n\nYou can comment/uncomment any map value and Compass will compile automatically the CSS for you on the next build making easy to check which properties are you supporting for your projects.\n\nYou can add new values to any map, for the case of `$colors`, `$margins`, etc.\n\nBy doing this, your CSS output will be really strict and you will only dispose those properties that you need.\n\n\n## The grid system\n\nThis framework let you use all the power of CSS-Grid without reinventing the wheel. This grid system is natural CSS from the CSS Grid Spec, this means the naming also respect the structure of the original CSS Grid properties. Since CSS Grid is supported in all browsers by now, it is a good replacement and also it covers legacy support, so you don't need to replace the class names once grid- prefix goes deprecated.\n\nTo start a grid in any block or inline element, you must activate the grid properties, make sure you have the first one, `display--grid` from the previous section on this README.\n\n\u003cpre\u003e\n\u0026lt;div class=\"display--grid\"\u0026gt;\n  This is a grid now\n\u0026lt;/div\u0026gt;\n\u003c/pre\u003e\n\nThe next step is to edit `config_css` and activate the level of responsiveness for the columns or rows of your grid. Also, let's activate `gap--` property. In the config file, find `$config-gap`, `$config-grid-sm`, `$config-sm-grid-template-columns` and set it to `true`.\n\nNow in your DIV element use the properties. Since by default we have 12 columns in our variables file, let's make the grid 6 columns by using the `template-columns--` property (you don't need to append the grid-).\n\n\u003cpre\u003e\n\u0026lt;div class=\"display--grid sm-template-columns--6\"\u0026gt;\n  Now this grid has 6 columns.\n\u0026lt;/div\u0026gt;\n\u003c/pre\u003e\n\nNow we have a 6 column grid that works from mobile devices. Let's add a gap 8px gap in between the columns, but first, activate the gap scales in the `config_vars` file under `$gap-scales` map:\n\n\u003cpre\u003e\n$gap-scales: (\n  // 0,\n  // 4,\n  8,\n  // 16\n  );\n\u003c/pre\u003e\n\nYou can do your own gap values any time. Just add them to the map and they will build themselves in the next compilation. Now it's time to add the gap into our grid:\n\n\u003cpre\u003e\n\u0026lt;div class=\"display--grid sm-template-columns--6 gap--8\"\u0026gt;\n  Now this grid has 6 columns and 8px gap.\n\u0026lt;/div\u0026gt;\n\u003c/pre\u003e\n\nThis is how grids can be made in UCSS. Plainly simple. The gap property is not responsive. Most of the projects they use the same gap pattern for everything, so if you need a particular change, I recommend you to use a c-classname to do that.\n\nLet's say you want 2 columns in mobile and 6 in desktop. You need then to activate the `$config-grid-md`, `$config-md-grid-template-columns` (for tablets and small desktop onwards) grid config, in the `config_css` file. After you do that, now add the classes to your grid:\n\n\u003cpre\u003e\n\u0026lt;div class=\"display--grid sm-template-columns--2 gap--8 md-template-columns--6 gap--8\"\u0026gt;\n  Now this grid has 2 columns in mobile and 6 in desktops with 8px gap.\n\u0026lt;/div\u0026gt;\n\u003c/pre\u003e\n\nThe grid system is infinitely usable. You can use all css grid- properties in different responsive steps and be sure this will never broke your website, even when you update the framework due its thoughtful legacy support.\n\n## Responsive\n\nThere are a handful of properties that can be used responsively. We decided to not make everything responsive for the sake of keeping the generated code clean and not bloated and to make sure developers only have to take care the minimum. In our tests and analysis, the majority of the developers use way more `display`, `grid` properties than other more cosmetic results. So we keep responsive those.\n\nThe methodology covers all the customizations into the `custom.scss` file where you can alter every single behavior creating your own `.c-classname` file. It's better this way that to create every single property under a responsive perspective.\n\nIf your design on mobile is too radical compared to the desktop, maybe you should use two different UIs with different frontend code than using the same all-in-one code that hammers down the website. The performance gain will be superior.\n\n## Normalizer\n\nEveryone installs [normalizer](https://necolas.github.io/normalize.css/), but few comment on the sections they will never use, therefore, each project already dedicates 6 KB to styles that will never be used. The UCSS framework has a normalizer module, which complies with all normalizer rules, but these are activated according to what you need. To start using it, you need to go to the `config_normalizer` file and start changing the variables to `true` so that it automatically takes effect. No more cost of KBs without impact on the site. You can have your customizer, as I recommend as a philosophy to have the best CSS code: only the classes that are needed.\n\n## Customization\n\nThis framework allow you to achieve 99% of your project, but there are some caveats with this way of developing. Classes are wonderful but they don't cover cases like :hover, :focus, etc. You must create those instances in a separate file, name it custom.scss and store those particular behaviors that you cannot cover with the framework.\n\nThe way we do it using UCSSM methodology, is to create a custom class. Customs classes in UCSSM are named with a prefix `c-`. Let's imagine you have an image that you want to change opacity when you hover it.\n\nWe have found out it is easier to maintain code using this approach. The prefix alerts you from a non-framework behavior, so you can go to only one place to check the class and its properties.\n\nIn your template file add a custom class:\n\n\u003cpre\u003e\n\u0026lt;img class=\"display--block opacity--5 c-no-opacity\"/\u0026gt;\n\u003c/pre\u003e\n\nIn your `custom.scss` file, define that custom class:\n\n\u003cpre\u003e\n.c-no-opacity:hover {\n  opacity: 1;\n  }\n\u003c/pre\u003e\n\nNow when you hover that image, it will shift opacity to 1. This just an example on how functional CSS manages changes and interactions. If done properly, most of the projects end up with less than 100 lines of custom code.\n\n## List of supported properties\n\nWe support all CSS 1, 2 and 3 properties in this framework. You can see extensively each of these properties into our `config_css` file for more information.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmeerita%2Futilcss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmeerita%2Futilcss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmeerita%2Futilcss/lists"}