Inuitcss-flexbox NPM

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

and inuitcss-flexbox is for?

To 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
@import 'settings/settings.config';
@import 'settings/settings.core';
@import 'settings/settings.global';

// TOOLS
@import 'tools/tools.rem';
@import 'tools/tools.font-size';
@import 'tools/tools.clearfix';
@import 'tools/tools.hidden';
@import 'sass-mq/mq';

// GENERIC
@import 'generic/generic.box-sizing';
@import 'generic/generic.normalize';
@import 'generic/generic.reset';
@import 'generic/generic.shared';

// ELEMENTS
@import 'elements/elements.page';
@import 'elements/elements.headings';
@import 'elements/elements.images';
@import 'elements/elements.tables';

// OBJECTS
@import 'objects/objects.wrapper';
@import 'objects/objects.layout';
@import 'objects/objects.media';
@import 'objects/objects.flag';
@import 'objects/objects.list-bare';
@import 'objects/objects.list-inline';
@import 'objects/objects.box';
@import 'objects/objects.block';
@import 'objects/objects.ratio';
@import 'objects/objects.crop';
@import 'objects/objects.tables';
@import 'objects/objects.pack';

// UTILITIES
$inuit-offsets: true;

@import 'utilities/utilities.clearfix';
@import 'utilities/utilities.widths';
@import 'utilities/utilities.headings';
@import 'utilities/utilities.spacing';
@import 'utilities/utilities.print';
@import 'utilities/utilities.hide';

From here you want to look for the following lines in your main scss file.

@import 'objects/objects.layout';
@import 'utilities/utilities.widths';

and replacing them with inuitcss-flexbox's objects.flex and utilities.widths

@import 'objects/objects.flex';
@import 'utilities/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
$inuit-global-line-height:  24px !default;
$inuit-global-spacing-unit: round($inuit-global-line-height) !default;

$inuit-global-spacing-unit-factor-tiny:   0.25 !default;
$inuit-global-spacing-unit-factor-small:  0.5  !default;
$inuit-global-spacing-unit-factor-large:  2    !default;
$inuit-global-spacing-unit-factor-huge:   4    !default;

// utilities.widths.scss
$inuit-fractions: 1 2 3 4 5 !default;
$inuit-offsets: false !default;
$inuit-widths-delimiter: \/ !default;
$inuit-widths-breakpoint-separator: \@ !default;

Thus, by changing your settings.global configuration, it will directly affect objects.flex and utilities.widths off the bat with minimal changes.

Basic Usage

<div class="o-wrapper">
  <div class="o-flex">
    <div class="o-flex__item">1</div>
    <div class="o-flex__item">2</div>
    <div class="o-flex__item">3</div>
  </div>
</div>

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`

Mixins `v.0.0.6` onwards!

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 {
  @include inuit-flex-direction(row);
  @include inuit-flex-position(lock-bottom);
  @include inuit-flex-spacing(space-between);

  // @include mq() is from 'sass-mq'. A package dependency in inuitcss by default
  @include mq($from: tablet) {
    @include inuit-flex-direction(row-reverse);
    @include inuit-flex-position(lock-top-right);
    @include inuit-flex-wrap(nowrap);
  }
}