JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 420
  • Score
    100M100P100Q111211F
  • License MIT

A responsive sass grid library built with flexbox

Package Exports

  • @drewbot/sass-flexbox-grid

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@drewbot/sass-flexbox-grid) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Sass Flexbox Grid

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

Dependencies

The Sass Version simply requires The Sass library to be installed.

Plain CSS and minified CSS versions can be used with no other dependencies.

Mobile First

Use Sass Flexbox Grid's mobile-first media queries and grid classes. All styles should first be declared at small (mobile) then built outward for larger screens using min-width media queries.

Version 2 Release Notes

  • 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().
  • .hide and .show classes 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").