What is InuitCSS?
Extensible, scalable, Sass-based, OOCSS framework for large and long-lasting UI projects.
inuitcss is a framework in its truest sense: it does not provide you with UI and design out of the box, instead, it provides you with a solid architectural baseline upon which to complete your own work.
https://github.com/inuitcss/inuitcss
inuitcss-flexbox is for?
andTo replace o-layout
with flexbox for modern browsers!
Installation
You can use inuitcss in your project by installing it using a package manager (recommended):
npm:
$ npm install inuitcss --save
yarn:
$ yarn add inuitcss
You can download inuitcss and save it into your project’s css/
directory. This
method is not recommended because you lose the ability to easily and quickly
manage and update inuitcss as a dependency.
Getting started
Once you are done setting up your project with inuitcss, you should end up with something like this.
// SETTINGS ;;; // TOOLS ;;;;; // GENERIC ;;;; // ELEMENTS ;;;; // OBJECTS ;;;;;;;;;;;; // UTILITIES ; ;;;;;;
From here you want to look for the following lines in your main scss file.
;;
and replacing them with inuitcss-flexbox's objects.flex
and utilities.widths
;;
and you're good to go!
Core functionality
By default, inuitcss-flexbox inherits the following variables from inuitcss to keep it as similar to inuitcss's vanilla package.
// settings.global.scss ;; ;;;; // utilities.widths.scss ;;;;
Thus, by changing your settings.global configuration, it will directly affect objects.flex
and utilities.widths
off the bat with minimal changes.
Basic Usage
1 2 3
Modifiers
Layouts
Class | Description |
---|---|
o-flex--auto |
Ensures all o-flex__item have the same width and takes up full width of container |
o-flex--grids |
Our grid structure. Used alongside utilities.widths e.g. <div class="o-flex__item u-1/2">1</div> |
o-flex--grids-stretched |
Modifier for o-flex--grids to force height of all o-flex__item to match one another |
Directions
Class | Description |
---|---|
o-flex--reversed |
Reverse direction of o-flex__item starting from right to left |
o-flex--column |
Changing direction of o-flex__item starting from top to bottom |
o-flex--column-reversed |
The reverse of o-flex--column |
Positioning
Class | Description |
---|---|
o-flex--centered |
Center all o-flex__item horizontally and vertically |
o-flex--centered-v |
Center all o-flex__item vertically only |
o-flex--centered-h |
Center all o-flex__item vertically only |
o-flex--lock-left |
Locks o-flex__item to left side |
o-flex--lock-right |
Locks o-flex__item to right side |
o-flex--lock-top |
Locks o-flex__item to top side |
o-flex--lock-bottom |
Locks o-flex__item to bottom side |
o-flex--lock-top-left |
Locks o-flex__item to top left side |
o-flex--lock-top-right |
Locks o-flex__item to top right side |
o-flex--lock-bottom-left |
Locks o-flex__item to bottom left side |
o-flex--lock-bottom-right |
Locks o-flex__item to bottom right side |
Wrapping
Class | Description |
---|---|
o-flex--nowrap |
Sets the following property flex-wrap: nowrap |
o-flex--wrap |
(default) Sets the following property flex-wrap: wrap |
o-flex--wrap-reverse |
Sets the following property flex-wrap: wrap-reverse |
Spacing
Class | Description |
---|---|
o-flex--space-between |
Sets the following property justify-content: space-between |
o-flex--space-around |
Sets the following property justify-content: space-around |
v.0.0.6
onwards!
Mixins Direction
@include inuit-flex-direction();
Position
@include inuit-flex-position();
Wrapping
@include inuit-flex-wrap();
Spacing
@include inuit-flex-spacing();
NOTE: Do not wrap values with singlequotes!
How to use?
.block
Need More Examples?
A page with more examples on how to use inuitcss-flexbox will be released soon. Stay tuned!
Something not right?
Create a Pull Request or submit an issue so I can fix them!