GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → kenangundogan → Flexible Grid

kenangundogan / Flexible Grid

Licence: mit
Flexible grid layouts to get you familiar with building within the flexible grid system.(HTML, CSS, SASS, SCSS)

Labels

htmlcssscsssassgridcss-frameworkflexboxflexflexibleflexbox-grid

Projects that are alternatives of or similar to Flexible Grid

Katana
Katana is CSS Layout System made with Flexbox
Stars: ✭ 57 (-62.99%)
Mutual labels:  flex, grid, flexbox, css-framework, flexbox-grid
Waffle Grid
An easy to use flexbox grid system.
Stars: ✭ 602 (+290.91%)
Mutual labels:  flex, flexbox-grid, scss, sass, flexbox
Kindling
A pocket-sized grid system built on the flex display property.
Stars: ✭ 155 (+0.65%)
Mutual labels:  flexbox-grid, scss, sass, flexbox
Basis
A lightweight responsive Sass/CSS framework based on flexible box.
Stars: ✭ 133 (-13.64%)
Mutual labels:  css-framework, scss, sass, flexbox
Lemon
🍋 Minimal and responsive CSS framework for fast building websites.
Stars: ✭ 51 (-66.88%)
Mutual labels:  css-framework, grid, sass, flexbox
Bulma Helpers
Library with missing Functional / Atomic CSS classes for Bulma framework
Stars: ✭ 263 (+70.78%)
Mutual labels:  css-framework, scss, sass, flexbox
Cirrus
☁️ The CSS framework for the modern web.
Stars: ✭ 716 (+364.94%)
Mutual labels:  css-framework, scss, sass, flexbox
Gridlex
Just a CSS Flexbox Grid System
Stars: ✭ 1,328 (+762.34%)
Mutual labels:  grid, flexbox-grid, scss, sass
Infinity Css Grid
Fluid Flex Solution for making infinite grid columns.
Stars: ✭ 112 (-27.27%)
Mutual labels:  css-framework, flex, flexbox-grid, flexbox
Atgrid.css
CSS Grid System with attribute selectors
Stars: ✭ 37 (-75.97%)
Mutual labels:  grid, flexbox-grid, flexbox
The Flex Grid
The Flex Grid is a responsive CSS flexbox grid. Because we can!
Stars: ✭ 45 (-70.78%)
Mutual labels:  css-framework, flexbox-grid, flexbox
Frow
Flexbox Toolkit & Grid
Stars: ✭ 152 (-1.3%)
Mutual labels:  css-framework, flexbox-grid, flexbox
Bojler
Bojler is an email framework
Stars: ✭ 885 (+474.68%)
Mutual labels:  css-framework, grid, scss
Hive Framework
A website development framework built with Sass, and incorporating jQuery UI.
Stars: ✭ 14 (-90.91%)
Mutual labels:  css-framework, scss, sass
Primitive
⛏️ ‎ A front-end design toolkit for developing web apps.
Stars: ✭ 783 (+408.44%)
Mutual labels:  css-framework, scss, sass
Siimple
The minimal CSS toolkit for flat and clean designs
Stars: ✭ 502 (+225.97%)
Mutual labels:  css-framework, scss, sass
Avalanche
A package based CSS framework.
Stars: ✭ 86 (-44.16%)
Mutual labels:  css-framework, scss, sass
Griddd
A dead simple, customisable, flexbox-based griddd
Stars: ✭ 108 (-29.87%)
Mutual labels:  grid, scss, flexbox
Fictoan
Mockups with markup — https://sujan-s.github.io/fictoan/
Stars: ✭ 114 (-25.97%)
Mutual labels:  css-framework, scss, sass
Flexy
Flexy is minimal CSS framework made with Flex
Stars: ✭ 114 (-25.97%)
Mutual labels:  flex, flexbox-grid, flexbox
View All Similar Projects ➔


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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].