{"id":15041506,"url":"https://github.com/wearelighthouse/stemcss","last_synced_at":"2025-10-20T02:11:17.772Z","repository":{"id":52928555,"uuid":"123119988","full_name":"wearelighthouse/stemCSS","owner":"wearelighthouse","description":"Build the stem - don't repeat yourself, don't unset yourself.","archived":false,"fork":false,"pushed_at":"2021-04-13T16:00:45.000Z","size":164,"stargazers_count":20,"open_issues_count":9,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-28T08:41:15.355Z","etag":null,"topics":["scss","scss-framework"],"latest_commit_sha":null,"homepage":"","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/wearelighthouse.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":"2018-02-27T11:31:27.000Z","updated_at":"2023-12-05T20:46:51.000Z","dependencies_parsed_at":"2022-08-24T13:51:02.917Z","dependency_job_id":null,"html_url":"https://github.com/wearelighthouse/stemCSS","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/wearelighthouse%2FstemCSS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wearelighthouse%2FstemCSS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wearelighthouse%2FstemCSS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wearelighthouse%2FstemCSS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wearelighthouse","download_url":"https://codeload.github.com/wearelighthouse/stemCSS/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248952450,"owners_count":21188444,"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":["scss","scss-framework"],"created_at":"2024-09-24T20:46:10.635Z","updated_at":"2025-10-20T02:11:17.705Z","avatar_url":"https://github.com/wearelighthouse.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# stemCSS\nAn [OOCSS](https://www.keycdn.com/blog/oocss) Sass framework for rapidly creating organised, responsive, and consistent user interfaces. Originally based off an early fork of [iotaCSS](https://www.iotacss.com/), stemCSS has grown into it's own thing, with a focus on code reuse and flexible programatically created utilities.\n\n## Getting Started\n1. Download the [latest release]() _- this link is TODO when v1 is done!_\n\n```\n$ curl -o stemCSS.zip https://codeload.github.com/wearelighthouse/stemCSS/zip/master\n```\n\n2. Get the contents of it into an assets folder in your project. E.g.\n\n```\n$ unzip -q stemCSS.zip\n$ rm -r stemCSS.zip\n$ mkdir -p assets/scss\n$ cp -r stemCSS-master/* assets/scss/\n$ rm -r stemCSS-master/\n```\n\n3. [Use something like gulp + gulp-sass to transpile the scss](https://css-tricks.com/gulp-for-beginners/).\n\n\n# Utilities\nClass or placeholder selectors that produces a single `value: property`.\n```\n.u-color-black { color: black; }\n.u-flex { display: flex; }\n.u-pos-absolute { position: absolute; }\n```\n\n_In some circumstances_ - like `mx` (`margin-left`, `margin-right`), a utility produces two or more properties.\n```\n.u-mx-auto {\n  margin-left: auto;\n  margin-right: auto;\n}\n```\n\nUtilities are \"created\" by passing a sass map (hence the double brackets) into the make-utility mixin:\n```\n@include make-utility((...));\n```\nThe items in the map can include an __alias__ to determine the name of the utility, a __class__ flag which creates the utility as a class which is always included in the transpiled CSS and can be used in the HTML (rather than just a placeholder which _cannot_ be used in the HTML, and is only in the transpiled CSS if it gets extended), and a __set of CSS properties__.\n```\n@include make-utility((\n  alias: 'mx-auto',\n  class: true,\n  margin-left: auto,\n  margin-right: auto\n));\n```\nIf an __alias__ is not included in the sass map, the first CSS property and value is used as the name of the utility, e.g.\n```\n@include make-utility((\n  height: 1px\n));\n```\n... can be used with:\n```\n@extend %u-height-1px;\n```\n\nSee examples in the pre-existing utilties: [`/utilties/*.scss`](https://github.com/wearelighthouse/stemCSS/tree/master/utilities).\n\n\n# Objects\nLayouts objects - grids, containers, and helpful sets of classes like aspect-ratio etc.  \nNever *visual* - you can't picture an object because it has no colours. If it has _colours_ - it's _probably_ a component.  \nObjects typically @extend utilities.\n```\n.o-container {\n  @extend .u-mx-auto;\n  width: 90vw;\n}\n```\n\n# Components\n*Visual components* in your design system. `Header, Button, Footer, Hero` etc.  \nFollow the *BEM* methodology for their children _where appropriate_.  \n```\n.c-button {\n  @extend .u-flex;\n  @extend .u-bg-color-black;\n  @extend .u-color-white;\n\n  \u0026__icon {\n    @extend .u-pos-absolute;\n    @extend .u-left-50pc;\n    transform: translateX(-50%);\n  }\n}\n```\n\n# Breakpoints\n\n### Defining Breakpoints\nThese are defined in `settings/_breakpoints`, which includes:\n\nGeneral breakpoints as sass variables - can simply be used anywhere you need them!\n```\n$breakpoint-minimum: 320px;\n$breakpoint-large: 1400px;\n```\n\nBreakpoints sass map (get merged with the following map, sans any special generation)\n```\n$global-breakpoints: (\n  landscape: 'screen and (orientation: landscape)',\n  portrait: 'screen and (orientation: portrait)'\n);\n```\n\nBreakpoints sass map with automatic --from and --upto generation\n```\n$global-breakpoints: map-merge($global-breakpoints, make-width-breakpoints((\n  small: 400px,\n  medium: 800px,\n  large: 1200px,\n)));\n```\n\n### Using Breakpoints\n\n##### iotaCSS style\n```\n@include breakpoint(from-medium) {\n  color: red;\n}\n```\n\n##### stemCSS style\n```\n@extend %u-color-red--from-medium;\n```\nThe main advantage of using \"stemCSS style\" breakpoints are that they are extending placeholders, rather than requiring additional individual CSS rules (i.e. you cannot `@extend` a utility from within a standard iotaCSS breakpoint).\n\nIf, for example for consistency, you wanted to restrict the available widths to only 0%, 50%, or 100%, and had created those options in the `_width.scss` utility, then using `@extend %u-width-60pc--from-medium` would fail, whereas `@include breakpoint(from-medium) { width: 60% }` would obviously not.\n\n# Colors\n\nText and background color utilities and are very similar to [iotaCSS's](https://www.iotacss.com/docs/utilities/color/). Colors are defined in [`settings/_colors.scss`](https://github.com/wearelighthouse/stemCSS/blob/master/settings/_colors.scss). E.g:\n```\n$color-very-dark: #111111;\n$auto-colors: (\n  'black': $color-very-dark\n}\n```\nAllows you to use both: `@extend %u-color-black;` and `@extend %u-bg-color-black;`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwearelighthouse%2Fstemcss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwearelighthouse%2Fstemcss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwearelighthouse%2Fstemcss/lists"}