Socket
Socket
Sign inDemoInstall

responsive-grid

Package Overview
Dependencies
0
Maintainers
1
Versions
8
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

responsive-grid

Responsive grid system, built in Stylus


Version published
Weekly downloads
110
decreased by-6.78%
Maintainers
1
Created
Weekly downloads
 

Readme

Source

Responsive Grid Build Status

A Stylus Plugin that provides a simple grid system. It's fully responsive, with modifiers available that provide full browser support.

Installation

NPM

Responsive Grid is on NPM.

npm install -g responsive-grid stylus

Executable

Below is an example of how to utilise responsive-grid and stylus.

stylus -w -u responsive-grid stylus/index.styl -o css/

For more information on the many ways you can use Stylus plugins, please refer to this guide.

Stylus API

To gain access the responsive-grid mixins, simply add:

@import 'responsive-grid'

Usage

Responsive Grid provides 5 mixins for use. These mixins can be used straight away without any modification to the settings.

Full working examples of all the mixins below can be found in this codepen.

grid-base()

This will set up the block .grid class and the element .grid__item class.


grid-widths($namespace, $columns)

This will set up width classes based on the $columns you include.

Examples
  • grid-widths('', 1 3 6) will set up a whole class, thirds classes, and sixths classes.
  • grid-widths('desk', 1 2 3) will set up a .{$namespace} class each of the width classes.

grid-pull($namespace, $columns)

This will set up pull classes based on the $columns you include.

Examples
  • grid-pull('', 1 3 6) will set up .pull-{width} classes that move the .grid__item with a whole class, thirds classes, and sixths classes.
  • grid-pull('desk', 1 2 3) will set up a .{$namespace}pull-{width} class each of the pull classes.

grid-push($namespace, $columns)

This will set up push classes based on the $columns you include.

Examples
  • grid-push('', 1 3 6) will set up .push-{width} classes that move the .grid__item with a whole class, thirds classes, and sixths classes.
  • grid-push('desk', 1 2 3) will set up a .{$namespace}push-{width} class each of the push classes.

grid-gutter-modifier($namespace, $gutter)

This will set up the gutter modifier .grid--{$namespace} class and .grid__item child selector which modify the gutter width. Providing a $namespace is optional which allows the mixin to be used to change the base grid gutter at different breakpoints.

Examples
  • grid-gutter-modifier('', 10px) will set up a .grid class that will provide a 10px gutter between each .grid__item.
  • grid-gutter-modifier('em', 1em) will set up a .grid--{$namespace} class that will provide a 1em gutter between each .grid__item.
  • grid-gutter-modifier('percent', 10%) will set up a .grid--{$namespace} class that will provide a 10% gutter between each .grid__item.
  • grid-gutter-modifier('pixel', 20px) will set up a .grid--{$namespace} class that will provide a 20px gutter between each .grid__item.

grid-reverse($namespace)

This will set up modifier .grid--reverse class that, when applied, will visual reverse the DOM order of the .grid__item's. Providing a $namespace is optional.


Settings

Below lists the settings available to the grid system (bold denotes a required variable):

Variable nameTypeDefaultDescription
$grid--html-compressedbooleantrueIf HTML is compressed, the whitespace hack used will be redundant.
$grid--gutterunit20pxCan be any the following unit types: em, %, px
$grid--count-namesarrayone two three four five six seven eight nine ten eleven twelve thirteen fourteen fifteen sixteenForms the first half of the class name of the grid widths
$grid--fraction-namesarraywhole half third quarter fifth sixth seventh eighth ninth tenth eleventh twelfth thirteenth fourteenth fifteenth sixteenthForms the second half of the class name of the grid widths
$grid--width-expressionbooleanfalseChanges the width in the grid widths to use expressions. Set to true for IE7 and below.

Licence

Licensed under the New BSD License

FAQs

Package last updated on 01 Feb 2016

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc