Skip to content

/ flexible-grid

Flexible grid layouts to get you familiar with building within the flexible grid system.(HTML, CSS, SASS, SCSS)
css scss sass flex flexible flexible-grid css-framework html grid flexbox flexbox-grid
CSS HTML Ruby
  1. CSS 55.9%
  2. HTML 43.6%
  3. Ruby 0.5%
Branch: master
Find file
Clone or download

Clone with HTTPS

Use Git or checkout with SVN using the web URL.

Open in Desktop Download ZIP

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist class types defined for aspect ratio Dec 3, 2017
example new examples added Dec 3, 2017
src class types defined for aspect ratio Dec 3, 2017
test Update travis.rb Sep 15, 2017
.gitignore Create .gitignore Sep 19, 2017
.travis.yml Update .travis.yml Sep 15, 2017
LICENSE license add Sep 15, 2017
README.md Update README.md Oct 29, 2017
bower.json Update bower.json Oct 17, 2017
composer.json Update composer.json Oct 15, 2017
flexible-grid.gemspec Added gamespec for ruby ​​package Sep 19, 2017
package.json package.json added homepage, author email & url Sep 19, 2017

README.md


For users who can embrace the newest of technology, Flexiblegrid comes with an flex based grid. It’s the same grid you know and love, but with even better source ordering and alignment options.
FlexibleGrid docs · FlexibleGrid inst · FlexibleGrid example · FlexibleGrid sample

npm

Flexible Grid Components

  1. Wrapper
  2. Direction
  3. Wrap
  4. Justify Content
  5. Align Items
  6. Align Self
  7. Align Content
  8. Auto Margin
  9. Order

Quick start

Build Status npm version Bower version PHP version Meteor Atmosphere Gem Version CSS gzip size

  • 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

Browser support

  • Google Chrome
  • Opera
  • Firefox
  • Safari 6.2+
  • Internet Explorer 10+
  • iOS 7+
  • Android 4.4+
  • Windows Phone 8.1+

Copyright and license

Designed and built by @kenangundogan
2017 Currently - Code licensed MIT License

You can’t perform that action at this time.