{"id":13717481,"url":"https://github.com/tjhillard/steller-css","last_synced_at":"2025-05-07T07:31:39.555Z","repository":{"id":41795410,"uuid":"179895792","full_name":"tjhillard/steller-css","owner":"tjhillard","description":"⛰️ A utility-first CSS framework that serves as the foundation of your design system","archived":false,"fork":false,"pushed_at":"2023-01-03T20:10:37.000Z","size":1831,"stargazers_count":14,"open_issues_count":16,"forks_count":3,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-08-03T00:13:35.025Z","etag":null,"topics":["atomic-css","css-framework","design-system","functional-css","utility-classes"],"latest_commit_sha":null,"homepage":"","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/tjhillard.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/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":"2019-04-06T22:59:48.000Z","updated_at":"2024-04-20T02:45:32.000Z","dependencies_parsed_at":"2023-02-01T09:32:15.957Z","dependency_job_id":null,"html_url":"https://github.com/tjhillard/steller-css","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tjhillard%2Fsteller-css","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tjhillard%2Fsteller-css/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tjhillard%2Fsteller-css/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tjhillard%2Fsteller-css/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tjhillard","download_url":"https://codeload.github.com/tjhillard/steller-css/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224573499,"owners_count":17333804,"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":["atomic-css","css-framework","design-system","functional-css","utility-classes"],"created_at":"2024-08-03T00:01:22.914Z","updated_at":"2024-11-14T05:31:57.431Z","avatar_url":"https://github.com/tjhillard.png","language":"CSS","funding_links":[],"categories":["Frameworks / Resources"],"sub_categories":["S"],"readme":"# Steller CSS\n\n![CircleCI branch](https://img.shields.io/circleci/project/github/tjhillard/steller-css/master.svg)\n[![npm version](https://badge.fury.io/js/steller-css.svg)](https://badge.fury.io/js/steller-css)\n![npm](https://img.shields.io/npm/dt/steller-css.svg)\n![NPM](https://img.shields.io/npm/l/steller-css.svg)\n\nSteller is a utility-first CSS framework that serves as the foundation of your application's design system. It includes built-in smart defaults for building responsive, accesible, and visually consistent user interfaces. Unlike other CSS frameworks, Steller has no opinion on the actual end appearance of your application, it is simply a bridge for your design system and your application's styling.\n\n## Features\n* Simple configuration \u0026 setup ⚙️\n* Grid system built with CSS Grid 📏\n* Sass based ✨\n* Encourages mobile-first development 📱\n* Extensible module system 🚀\n* Zero dependencies 🙌\n\n## Installation\n\n```\nnpm i steller-css\n```\n\n```\nyarn add steller-css\n```\n\n## Usage\n\nIn you `index.scss` or equivilent, import `steller-css`.\n```scss\n// Assuming you are using webpack\n@import '~steller-css/index'; // StellerCSS\n```\n\n## Example Projects\n\n* [Steller + Vue CLI 3 | Codesandbox](https://codesandbox.io/s/qlpqoloq5j?fontsize=14)\n* [Steller + Nuxt.js | GitHub](https://github.com/tjhillard/tjhillard.com)\n\n## Config\n\nAll config variables are optional to define as they already have default values. [You can take a look at them here](https://github.com/tjhillard/steller-css/blob/master/src/defaults.scss).\n\nIt is recommended to make a `steller-config.scss` file to be the centralized configuration file. Feel free to name this anything.\n\n```scss\n@import 'steller-config'; // Your config\n@import '~steller-css/index'; // StellerCSS\n```\n\n[Check out this example theme configuration file and feel free to copy/paste it into yours](https://github.com/tjhillard/steller-css/blob/master/example-theme.scss). The values are the same as the defaults above, but this config is your application's design system so get in there make it your own!\n\n### Colors\n\n```scss\n$steller-colors: (\n  // brand\n  'primary': #586f7c,\n  'secondary': #b8dbd9,\n\n  // accents\n  'dwight-schrute': #0FF1C3,\n  'a-song-of-this-and-fire': #1CE,\n);\n```\n\n### Typography\n\n```scss\n$steller-font-families: (\n  'accent': cursive,\n);\n\n$steller-font-sizes: (\n  'xs': 0.75rem,\n  'sm': 0.875rem,\n  'md': 1rem,\n  'lg': 1.5,\n  'xl': 1.875rem,\n  '2xl': 2.25rem,\n  '3xl': 3rem,\n  '4xl': 3.75rem,\n);\n\n$steller-font-weights:(\n  'bold': 700,\n  'medium': 500,\n  'regular': 400,\n  'light': 300,\n  'thin': 100,\n);\n\n$steller-leadings: (\n  'sm': 1.25rem,\n  'md': 1.5rem,\n  'lg': 1.75rem,\n  'xl': 2rem,\n);\n\n$steller-letter-spacings: (\n  'tight': -0.05rem,\n  'normal': 0,\n  'wide': 0.05rem,\n);\n```\n\n### Breakpoints\n\n```scss\n$steller-breakpoints: (\n  'sm': 320px,\n  'md': 600px,\n  'lg': 1024px,\n);\n```\n\n### Container\n\n```scss\n$steller-container-width: 1140px;\n```\n\n```scss\n$steller-container-paddings: (\n  'sm': (padding: 8px),\n  'md': (padding: 12px),\n  'lg': (padding: 16px),\n);\n```\n\n### Grid\n\n```scss\n$steller-grid-columns: 12;\n\n$steller-column-gutters: (\n  'sm': 16px,\n  'md': 16px,\n  'lg': 24px,\n);\n\n$steller-row-gutters: (\n  'sm': 8px,\n  'md': 8px,\n  'lg': 16px,\n);\n```\n\n### Spacing\n\n```scss\n$steller-spacings: (\n  'xs': 4px,\n  'sm': 8px,\n  'md': 16px,\n  'lg': 24px,\n  'xl': 32px,\n  '2xl': 48px,\n  '3xl': 64px,\n);\n```\n\n### Borders\n\n```scss\n$steller-border-radiuses: (\n  'sm': 5px,\n  'md': 10px,\n  'lg': 15px,\n  'xl': 20px,\n);\n\n$steller-border-widths: (\n  'xs': 1px,\n  'sm': 2px,\n  'md': 4px,\n  'lg': 6px,\n  'xl': 8px,\n);\n```\n\n### Motion\n\n```scss\n$steller-transition-properties: (\n  all,\n  width,\n  height,\n  transform,\n  opacity,\n  border,\n  background,\n  background-color,\n  box-shadow,\n  margin,\n  padding,\n  visibility,\n);\n```\n\n```scss\n$steller-durations: (\n  'extra-slow': 500ms,\n  'slow': 400ms,\n  'normal': 300ms,\n  'fast': 200ms,\n  'extra-fast': 100ms,\n);\n```\n\n### Effects\n\n```scss\n$steller-box-shadows: (\n  'sm': 0 7px 15px 0 rgba(0, 0, 0, 0.11), 0 1px 8px 0 rgba(0, 0, 0, 0.06),\n  'md': 0 10px 20px 0 rgba(0, 0, 0, 0.22), 0 3px 12px 0 rgba(0, 0, 0, 0.07),\n  'lg': 0 15px 30px 0 rgba(0, 0, 0, 0.33), 0 5px 15px 0 rgba(0, 0, 0, 0.1),\n);\n```\n\n### Gradients\n\n```scss\n$steller-gradients: (\n  'cta-primary': linear-gradient(to right, #55c1ff, #5863f8),\n);\n```\n\n## Utility Classes\n\n### Container\n| Class | Properties |\n| --- | --- |\n| .container | margin: 0 auto; max-width: $container-width; position: relative; |\n\n```html\n\u003cdiv class=\"container\"\u003e\u003c/div\u003e\n```\n\n### Grid\n\n| Class | Properties |\n| --- | --- |\n| .grid | display: grid; grid-template-columns: repeat($grid-columns, 1fr); |\n| .{$breakpont}:col-{$span} | grid-column: span $span; |\n| .{$breakpont}:row-{$span} | grid-row: span $span; |\n| .{$breakpont}:col-{$span}-start-{$grid-column-start} | grid-column: $grid-column-start / span $span; |\n\n```html\n\u003cdiv class=\"grid\"\u003e\n  \u003cdiv class=\"col-12 md:col-6\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"col-12 md:col-6\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\n### Typography\n\n| Class | Properties |\n| --- | --- |\n| .font-{$family} | font-family: $font-family |\n| .font-size-{$size} | font-size: $size |\n| .font-weight-{$weight} | font-size: $weight |\n| .leading-{$leading} | line-height: $leading |\n| .italic | font-style: italic; |\n| .underline | text-decoration: underline; |\n| .no-underline | text-decoration: none; |\n| .lowercase | text-transform: lowercase; |\n| .uppercase | text-transform: uppercase; |\n| .capitalize | text-transform: captialize; |\n| .letter-spacing-tight | letter-spacing: -0.05em; |\n| .letter-spacing-normal | letter-spacing: 0em; |\n| .letter-spacing-wide | letter-spacing: 0.05em; |\n| .list-reset | list-style: none; padding: 0; |\n| .whitespace-normal | white-space: normal; |\n| .whitespace-no-wrap | white-space: nowrap; |\n| .whitespace-pre | white-space: pre; |\n| .whitespace-pre-line | white-space: pre-line; |\n| .whitespace-pre-wrap | white-space: pre-wrap; |\n| .break-word | word-wrap: break-word; |\n| .break-word | word-wrap: normal; |\n| .truncate | overflow: hidden; text-overflow: ellipses; white-space: nowrap; |\n\n```html\n\u003c!-- font size --\u003e\n\u003cdiv class=\"font-size-3xl\"\u003e\u003c/div\u003e\n\n\u003c!-- font weight --\u003e\n\u003cdiv class=\"font-weight-bold\"\u003e\u003c/div\u003e\n\n\u003c!-- leading (line height) --\u003e\n\u003cdiv class=\"leading-sm\"\u003e\u003c/div\u003e\n```\n\n### Color\n\n| Class | Properties |\n| --- | --- |\n| .text-{$color} | color: $color; |\n| .bg-{$color} | background-color: $color; |\n\n```scss\n$steller-colors: (\n  'my-color-name': #586f7c,\n);\n```\n```html\n\u003cdiv class=\"text-my-color-name\"\u003e\u003c/div\u003e\n\u003cdiv class=\"bg-my-color-name\"\u003e\u003c/div\u003e\n```\n\n### Layout\n\n| Class | Properties |\n| --- | --- |\n| .block | display: block; |\n| .inline-block | display: inline-block; |\n| .inline | display: inline; |\n| .hidden | display: none; |\n| .text-center | text-align: center; |\n| .text-left | text-align: left; |\n| .text-right | text-align: right; |\n| .text-justify | text-align: justify; |\n| .float-left | float: left; |\n| .float-right | float: right; |\n| .float-none | float: none; |\n| .static | position: static; |\n| .fixed | position: fixed; |\n| .absolute | position: absolute; |\n| .relative | position: relative; |\n| .sticky | position: sticky; |\n| .pin | top: 0; right: 0; bottom: 0; left: 0; |\n| .pin-t | top: 0; |\n| .pin-r | right: 0; |\n| .pin-b | bottom: 0; |\n| .pib-l | left: 0; |\n| .visible | visibility: visible; |\n| .invisible | visibility: hidden; |\n| .z-0 | z-index: 0; |\n| .z-1 | z-index: 1; |\n| .z-2 | z-index: 2; |\n| .z-10 | z-index: 10; |\n| .z-20 | z-index: 20; |\n| .z-max | z-index: 2147483647; |\n| .vertical-align-baseline | vertical-align: baseline; |\n| .vertical-align-top | vertical-align: top; |\n| .vertical-align-middle | vertical-align: middle; |\n| .vertical-align-bottom | vertical-align: bottom; |\n| .vertical-align-text-top | vertical-align: text-top; |\n| .vertical-align-text-bottom | vertical-align: text-bottom; |\n\n### Spacing\n\n| Class | Properties |\n| --- | --- |\n| .m-{$size} | margin: $size; |\n| .p-{$size} | padding: $size; |\n| .mx-{$size} | margin-left: $size; margin-right: $size; |\n| .px-{$size} | padding-left: $size; padding-right: $size; |\n| .my-{$size} | margin-top: $size; margin-bottom: $size; |\n| .py-{$size} | padding-top: $size; padding-bottom: $size; |\n| .mt-{$size} | margin-top: $size; |\n| .pt-{$size} | padding-top: $size; |\n| .mr-{$size} | margin-right: $size; |\n| .pr-{$size} | padding-right: $size; |\n| .mb-{$size} | margin-bottom: $size; |\n| .pb-{$size} | padding-bottom: $size; |\n| .ml-{$size} | margin-left: $size; |\n| .pl-{$size} | padding-left: $size; |\n\n* Spacing Sizes: ('xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl')\n\n```html\n\u003c!-- margin all sides large --\u003e\n\u003cdiv class=\"m-lg\"\u003e\u003c/div\u003e\n\n\u003c!-- padding top/bottom small --\u003e\n\u003cdiv class=\"py-sm\"\u003e\u003c/div\u003e\n\n\u003c!-- margin top 2xl --\u003e\n\u003cdiv class=\"mt-2xl\"\u003e\u003c/div\u003e\n\n\u003c!-- padding right extra small --\u003e\n\u003cdiv class=\"pr-xs\"\u003e\u003c/div\u003e\n```\n\n### Flexbox\n\n| Class | Properties |\n| --- | --- |\n| .flex | display: flex; |\n| .inline-flex | display: inline-flex; |\n| .flex-row | flex-direction: row; |\n| .flex-col | flex-direction: col; |\n| .flex-row-reverse | flex-direction: row-reverse; |\n| .flex-col-reverse | flex-direction: col-reverse; |\n| .flex-wrap | flex-wrap: wrap; |\n| .flex-no-wrap | flex-wrap: nowrap; |\n| .flex-wrap-reverse | flex-wrap: wrap-reverse; |\n| .items-strech | align-items: stretch; |\n| .items-start | align-items: flex-start; |\n| .items-center | align-items: center; |\n| .items-end | align-items: flex-end; |\n| .items-baseline | align-items: baseline; |\n| .content-start | align-content: flex-start; |\n| .content-center | align-content: center; |\n| .content-end | align-content: flex-end; |\n| .content-betwen | align-content: space-between; |\n| .content-around | align-content: space-around; |\n| .self-auto | align-self: auto; |\n| .self-start | align-self: flex-start; |\n| .self-center | align-self: center; |\n| .self-end | align-self: flex-end; |\n| .self-stretch | align-self: stretch; |\n| .justify-start | justify-content: flex-start; |\n| .justify-center | justify-content: center; |\n| .justify-end | justify-content: flex-end; |\n| .flex-initial | flex: initial; |\n| .flex-1 | flex: 1; |\n| .flex-2 | flex: 2; |\n| .flex-auto | flex: auto; |\n| .flex-none | flex: none; |\n| .flex-grow | flex-grow: 1; |\n| .flex-shrink | flex-shrink: 1; |\n| .flex-no-grow | flex-grow: 0; |\n| .flex-no-shrink | flex-shrink: 0; |\n\n### Sizing\n\n| Class | Properties |\n| --- | --- |\n| .w-auto | width: auto; |\n| .w-full | width: 100%; |\n| .w-screen | width: 100vw; |\n| .w-1px | width: 1px; |\n| .h-auto | height: auto; |\n| .h-full | height: 100%; |\n| .h-screen | height: 100vh; |\n| .h-1px | height: 1px; |\n| .min-w-auto | min-width: auto; |\n| .min-w-full | min-width: 100%; |\n| .min-w-screen | min-width: 100vw; |\n| .min-w-1px | min-width: 1px; |\n| .min-w-0 | min-width: 0; |\n| .min-h-auto | min-height: auto; |\n| .min-h-full | min-height: 100%; |\n| .min-h-screen | min-height: 100vh; |\n| .min-h-1px | min-height: 1px; |\n| .min-h-0 | min-height: 0; |\n| .max-w-auto | max-width: auto; |\n| .max-w-full | max-width: 100%; |\n| .max-w-screen | max-width: 100vw; |\n| .max-w-1px | max-width: 1px; |\n| .max-w-0 | max-width: 0; |\n| .max-h-auto | max-height: auto; |\n| .max-h-full | max-height: 100%; |\n| .max-h-screen | max-height: 100vh; |\n| .max-h-1px | max-height: 1px; |\n| .max-h-0 | max-height: 0; |\n\n### Borders\n\n| Class | Properties |\n| --- | --- |\n| .rounded-{$size} | border-radius: $size; |\n| .border-{$color} | border-color: auto; |\n| .border-{$corner}-{$radius} | border-{$corner}-radius: $radius; |\n| .border-{$width} | border-width: $width; |\n| .border-{$side}-{$width} | border-{$side}-width: $width; |\n| .border-solid | border-style: solid; |\n| .border-dashed | border-style: dashed; |\n| .border-dotted | border-style: dotted; |\n| .border-inset | border-style: inset; |\n| .border-outset | border-style: outset; |\n\n* Border Radius Sizes: ('sm', 'md', 'lg', 'xl')\n* Border Width Sizes: ('xs', 'sm', 'md', 'lg', 'xl')\n\n```scss\n$steller-colors: (\n  'my-color-name': #586f7c,\n);\n```\n```html\n\u003c!-- border radius (all 4 corners) --\u003e\n\u003cdiv class=\"rounded-lg\"\u003e\u003c/div\u003e\n\n\u003c!-- border top --\u003e\n\u003cdiv class=\"border-top-xs border-my-color-name border-solid\"\u003e\u003c/div\u003e\n\n\u003c!-- rounded bottom right corner only --\u003e\n\u003cdiv class=\"rounded-br-sm\"\u003e\u003c/div\u003e\n```\n\n### Effects\n\n| Class | Properties |\n| --- | --- |\n| .shadow-{$size} | box-shadow: $size; |\n| .opacity-100 | opacity: 1; |\n| .opacity-75 | opacity: 0.75; |\n| .opacity-50 | opacity: 0.5; |\n| .opacity-25 | opacity: 0.25; |\n| .opacity-0 | opacity: 0; |\n\n* Box Shadow Sizes: ('sm', 'md', 'lg')\n\n```html\n\u003cdiv class=\"shadow-md\"\u003e\u003c/div\u003e\n```\n\n### Gradients\n\n| Class | Properties |\n| --- | --- |\n| .bg-gradient-{$gradient-name} | background-image: $gradient; |\n\n```scss\n$steller-colors: (\n  'my-color-name': #586f7c,\n);\n```\n```html\n\u003cdiv class=\"bg-gradient-my-gradient-name\"\u003e\u003c/div\u003e\n```\n\n### Backgrounds\n\n| Class | Properties |\n| --- | --- |\n| .bg-attachment-fixed | background-attachment: fixed; |\n| .bg-attachment-local | background-attachment: local; |\n| .bg-attachment-scroll | background-attachment: scroll; |\n| .bg-position-bottom | background-position: bottom; |\n| .bg-position-center | background-position: center; |\n| .bg-position-left | background-position: left; |\n| .bg-position-left-bottom | background-position: left-bottom; |\n| .bg-position-left-top | background-position: left-top; |\n| .bg-position-right | background-position: right; |\n| .bg-position-right-bottom | background-position: right-bottom; |\n| .bg-position-right-top | background-position: right-top; |\n| .bg-position-top | background-position: top; |\n| .bg-repeat | background-repeat: repeat; |\n| .bg-no-repeat | background-repeat: no-repeat; |\n| .bg-repeat-x | background-repeat: repeat-x; |\n| .bg-repeat-y | background-repeat: repeat-y; |\n| .bg-size-auto | background-size: auto; |\n| .bg-size-cover | background-size: cover; |\n| .bg-size-contain | background-size: contain; |\n\n### Interactivity\n\n| Class | Properties |\n| --- | --- |\n| .appearance-none | appearance: none; |\n| .cursor-auto | cursor: auto; |\n| .cursor-default | cursor: default; |\n| .cursor-pointer | cursor: pointer; |\n| .cursor-wait | cursor: wait; |\n| .cursor-move | cursor: move; |\n| .cursor-not-allowed | cursor: not-allowed; |\n| .outline-none | outline: none; |\n| .pointer-events-none | pointer-events: none; |\n| .pointer-events-auto | pointer-events: auto; |\n| .resize-none | resize: none; |\n| .resizable | resize: both; |\n| .resizable-y | resize: vertical; |\n| .resizable-x | resize: horizontal; |\n| .user-select-text | user-select: text; |\n| .user-select-none | user-select: none; |\n\n### Table\n\n| Class | Properties |\n| --- | --- |\n| .table-auto | table-layout: auto; |\n| .table-fixed | table-layout: fixed; |\n| .border-collapse | border-collapse: collapse; |\n| .border-seperate | border-collapse: separate; |\n\n### SVG\n\n| Class | Properties |\n| --- | --- |\n| .fill-current | fill: currentColor; |\n| .stroke-current | stroke: currentColor; |\n\n## State Variants\n\n### Responsive\n\nFor breakpoint specific stylings, add the breakpoint label prefix to the beginning of the class.\n\n```html\n\u003cspan class=\"text-success md:text-danger\"\u003e\n  I am naturally the success color,\n  but I am the danger color above the medium breakpoint\n\u003c/span\u003e\n```\n\n### Hover\n\nTo apply a style on hover, prefix the normal class with `hover:`.\n\n```html\n\u003cspan class=\"hover:underline\"\u003e\n  I am undelrined on hover!\n\u003c/span\u003e\n```\n\n### Focus\n\nTo apply a style on focus, prefix the normal class with `focus:`.\n\n```html\n\u003cspan class=\"focus:underline\"\u003e\n  I am undelrined on focus!\n\u003c/span\u003e\n```\n\n### Active\n\nTo apply a style on active, prefix the normal class with `active:`.\n\n```html\n\u003cspan class=\"active:underline\"\u003e\n  I am undelrined on active!\n\u003c/span\u003e\n```\n\n## Custom CSS\n\nWithin a functional CSS paradigm, you hopefully won't be writing that much custom styling in CSS/SCSS files, but you'll likely need to write some for the occasional complex component or feature. Steller recognizes this and exposes all of your theme config variables as [CSS Custom Properties (CSS Variables)](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) to help you.\n\nYour config\n```scss\n$steller-colors: (\n  'primary': lightblue,\n  'secondary': pink,\n);\n\n$steller-font-families: (\n  'classy': ('Comic Sans', cursive),\n);\n```\n\nYour feature\n```css\n.some-complex-element {\n  background: linear-gradient(var(--color-primary), var(--color-secondary));\n  font-family: var(--font-classy);\n  font-size: var(--font-size-2xl);\n}\n```\n\nOptionally, you can just reference the Steller theme variables directly or use one of the helper sass functions Steller provides.\n\n```scss\n.foo {\n  // finds the color named 'primary' in your $steller-colors theme var\n  background-color: color('primary');\n  // finds the font family named 'classy' in your $steller-custom-font-families theme var\n  font-family: font-family('classy');\n}\n```\n\nList of all built-in functions like the above color \u0026 font-family example:\n\n* color()\n* font-family()\n* spacing()\n* border-radius()\n* border-width()\n* box-shadow()\n* breakpoint()\n* column-gutter()\n* row-gutter()\n* gradient()\n* speed()\n\n## Extending Steller / Custom Classes\n\nSteller is extensible via first or third-party modules. Simply add a sass map to the `$steller-modules` variable in your theme conifg (or anywhere before your steller-css import).\n[Example.](https://github.com/tjhillard/steller-vue-transitions/blob/master/__tests__/index.scss)\n\n```scss\n$steller-modules: (\n  $my-custom-utils,\n);\n```\n\nYour module variable should look something along these lines:\n\n```scss\n$my-custom-utils: (\n  'wumbo': font-size: 100px,\n  'cant-see-u': (opacity: 0, visibility: hidden),\n);\n```\n\n```html\n\u003cspan class=\"cant-see-u md:wumbo\"\u003e\n  Custom classes! :tada:\n\u003c/span\u003e\n```\n\nClasses via steller modules automatically have all prefixed variants available.\n\n---\n\n#### Contributors\n\n* [TJ Hillard (@tjhillard)](https://github.com/tjhillard)\n* [Peter Glennon (@pcrglennon)](https://github.com/pcrglennon)\n\n#### Roadmap\n\n* Ship a stable, battle-tested 1.0 version\n\n#### Steller Family\n\n* [steller-vue-transitions (WIP)](https://github.com/tjhillard/steller-vue-transitions)\n\n#### What is functional/atomic/utility-first CSS?\n\n* [CSS and Scalability by Adam Morse](http://mrmrs.cc/writing/2016/03/24/scalable-css/)\n* [Functional CSS at Scale: Clean \u0026 composable UI on a massive app](https://www.youtube.com/watch?v=uHVqbCPnOwU)\n\n#### TailwindCSS vs StellerCSS\n\nThe most similar framework to Steller is without a doubt [Tailwind CSS](https://tailwindcss.com/). Tailwind is awesome and it was half of the reason\nI first realized the true power of utility-first CSS to begin with. So why Steller then? At [Snap! Raise](https://snap-raise.com), we had a couple of primary reasons to roll our own framework.\n\n* **The Grid System.** [Tailwind doesn't have a built-in grid system](https://tailwindcss.com/components/grids/#app) and\nyou're kinda stuck with hacking together a flexbox/width percentage solution as shown in their docs. A 12-column grid system is really important to us\nfrom both a design and developement perspective. The Steller grid system, which is built on top of CSS Grid, offers a lot more here.\n* **Sass vs JS.** Tailwind is written in PostCSS which is a tool for transforming styles via JavaScript plugins. Though a very powerfull tool, it is my\nopinion that it's benefits comes with the trade offs of a more complex setup and steeper learning curve. Our team was already familiar with and using Sass and we wanted to stay within that reliable paradigm. Jumping into a JavaScript file to change your base CSS configuration just seems like a context switch.\n\nOther than that, Steller and Tailwind are pretty much very similar tools. Like previously mentioned, the initial development of Steller was done with Tailwind as a key inspiration.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftjhillard%2Fsteller-css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftjhillard%2Fsteller-css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftjhillard%2Fsteller-css/lists"}