{"id":15818723,"url":"https://github.com/NebulaUI/nebula-css","last_synced_at":"2025-10-16T15:30:28.489Z","repository":{"id":58246083,"uuid":"45146482","full_name":"NebulaUI/nebula-css","owner":"NebulaUI","description":"💫 ITCSS and BEM based Sass/CSS toolkit; extensible \u0026 scalable to any project size","archived":false,"fork":false,"pushed_at":"2019-03-19T11:10:59.000Z","size":386,"stargazers_count":62,"open_issues_count":0,"forks_count":6,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-01-22T10:11:04.832Z","etag":null,"topics":["architecture","bem-methodology","css","itcss","sass-framework","sass-map","ui-grid"],"latest_commit_sha":null,"homepage":"https://nebulaui.github.io/nebula/","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/NebulaUI.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":"2015-10-28T22:48:45.000Z","updated_at":"2024-04-12T07:56:38.000Z","dependencies_parsed_at":"2022-08-31T00:21:51.183Z","dependency_job_id":null,"html_url":"https://github.com/NebulaUI/nebula-css","commit_stats":null,"previous_names":["rbrtsmith/nebula-css","rbrtsmith/rbrtsmith-grid"],"tags_count":28,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NebulaUI%2Fnebula-css","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NebulaUI%2Fnebula-css/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NebulaUI%2Fnebula-css/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NebulaUI%2Fnebula-css/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/NebulaUI","download_url":"https://codeload.github.com/NebulaUI/nebula-css/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":236730807,"owners_count":19195682,"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":["architecture","bem-methodology","css","itcss","sass-framework","sass-map","ui-grid"],"created_at":"2024-10-05T06:04:44.912Z","updated_at":"2025-10-16T15:30:28.034Z","avatar_url":"https://github.com/NebulaUI.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Nebula CSS ![Travis-ci](https://travis-ci.org/NebulaUI/nebula-css.svg?branch=master) [![npm version](https://badge.fury.io/js/nebula-css.svg)](https://badge.fury.io/js/nebula-css)\n\n* 6kb (gzip) with default settings.\n* [View the demo](http://rbrtsmith.com/nebula)\n* `yarn add nebula-css` / [Get started](#get-started)\n* Check out [Nebula-CSS React Starter](https://github.com/rbrtsmith/nebula-css-react-starter) to see how this can be integrated into a ReactJS project.\n\nSuper low-level mobile-first Sass framework using the [ITCSS](https://www.youtube.com/watch?v=1OKZOV-iLj4) architecture and the [BEM(IT)](http://csswizardry.com/2015/08/bemit-taking-the-bem-naming-convention-a-step-further/) naming convention.\n\nRather than using 'semantic classnames' that some other frameworks push, the classnames employed in Nebula explicitly describe the underlying architecture.\nThis makes it *much* easier to reason about the CSS structure from your HTML, promotes code re-use and composition; which otherwise would all be severely hindered if classnames were closely coupled with content.\n\nShips with zero cosmetic styling; this allows every consuming project to have a completely bespoke UI with Nebula CSS doing the heavy lifting when it comes to layout and architecture.  This means it is totally upto you how you structure your colours, typography and cosmetic components, however you are encouraged to follow the ITCSS structure and BEMIT naming conventions.\n\nAt the core sits a highly flexible and and extendible grid system making use of the very powerful [map](https://www.viget.com/articles/sass-maps-are-awesome) feature of Sass.\nMaps are used extensively and allow the following features to be easily extended and in some cases composed:\n* Breakpoints\n* Grid fractions\n* Grid offsets\n* Grid guttering\n* List spacing\n* Section spacing\n* Spacing - margin \u0026 padding utilities\n\nNebula CSS also ships with some common yet useful abstractions such as the Flag Object, list variations and an array of useful utilities.\n\n## Table of contents\n\n* [Intro to ITCSS](#intro-to-itcss)\n* [Dependencies](#dependencies)\n* [Get started](#get-started)\n* [Default settings and config](#default-settings-and-config)\n  * [Overriding settings](#overriding-settings)\n* [Breakpoints](#breakpoints)\n* [Grid](#grid)\n* [Flag](#flag)\n* [Site-wrap](#site-wrap)\n* [Section](#section)\n* [Lists](#lists)\n  * [Bare list](#bare-list)\n  * [Inline list](#inline-list)\n  * [Matrix list](#matrix-list)\n  * [Uniformed list](#uniformed-list)\n* [Utilities](#utilities)\n  * [Push](#push)\n  * [Flush](#flush)\n  * [Soft](#soft)\n  * [Hard](#hard)\n  * [Hidden](#hidden)\n\n\n## Intro to ITCSS\nNebula CSS is built upon the [ITCSS](https://www.youtube.com/watch?v=1OKZOV-iLj4) architecture popularised by [Harry\nRoberts](http://csswizardry.com/).\n\nITCSS stands for *Inverted Triangle* architecture for *CSS*\n\nIt is a sane, scalable, managed architecture and is more of a school of thought than a framework.\n\nThe architecture is based on the *write CSS in specificity order* principle; this eliminates many of the specificity issues that occur as a project scales.\n\nITCSS is divided up into 7 distinct sections they are:\n\n1. Settings\n2. Tools\n3. Resets\n4. Base\n5. Objects\n6. Components\n7. Utilities\n\n### 1. Settings\nGlobal variables and config.\n\n### 2. Tools\nGlobally used mixins and functions.\n\n### 3. Resets (Generic)\n[Normalize.css](https://github.com/necolas/normalize.css/) and any additional\nresets on top of Normalize.\n\n### 4. Base\nGlobal baseline styles using element and attribute selectors only (No classes)\n\n### 5. Objects\nCosmetic-free design patters, things like the grid, lists and the flag\nobject.  Think of it like the skeleton of the layout, with no visual styling\napplied.\n\n### 6. Components\nDesigned components, chunks of UI.  Think of it like the skin on top of the\nskeleton, so anything with colours, borders, backgrounds etc.  If in doubt\nwhether some CSS/Sass code belongs in layout or components then put it within\ncomponents. **Being cosmetic free Nebula CSS does not ship with any components**\n\n### 7. Utilities\nHelpers and overrides. AKA Trumps.\n\n\n\n## Dependencies\n\nNebula CSS is composed of [Sass](http://sass-lang.com/) files so you'll need some way to compile to CSS; we'd recommend you use a [Libsass](http://sass-lang.com/libsass) based tool, which will likely be available for your build tool of choice:\n* [Node Sass](https://github.com/sass/node-sass) (NPM Scripts)\n* [Webpack Sass Loader](https://github.com/jtangelder/sass-loader) (Webpack)\n* [Gulp Sass](https://github.com/dlmanning/gulp-sass) (Gulp)\n\nHaving a deep knowledge of Sass is not required to consume Nebula CSS, but a familiarity will greatly help you get the most out of this architecture.\n\n**This document assumes you have [NodeJS](https://nodejs.org/en/) installed on your machine.**\n\nNebula's source code does not include any vendor prefixes.  This gives you the freedom to configure [Autoprefixer](https://github.com/postcss/autoprefixer) to the browsers that you intend to support.\nThis can be ran directly in NPM scripts as you can see happening in this projects [package.json](https://github.com/rbrtsmith/nebula-css/blob/master/package.json#L9).  Alternatively you can run this in your build-tool of choice.\n\n\n## Get Started\n1. `yarn add nebula-css` OR `npm i -S nebula-css`\n2. Setup an ITCSS file structure:\n    1. `cd` into the directory where you intend to build out your ITCSS structure.\n    2. Paste the following snippet into your terminal:\n        - Mac / Linux users\n            ```\n            mkdir scss \u0026\u0026\n            cd scss \u0026\u0026\n            {\n              echo \"@import 'settings';\"\n              echo \"@import 'tools';\"\n              echo \"@import 'resets';\"\n              echo \"@import 'base';\"\n              echo \"@import 'objects';\"\n              echo \"@import 'components';\"\n              echo \"@import 'utilities';\"\n              echo \"\"\n            } \u003e main.scss \u0026\u0026\n            echo \"@import 'nebula-css/settings';\" \u003e _settings.scss \u0026\u0026\n            echo \"@import 'nebula-css/tools';\" \u003e _tools.scss \u0026\u0026\n            echo \"@import 'nebula-css/resets';\" \u003e _resets.scss \u0026\u0026\n            echo \"@import 'nebula-css/base';\" \u003e _base.scss \u0026\u0026\n            echo \"@import 'nebula-css/objects';\" \u003e _objects.scss \u0026\u0026\n            echo \"@import 'nebula-css/utilities';\" \u003e _utilities.scss \u0026\u0026\n            touch _components.scss \u0026\u0026\n            cd ..\n            ```\n        - Windows users\n            ```\n            mkdir scss\n            cd scss\n\n            echo @import 'settings'; \u003e\u003e main.scss\n            echo @import 'tools'; \u003e\u003e main.scss\n            echo @import 'resets'; \u003e\u003e main.scss\n            echo @import 'base'; \u003e\u003e main.scss\n            echo @import 'objects'; \u003e\u003e main.scss\n            echo @import 'components'; \u003e\u003e main.scss\n            echo @import 'utilities'; \u003e\u003e main.scss\n\n            echo @import 'nebula-css/settings'; \u003e _settings.scss\n            echo @import 'nebula-css/tools'; \u003e _tools.scss\n            echo @import 'nebula-css/resets'; \u003e _resets.scss\n            echo @import 'nebula-css/base'; \u003e _base.scss\n            echo @import 'nebula-css/objects'; \u003e _objects.scss\n            echo @import 'nebula-css/utilities'; \u003e _utilities.scss\n            echo.\u003e _components.scss\n\n            cd ..\n            ```\n\n        The following file structure will be created.\n\n        ```\n        scss/\n        |\n        ├──main.scss\n        ├──_settings.scss\n        ├──_tools.scss\n        ├──_resets.scss\n        ├──_base.scss\n        ├──_objects.scss\n        ├──_components.scss\n        ├──_utilities.scss\n        ```\n\n        `main.scss` gets populated with the seven ITCSS layers.\n\n        ```sass\n        /* main.scss */\n        @import 'settings';\n        @import 'tools';\n        @import 'resets';\n        @import 'base';\n        @import 'objects';\n        @import 'components';\n        @import 'utilities';\n        ```\n\n        The files that `main.scss` imports are also populated with `@import` statements\n        that are pulling in the corresponding ITCSS layer from Nebula CSS. E.g.\n\n        ```sass\n        /* _settings.scss */\n        @import 'nebula-css/settings';\n        ```\n\n        It is worth noting here that to resolve the above path your Sass compiler requires\n        [Node-sass IncludePaths](https://github.com/sass/node-sass#includepaths)\n        If your Sass Compiler does not offer IncludePaths resulting in your build failing\n        you will have to give your imports a relative path:\n\n        ```sass\n        /*  _settings.scss */\n        @import '[path-to-node-modules]/nebula-css/nebula-css/settings';\n        ```\n\n        As you can see this is rather verbose and ugly code but it works!\n\n        Below is an example of an NPM script configured to compile Sass and making use of `includePaths` pointing to the directory to be resolved `./node-modules/nebula-css/`\n\n        ```json\n        \"scripts\": {\n          \"sass\": \"node-sass --include-path ./node_modules/nebula-css/ -o dist src/scss/main.scss\",\n        },\n        ```\n\n        See how the NPM scripts [package.json](https://github.com/rbrtsmith/nebula-css/blob/master/package.json#L8) are configured for the Nebula CSS Demo.\n\n        Alternatively here's an example using Gulp.\n\n        ```javascript\n        gulp.task('build:css', () =\u003e {\n          const includePaths = ['./node_modules/nebula-css/'];\n          return gulp.src('src/scss/**/*.scss')\n            .pipe(sass({ includePaths }))\n            .pipe(gulp.dest('dist'))\n        });\n        ```\n\n\n  3. Configure your build tool to build your Sass files and run Autoprefixer\n\n  4. You can now start extending Nebula with your own styling.  Following with the ITCSS structure it's recommended that you create the folders for the layers that you are extending and `@import` those files.\n\n      An example structure might look like this:\n\n      ```\n      scss/\n      |\n      ├──main.scss\n      ├──_settings.scss\n      ├──_tools.scss\n      ├──_resets.scss\n      ├──_base.scss\n      ├──_objects.scss\n      ├──_components.scss\n      ├──_utilities.scss\n      ├──settings/\n      |  └──_nebula-overrides.scss\n      |  └──_my-settings.scss\n      ├──base/\n      |  └──_my-base-styles.scss\n      ├──objects\n      |  ├──_my-object-1.scss\n      |  └──_my-object-2.scss\n      ├──components/\n      |  ├──_my-component-1.scss\n      |  └──_my-component-2.scss\n      └──utilities/\n      ├──_my-utility-1.scss\n      └──_my-utility-2.scss\n      ```\n\n## Default settings and config\n\nSome of the settings here make use of [Sass maps](https://www.viget.com/articles/sass-maps-are-awesome) it's recommended you have at least a basic understanding of how they work.\n\nDefines the namespace to be added to classes generated by Nebula.\n```sass\n$nb-namespace: '' !default;\n```\nDefines the maximum width of the site wrapper `o-site-wrap`\n```sass\n$nb-site-wrap-width: 60rem !default;\n```\nThe spacing unit is used throughout the entire framework for spacing and guttering. It yields consistent spacing rhythm throughout your project.\n```sass\n$nb-spacing-unit: 1rem !default;\n```\nBase font-sizing for body copy.\n```sass\n$nb-base-font-size: 1rem !default;\n```\nThe delimiter to use for responsive variations of classes. Default `@`. (Can be changed to i.e. `-bp-` to allow CSS modules' `composes:` as that doesn't work with `@` in class names)\n```sass\n$nb-breakpoint-class: '\\\\@' !default;\n```\nBreakpoints using a Sass Map. the keys `sm`, `md` are used to generate the responsive classnames.  Being a Sass map it is possible to add or remove breakpoints and of course you can change the values.\n```sass\n$nb-breakpoints: (\n  sm: 720px,\n  md: 960px,\n  lg: 1200px\n) !default;\n```\nThe root font-sizing set as a percentage on the `\u003chtml\u003e` element.\nThe key `default` being the initial sizing up until the key matching the `$nb-breakpoints` key.  In this case `sm` So screens larger than 720px will get 100% root-font sizing.  Those smaller will receive 90%.\n```sass\n$nb-root-sizing: (\n  default: 90%,\n  sm: 100%\n) !default;\n```\nList Spacing for all kinds of lists such as `inline-list`, `bare-list` `matrix-list`. The keys here are used to generate the BEM modifier classnames\nso you can name then whatever you deem appropriate.  By default you are provided with a single `md` key.\n```sass\n$nb-list-spacing: (\n  md: $nb-spacing-unit\n) !default;\n```\nSpacing for all sections.  The Sass map here operates exactly like `$nb-list-spacing`. above.\n```sass\n$nb-section-spacing: (\n  md: ($nb-spacing-unit * 2)\n) !default;\n```\nThe grid system uses inline-blocks.  To remove the whitespace between grid-items it's required that a font-size of zero is set on the wrapping element, then the child elements are reset using `$nb-base-font-size`.  If you are minifying your HTML or using JSX with a framework like React it is safe to turn this off.\n```sass\n$nb-use-grid-zero-font-size: true !default;\n```\nGutter sizes for the grid system.  By default we have three sizes, you can add or remove these to suit your projects needs.\n```sass\n$nb-grid-gutter-sizes: (\n  sm: ($nb-spacing-unit / 2),\n  md: $nb-spacing-unit,\n  lg: ($nb-spacing-unit * 2)\n) !default;\n```\nOffsets used for the grid based in fractions whereby `1/2` will yield a width of `50%`.  This Sass map is also used for Push/Pull offsets on the grid. Being a Sass map you are free to add or remove whatever offsets are suitable for your project needs.  Note that the keys are quoted due to a fraction being used.  You can also turn off width/push/pull offsets globally saving you from bloat if any of those features are not being used.\n```sass\n$nb-use-width-offsets: true !default;\n$nb-use-push-offsets: true !default;\n$nb-use-pull-offsets: true !default;\n$nb-offset-fractions: (\n  '1/1': 1/1,\n  '1/2': 1/2,\n  '1/3': 1/3,\n  '2/3': 2/3,\n  '1/4': 1/4,\n  '2/4': 2/4,\n  '3/4': 3/4,\n  '1/5': 1/5,\n  '2/5': 2/5,\n  '3/5': 3/5,\n  '4/5': 4/5,\n  '1/6': 1/6,\n  '2/6': 2/6,\n  '3/6': 3/6,\n  '4/6': 4/6,\n  '5/6': 5/6,\n  '1/8': 1/8,\n  '2/8': 2/8,\n  '3/8': 3/8,\n  '4/8': 4/8,\n  '5/8': 5/8,\n  '6/8': 6/8,\n  '7/8': 7/8,\n  '1/10': 1/10,\n  '2/10': 2/10,\n  '3/10': 3/10,\n  '4/10': 4/10,\n  '5/10': 5/10,\n  '6/10': 6/10,\n  '7/10': 7/10,\n  '8/10': 8/10,\n  '9/10': 9/10,\n  '1/12': 1/12,\n  '2/12': 2/12,\n  '3/12': 3/12,\n  '4/12': 4/12,\n  '5/12': 5/12,\n  '6/12': 6/12,\n  '7/12': 7/12,\n  '8/12': 8/12,\n  '9/12': 9/12,\n  '10/12': 10/12,\n  '11/12': 11/12\n) !default;\n```\nUsed for the `Push` utility to add margin to a component.\n```sass\n$nb-push-sizes: (\n  md: $nb-spacing-unit\n) !default;\n```\nUsed for the `Soft` utility to add padding to a component.\n```sass\n$nb-soft-sizes: (\n  md: $nb-spacing-unit\n) !default;\n```\n\n### Overriding settings\nWhen you install this framework it will live in your `node_modules` directory and you won't want to go in there and change anything as any subsequent `npm install`s will potentially overwrite those changes.\nThankfully Nebula CSS settings all have the `!default` flag attached which means they can be overridden:\n```sass\n/*_settings.scss*/\n@import 'nebula-css/settings';\n@import 'settings/my-overrides';\n```\n\n```sass\n/*/settings/_my-overrides.scss*/\n$nb-breakpoints: (\n  sm: 800px,\n  md: 900px,\n  lg: 1000px,\n  xl: 1100px\n);\n```\nThe above code will override the default `$nb-breakpoints` map with your own.\n\n## Breakpoints\nThe breakpoints map shown above (`$nb-breakpoints`) contains all of the breakpoints used in Nebula, you can add remove and edit the breakpoints in the map.  Nebula CSS features such as the lists, section, grid gutters, grid widths, push, flush, hard and soft utilities are all auto generate the CSS based on `$nb-breakpoints`.  The keys used in the map correlate directly to classnames generated.  For example:\n```sass\n$nb-breakpoints: (\n    sm: 400px,\n    md: 800px,\n    myKey: 1000px\n);\n```\nand assuming we had the following declared:\n```sass\n$nb-list-spacing: (\n  md: $nb-spacing-unit\n  ) !default;\n  ```\nWill generate the following CSS classnames in our Bare list (Amongst the other objects)\n```Sass\n.o-bare-list {}\n.o-bare-list--spaced-md {}\n.o-bare-list--spaced-md\\@sm {}\n.o-bare-list--spaced-md\\@md {}\n.o-bare-list--spaced-md\\@myKey {}\n```\nIf our List spacing increased to:\n```sass\n$nb-list-spacing: (\n  md: $nb-spacing-unit,\n  lg: ($nb-spacing-unit * 2)\n) !default;\n```\nThe following CSS classnames would be generated:\n```sass\n.o-bare-list {}\n.o-bare-list--spaced-md {}\n.o-bare-list--spaced-md\\@sm {}\n.o-bare-list--spaced-md\\@md {}\n.o-bare-list--spaced-md\\@myKey {}\n.o-bare-list--spaced-lg {}\n.o-bare-list--spaced-lg\\@sm {}\n.o-bare-list--spaced-lg\\@md {}\n.o-bare-list--spaced-lg\\@myKey {}\n```\n\nAs we can see in these examples the `@` symbol denotes that this class applies to a particular breakpoint, the chars after should map directly to a key in `$nb-breakpoints`.\nAlso note that the `@` symbol here is escaped, this is because symbols like `@` are not strictly valid CSS selectors so they must be escaped.  However you don't need to do this when defining your classnames in your HTML.\n\nNebula CSS also provides you with a mixin that can be use to interface with the defined breakpoints: `nb-respond-to()`  This mixin accepts a string argument.  The string should match one of the maps in `nb-breakpoints`.  e.g.\n```sass\n.o-my-obj {\n  @include nb-respond-to('md') {\n    // my CSS\n  }\n}\n```\nBeing mobile first the above CSS will respond to viewports larger than the `md` breakpoint (min-width media query).  It is possible to pass in a prefix as part of the sring to denote a max-width breakpoint:\n```sass\n.o-my-obj {\n  @include nb-respond-to('max-md') {\n    // my CSS\n  }\n}\n```\nThe above CSS responding to viewports smaller than the `md` breakpoint.\n\n`nb-respond-to` also accepts an optional second argument if you wish to create a second breakpoints map that you don't wish the grid, and other utilities to map over - something more component specific.  By default this parameter points to `$nb-breakpoints`.\n\n## Grid\n\n[Demo](https://nebulaui.github.io/nebula/api/objects/grid)\n\nThe grid system employed in Nebula CSS uses fractions rather than columns yielding increased flexibility.  Instead of many other popular grid systems Nebula CSS uses inline-block as opposed to floats; this results in many benefits.\n\n### Features\n* Fluid\n* Infinitely nestable\n* Equal height grid items based on Flexbox (IE10+)\n* Vertical alignment of grid items\n* Vertical gutters\n* Variable gutter sizing\n* horizontal reversal of grid-items\n* No clearfixing required, rows of items with uneven heights tile gracefully.\n* Classnames based on BEMIT fractions and responsive suffixes\n* Does not require a wrapping element like most other grid systems.\n* Extremely lightweight using the Sass maps found in [Default settings and config](#default-settings-and-config) unused bloat can be removed.\n* Width, push and pull classes are not tied directly to the grid, and can be reused anywhere in your project.\n\nBy default the grid comes with the following sets of fractions:\n* One whole\n* Halves\n* Thirds\n* Fourths\n* Fifths\n* Sixths\n* Eighths\n* Tenths\n* Twelfths\n\nAs defined in the `$nb-offset-fractions` map.  You can add or remove fractions on the map to suit your project requirements.  The fractions map directly to the breakpoints.\n\nBy default Nebula CSS provides three gutter width variations from the `nb-grid-gutter-sizes` map, again these can be removed, adjusted or added to.\n\nWith a seemingly endless number of combinations available this makes Nebula CSS's grid one of the most flexible available.\n\n### Examples\nA simple grid with two grid-items one 25% wide the other 75%.  By default the grid comes with no gutters.\n\n```html\n\u003cdiv class=\"o-grid\"\u003e\n  \u003cdiv class=\"o-grid__item u-1/4\"\u003e\n    25% wide\n  \u003c/div\u003e\n  \u003cdiv class=\"o-grid__item u-3/4\"\u003e\n    75% wide\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\nResponsive breakpoints\n```html\n\u003cdiv class=\"o-grid\"\u003e\n  \u003cdiv class=\"o-grid__item u-1/4@sm\"\u003e\n    25% wide at screens larger than the `sm` breakpoint.\n  \u003c/div\u003e\n  \u003cdiv class=\"o-grid__item u-3/4@sm\"\u003e\n    75% wide at screens larger than the `sm` breakpoint.\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\nMedium sized guttering\n```html\n\u003cdiv class=\"o-grid o-grid--gutter-md\"\u003e\n  \u003cdiv class=\"o-grid__item u-1/4\"\u003e\n    25% wide at screens larger than the `sm` breakpoint.\n  \u003c/div\u003e\n  \u003cdiv class=\"o-grid__item u-3/4\"\u003e\n    75% wide at screens larger than the `sm` breakpoint.\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\nVarying guttering depending on the breakpoint\n```html\n\u003cdiv class=\"o-grid o-grid--gutter-sm@md o-grid--gutter-md@lg\"\u003e\n  \u003cdiv class=\"o-grid__item u-1/4\"\u003e\n    25% wide\n  \u003c/div\u003e\n  \u003cdiv class=\"o-grid__item u-3/4\"\u003e\n    75% wide\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\nThere are various BEM modifiers that you can add to the grid as shown below:\n\n* Matrix (Vertical guttering that matches horizontal)\n    ```html\n    \u003cdiv class=\"o-grid o-grid--gutter-sm o-grid--matrix\" /\u003e\n    ```\n* Equal height items\n    ```html\n    \u003cdiv class=\"o-grid o-grid--equal-height\" /\u003e\n    ```\n* Reverse item order\n    ```html\n    \u003cdiv class=\"o-grid o-grid--reverse\" /\u003e\n    ```\n* Vertically centered items\n    ```html\n    \u003cdiv class=\"o-grid o-grid--center\" /\u003e\n    ```\n* Bottom aligned items\n    ```html\n    \u003cdiv class=\"o-grid o-grid--bottom\" /\u003e\n  ```\n* Horizontally centered items\n    ```html\n    \u003cdiv class=\"o-grid u-text-center\" /\u003e\n    ```\n\n## Flag\n\nOne of most underrated CSS abstractions originally thought up by [Harry Roberts](https://twitter.com/csswizardry) is the flag object.  It allows you to mix up fixed width components with fluid ones, is infinitely composable can be nested inside of the grid, or a grid nested inside of the fluid component it's incredibly versatile.  Oh and it also allows you to vertically align the contents to boot.\n\n[Demo](https://nebulaui.github.io/nebula/api/objects/flag)\n\n```html\n\u003cdiv class=\"o-flag\"\u003e\n  \u003cdiv class=\"o-flag__component\"\u003e\n    \u003cimg src=\"my-amazing-dog.jpg\" alt=\"\"\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"o-flag__body\"\u003e\n    Checkout my amazing dog!\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n## Site-wrap\nA simple max-width centred container to wrap your content. You can see it applied throughout the demo page. The `--padding` modifier adds horizontal padding to the container.\n[demo](https://nebulaui.github.io/nebula/api/objects/site-wrap)\n\n```html\n\u003cdiv class=\"o-site-wrap o-site-wrap--padding\"\u003e\n  Main content.\n\u003c/div\u003e\n```\n\n## Section\nAdds padding top \u0026 bottom.  The `md` suffix in this example maps onto a corresponding key on the `$nb-section-spacing` map that denotes the spacing amount.\n[demo](https://nebulaui.github.io/nebula/api/objects/section)\n\nTypically used to space sections and sub-sections of content.\n\n```html\n\u003cdiv class=\"o-section-md\"\u003e\n  Main content.\n\u003c/div\u003e\n```\n\n## Lists\nNebula CSS comes with three types of list: Bare-list, Inline-list and Matrix-list.\n[demo](https://nebulaui.github.io/nebula/api/objects/lists)\n\n### Bare-list\nStrips a list of all default list styling.\n```html\n\u003cul class=\"o-bare-list\"\u003e\n  \u003cli\u003eitem\u003c/li\u003e\n  \u003cli\u003eitem\u003c/li\u003e\n\u003c/ul\u003e\n```\nSpaced\n```html\n\u003cul class=\"o-bare-list o-bare-list--spaced-md\"\u003e\n  \u003cli class=\"o-bare-list__item\"\u003eitem\u003c/li\u003e\n  \u003cli class=\"o-bare-list__item\"\u003eitem\u003c/li\u003e\n\u003c/ul\u003e\n```\n\nSpaced by breakpoint\n```html\n\u003cul class=\"o-bare-list o-bare-list--spaced-md@sm\"\u003e\n  \u003cli class=\"o-bare-list__item\"\u003eitem\u003c/li\u003e\n  \u003cli class=\"o-bare-list__item\"\u003eitem\u003c/li\u003e\n\u003c/ul\u003e\n```\n\n## Inline list\nExactly like the bare list but the items are rendered horizontally.\n```html\n\u003cul class=\"o-inline-list\"\u003e\n  \u003cli\u003eitem\u003c/li\u003e\n  \u003cli\u003eitem\u003c/li\u003e\n\u003c/ul\u003e\n```\n```html\n\u003cul class=\"o-inline-list o-inline-list--spaced-md\"\u003e\n  \u003cli class=\"o-inline-list__item\"\u003eitem\u003c/li\u003e\n  \u003cli class=\"o-inline-list__item\"\u003eitem\u003c/li\u003e\n\u003c/ul\u003e\n```\n\nSpaced by breakpoint\n```html\n\u003cul class=\"o-inline-list o-inline-list--spaced-md@sm\"\u003e\n  \u003cli class=\"o-inline-list__item\"\u003eitem\u003c/li\u003e\n  \u003cli class=\"o-inline-list__item\"\u003eitem\u003c/li\u003e\n\u003c/ul\u003e\n```\n\n## Matrix list\nExactly like the inline list but the items vertical spacing matches the horizontal.\n\nSpaced\n```html\n\u003cul class=\"o-matrix-list o-matrix-list--spaced-md\"\u003e\n  \u003cli class=\"o-matrix-list__item\"\u003eitem\u003c/li\u003e\n  \u003cli class=\"o-matrix-list__item\"\u003eitem\u003c/li\u003e\n\u003c/ul\u003e\n```\n\nSpaced by breakpoint\n```html\n\u003cul class=\"o-matrix-list o-matrix-list--spaced-md@sm\"\u003e\n  \u003cli class=\"o-matrix-list__item\"\u003eitem\u003c/li\u003e\n  \u003cli class=\"o-matrix-list__item\"\u003eitem\u003c/li\u003e\n\u003c/ul\u003e\n```\n\n## Uniformed list\nThrows the list items into a horizontal alignment, each having a uniformed width.\n\n```html\n\u003cul class=\"o-uniformed-list\"\u003e\n  \u003cli class=\"o-uniformed-list__item\"\u003eitem\u003c/li\u003e\n  \u003cli class=\"o-uniformed-list__item\"\u003eitem\u003c/li\u003e\n\u003c/ul\u003e\n```\n\nUniformed by breakpoint.\n```html\n\u003cul class=\"o-uniformed-list@lg\"\u003e\n  \u003cli class=\"o-uniformed-list__item\"\u003eitem\u003c/li\u003e\n  \u003cli class=\"o-uniformed-list__item\"\u003eitem\u003c/li\u003e\n\u003c/ul\u003e\n```\n\n## Utilities\nForm the Utilities Layer in ITCSS, each a single responsibility class.  They are intended to be used as overrides.\n[Demo]((https://nebulaui.github.io/nebula/api/utility-classes))\n\n### Push\nAdds margins.\n\nNebula CSS encourages [single direction margin declarations](http://csswizardry.com/2012/06/single-direction-margin-declarations/) to eliminate confusion around collapsing borders\n\n```html\n\u003cdiv class=\"u-push-left-md\"\u003e\u003c/div\u003e\n\u003cdiv class=\"u-push-bottom-md\"\u003e\u003c/div\u003e\n\u003cdiv class=\"u-push-left-md@sm\"\u003e\u003c/div\u003e\n```\n\n### Flush\nRemoves margins\n```html\n\u003cdiv class=\"u-push-top-md\"\u003e\u003c/div\u003e\n\u003cdiv class=\"u-push-right-md\"\u003e\u003c/div\u003e\n\u003cdiv class=\"u-push-bottom-md\"\u003e\u003c/div\u003e\n\u003cdiv class=\"u-push-left-md\"\u003e\u003c/div\u003e\n\u003cdiv class=\"u-push-left-md@lg\"\u003e\u003c/div\u003e\n```\n\n### Soft\nAdds padding\n\n```html\n\u003cdiv class=\"u-soft-md\"\u003e\u003c/div\u003e\n\u003cdiv class=\"u-soft-top-md\"\u003e\u003c/div\u003e\n\u003cdiv class=\"u-soft-right-md\"\u003e\u003c/div\u003e\n\u003cdiv class=\"u-soft-bottom-md\"\u003e\u003c/div\u003e\n\u003cdiv class=\"u-soft-left-md\"\u003e\u003c/div\u003e\n\u003cdiv class=\"u-soft-left-md@lg\"\u003e\u003c/div\u003e\n```\n\n### Hard\nRemoves padding\n```html\n\u003cdiv class=\"u-hard\"\u003e\u003c/div\u003e\n\u003cdiv class=\"u-hard-top\"\u003e\u003c/div\u003e\n\u003cdiv class=\"u-hard-right\"\u003e\u003c/div\u003e\n\u003cdiv class=\"u-hard-bottom\"\u003e\u003c/div\u003e\n\u003cdiv class=\"u-hard-left\"\u003e\u003c/div\u003e\n\u003cdiv class=\"u-hard-left@lg\"\u003e\u003c/div\u003e\n```\n\n### Text-align\nAdds text-alignment.\n```html\n\u003cdiv class=\"u-text-left\"\u003e\u003c/div\u003e\n\u003cdiv class=\"u-text-center\"\u003e\u003c/div\u003e\n\u003cdiv class=\"u-text-right\"\u003e\u003c/div\u003e\n```\n\n### Hidden\nHides elements, or visually hides (Still accessible.)\n\n```html\n\u003cdiv class=\"u-hidden\"\u003e\u003c/div\u003e\n\u003cdiv class=\"u-visually-hidden\"\u003e\u003c/div\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FNebulaUI%2Fnebula-css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FNebulaUI%2Fnebula-css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FNebulaUI%2Fnebula-css/lists"}