Skip to content

Latest commit

 

History

History
134 lines (110 loc) · 3.03 KB

README.md

File metadata and controls

134 lines (110 loc) · 3.03 KB
Raw

Sassy Grid

​ A SMACCS base style guide with Responsive CSS Grid mixins you can add to any project. IE10+ browser support.

Quick start

  • Install globally: npm install -g sassy-grid
  • Run in a new or existing project: sassy-grid
  • Configure /styles with your Sass compiler using main.scss as an entry point.

No matter the application, Sassy Grid will require a Sass compiler to set up. Sassy Grid Starter is also available here ->

Fork and Star ★!

What's included

styles/
├── base/
│   ├── _button.scss
│   ├── _colors.scss
│   ├── _helper.scss
│   ├── _link.scss
│   ├── _reset.scss
│   ├── _typography.scss
│   ├── _weights.scss
│   └── mixins/
│       ├── _grid.scss
│       ├── _responsive.scss
│       └── _utility.scss
├── blocks/
├── layout/
├── state/
└── theme/

Mixins

Responsive

/* Desktop, Tablet, and Mobile views */
@include desktop-down { @content };

/* Desktop and Widescreen views */
@include desktop-up { @content };

/* Tablet and Mobile views */
@include tablet-down { @content };

/* Tablet, Desktop, and Widescreen views */
@include tablet-up { @content };

/* Only views */
@include mobile-only { @content };
@include tablet-only { @content };
@include desktop-only { @content };
@include widescreen-only { @content };
Usage Example
/* Module */
.module {
    @include desktop-up {
        // insert desktop up styles here
    }

    @include tablet-down {
        // insert tablet down styles here
    }
}

Grid

/* Set grid template */
@include grid($grid-template-columns: auto, $grid-template-rows: auto);

/* Define column and row start */
@include grid-start($grid-column-start: 1, $grid-row-start: 1);

/* Align (start, center, end) */
@include align($align-self: start);

/* Justify (start, center, end) */
@include justify($justify-self: start);
Usage Example
/* Module */
.module {
    @include desktop-up {
        @include grid(1fr, 50px 250px 50px);

        .module__header {
            @include grid-start(1, 1);
            @include align(start);
            @include justify(end);
        }

        .module__body {
            @include grid-start(1, 2);
            @include align(center);
            @include justify(center);
        }

        .module__footer {
            @include grid-start(1, 3);
            @include align(end);
            @include justify(end);
        }
    }
}


/* Modifiers */

// Modified class
.module--modified {
    @include mobile-only {
        // insert mobile only styles here
    }
}

Browser support

Explore

A New View of the Moon