Flexible grid layouts to get you familiar with building within the flexible grid system.(HTML, CSS, SASS, SCSS)
MIT License
git clone https://github.com/kenangundogan/flexible-grid.git
npm install flexiblegrid
bower install flexiblegrid
composer require kenangundogan/flexiblegrid
yarn add flexiblegrid
meteor add kenangundogan:flexiblegrid
gem install flexible-grid
Read the Getting started page for information on the framework contents, templates and examples, and more.
Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations.
flexible-grid/
├── css/
├── flexible-grid.css
├── flexible-grid.css.map
├── flexible-grid.min.css
└── flexible-grid.min.css.map
flexible-grid/
├── scss/
├── flexible-grid.scss
├── _variables.scss
├── _definitions.scss
├── _array-list.scss
├── _wrapper.scss
├── _grid.scss
├── _attribute.scss
└── _normalize.scss
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.
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 |
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 |
Designed and built by @kenangundogan 2017 Currently - Code licensed MIT License