Flexible-grid NPM

Flexible Grid Components

Quick start

Download the latest release.
Clone the repo: git clone https://github.com/kenangundogan/flexible-grid.git
Install with npm: npm install flexiblegrid
Install with bower: bower install flexiblegrid
Install with composer: composer require kenangundogan/flexiblegrid
Install with yarn: yarn add flexiblegrid
Install with meteor: meteor add kenangundogan:flexiblegrid
Install with rubygems: gem install flexible-grid

Read the Getting started page for information on the framework contents, templates and examples, and more.

What's included

Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations.

Outuput File

flexible-grid/
├── css/
    ├── flexible-grid.css
    ├── flexible-grid.css.map
    ├── flexible-grid.min.css
    └── flexible-grid.min.css.map

Source File

flexible-grid/
├── scss/
    ├── flexible-grid.scss
    ├── _variables.scss
    ├── _definitions.scss
    ├── _array-list.scss
    ├── _wrapper.scss
    ├── _grid.scss
    ├── _attribute.scss
    └── _normalize.scss

Versioning

Flexible Grid will be maintained under the Semantic Versioning guidelines as much as possible. Releases will be numbered with the following format:

<major>.<minor>.<patch>

For more information on SemVer, please visit http://semver.org.

Flexible Grid, Item Screen Size (-xs -sm -md -lg -xl)

Media Screen Size	< 424px	< 768px	< 1024px	< 1279px	< 1366px
column	.xs-1	.sm-1	.md-1	.lg-1	.xl-1
column	.xs-2	.sm-2	.md-2	.lg-2	.xl-2
column	.xs-3	.sm-3	.md-3	.lg-3	.xl-3
column	.xs-4	.sm-4	.md-4	.lg-4	.xl-4
column	.xs-5	.sm-5	.md-5	.lg-5	.xl-5
column	.xs-6	.sm-6	.md-6	.lg-6	.xl-6
column	.xs-7	.sm-7	.md-7	.lg-7	.xl-7
column	.xs-8	.sm-8	.md-8	.lg-8	.xl-8
column	.xs-9	.sm-9	.md-9	.lg-9	.xl-9
column	.xs-10	.sm-10	.md-10	.lg-10	.xl-10
column	.xs-11	.sm-11	.md-11	.lg-11	.xl-11
column	.xs-12	.sm-12	.md-12	.lg-12	.xl-12

Flexible Grid, Attribute Screen Size (-xs -sm -md -lg -xl)

Media Screen Size	< 424px	< 768px	< 1024px	< 1279px	< 1366px
.display-flex	-xs	-sm	-md	-lg	-xl
.display-inline-flex	-xs	-sm	-md	-lg	-xl
.flex-d-row	-xs	-sm	-md	-lg	-xl
.flex-d-rowreverse	-xs	-sm	-md	-lg	-xl
.flex-d-column	-xs	-sm	-md	-lg	-xl
.flex-d-column-reverse	-xs	-sm	-md	-lg	-xl
.flex-wrap	-xs	-sm	-md	-lg	-xl
.flex-wrap-reverse	-xs	-sm	-md	-lg	-xl
.flex-nowrap	-xs	-sm	-md	-lg	-xl
.justify-content-start	-xs	-sm	-md	-lg	-xl
.justify-content-end	-xs	-sm	-md	-lg	-xl
.justify-content-center	-xs	-sm	-md	-lg	-xl
.justify-content-baseline	-xs	-sm	-md	-lg	-xl
.justify-content-arround	-xs	-sm	-md	-lg	-xl
.justify-content-between	-xs	-sm	-md	-lg	-xl
.align-items-start	-xs	-sm	-md	-lg	-xl
.align-items-end	-xs	-sm	-md	-lg	-xl
.align-items-center	-xs	-sm	-md	-lg	-xl
.align-items-baseline	-xs	-sm	-md	-lg	-xl
.align-items-stretch	-xs	-sm	-md	-lg	-xl
.align-selft-start	-xs	-sm	-md	-lg	-xl
.align-selft-end	-xs	-sm	-md	-lg	-xl
.align-selft-center	-xs	-sm	-md	-lg	-xl
.align-selft-baseline	-xs	-sm	-md	-lg	-xl
.align-selft-stretch	-xs	-sm	-md	-lg	-xl
.align-content-start	-xs	-sm	-md	-lg	-xl
.align-content-end	-xs	-sm	-md	-lg	-xl
.align-content-center	-xs	-sm	-md	-lg	-xl
.align-content-between	-xs	-sm	-md	-lg	-xl
.align-content-around	-xs	-sm	-md	-lg	-xl
.flex-order-first	-xs	-sm	-md	-lg	-xl
.flex-order-last	-xs	-sm	-md	-lg	-xl
.flex-order-unordered	-xs	-sm	-md	-lg	-xl
.flex-ml-auto	-xs	-sm	-md	-lg	-xl
.flex-mr-auto	-xs	-sm	-md	-lg	-xl
.flex-mt-auto	-xs	-sm	-md	-lg	-xl
.flex-mb-auto	-xs	-sm	-md	-lg	-xl