Skip to content
A responsive grid system based on flexbox-grid and the flex property, re-written in Sass, edited and expanded upon.
CSS HTML JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.tmp
app added default to grid vars Apr 12, 2018
dist removed unnecessary import Apr 12, 2018
maps
public
test first commit Jan 5, 2017
.DS_Store
.babelrc
.bowerrc first commit Jan 5, 2017
.csscomb.json first commit Jan 5, 2017
.editorconfig
.eslintrc first commit Jan 5, 2017
.gitattributes
.jsbeautifyrc first commit Jan 5, 2017
.yo-rc.json first commit Jan 5, 2017
LICENSE.md updated LICENSE file to md format Apr 7, 2018
README.md
app.js massive overhaul of routing Aug 6, 2017
bower.json massive overhaul of routing Aug 6, 2017
gulpfile.js
package-lock.json
package.json

README.md

Sass Flexbox Grid

Documentation and examples available at sassflexboxgrid.com

Overview

A responsive grid system based on Flexbox Grid and the flex property, re-written in Sass, edited and expanded upon.

Enhancements include:

  • Visibility classes
  • Additional 'XL' breakpoint
  • Sass variables and mixins
  • Customizable grid

Installation

npm

npm install @drewbot/sass-flexbox-grid --save

Then link to your preferred CSS or Sass File:

CSS

node_modules/@drewbot/sass-flexbox-grid/public/sass-flexbox/main.css

CSS (minified)

node_modules/@drewbot/sass-flexbox-grid/public/sass-flexbox/main.min.css

Or copy the Sass files over to your src directory from the following directory:

node_modules/@drewbot/sass-flexbox-grid/public/sass-flexbox/scss

Direct download

https://github.com/drewbot/sass-flexbox-grid/raw/master/public/sass-flexbox.zip

Mobile First

Use Sass Flexbox Grid's mobile-first media queries provided in the Sass version of the library. All styles should first be declared at small (mobile) then built outward for larger screens.

Version 2.0.3 Release Notes - 04/12/2018

  • Added !default; to adjustable grid vars in .../scss/variables/_grid-variables.scss.

Version 2.0.2 Release Notes - 04/10/2018

  • Added box-sizing: border-box; to all rows and columns by default.

Version 2.0.0 Release Notes - 04/09/2018

  • All columns within a row will automatically scale in height to match the tallest column in the row.
    • eq-height is thereby deprecated.
  • .auto-height class has been refactored to .natural-height.
    • Likewise, the row-auto-height() mixin has been refactored to row-natural-height().
  • The flex-column() mixin has been refactored to row-flex-column().
  • The .show class can now be applied to .row elements.
  • The show() mixin now accepts an optional $row argument and can be used on row elements.
    • Example: @include show("xs", "row") or @include show("xs", "true").

Version 1.0.0 Release Notes - 04/08/2018

  • Added gutters to the top, bottom, left, and right of all columns by default.
  • Gutter size can be adjusted by changing the value of the sass variable $gutter.
  • The .col-gutter-lr class will only apply gutters to the left and right of a column.
  • The .col-no-gutter class will remove gutters from a column.
You can’t perform that action at this time.