Skip to content

An include-media plugin for generating grid classes based on the BEMIT naming convention

License

Notifications You must be signed in to change notification settings

eduardoboucas/include-media-columns

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

23 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

'At' sign

include-media — Columns plugin

Get include-media here.

Introduction

This plugin generates classes for a grid system using Harry Roberts' BEMIT naming convention, based on a number of subdivisions specified by the user, and taking into account all the breakpoints defined by include-media.

Example:

@import 'include-media';
@import 'include-media-columns';

$breakpoints: (
    'medium': 768px,
    'large': 1024px
);

// Dividing the layout in halves and thirds
@include im-columns(2, 3);

Generates:

@media (min-width: 768px) {
  .col--1-2\@medium {
    width: 50%;
  }
  .col--2-2\@medium {
    width: 100%;
  }
  .col--1-3\@medium {
    width: 33.33333%;
  }
  .col--2-3\@medium {
    width: 66.66667%;
  }
  .col--3-3\@medium {
    width: 100%;
  }
}

@media (min-width: 1024px) {
  .col--1-2\@large {
    width: 50%;
  }
  .col--2-2\@large {
    width: 100%;
  }
  .col--1-3\@large {
    width: 33.33333%;
  }
  .col--2-3\@large {
    width: 66.66667%;
  }
  .col--3-3\@large {
    width: 100%;
  }
}

.col--1-2 {
  width: 50%;
}

.col--2-2 {
  width: 100%;
}

.col--1-3 {
  width: 33.33333%;
}

.col--2-3 {
  width: 66.66667%;
}

.col--3-3 {
  width: 100%;
}

Installation

  • Manually: Download this file and import it into your Sass project
  • Bower: Run bower install include-media-columns

Usage examples

To create a grid where four elements in a row are displayed on the large view, two elements on the medium view and just one element on the small view, one can simply define the items as follows:

@include im-columns(1, 2, 4);

.col {
    float: left;
}
<article class="col col--1-4@large col--1-2@medium col--1-1@small"></article>

About

An include-media plugin for generating grid classes based on the BEMIT naming convention

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages