├── LICENSE ├── README.md ├── _include-media-columns.scss ├── bower.json └── package.json /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Eduardo Bouças 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | !['At' sign](http://include-media.com/assets/images/logo.png) 2 | 3 | # include-media — Columns plugin 4 | 5 | > Get **include-media** [here](https://github.com/eduardoboucas/include-media). 6 | 7 | ### Introduction 8 | 9 | This plugin generates classes for a grid system using [Harry Roberts' BEMIT naming convention](http://csswizardry.com/2015/08/bemit-taking-the-bem-naming-convention-a-step-further/), based on a number of subdivisions specified by the user, and taking into account all the breakpoints defined by **include-media**. 10 | 11 | *Example:* 12 | 13 | ```scss 14 | @import 'include-media'; 15 | @import 'include-media-columns'; 16 | 17 | $breakpoints: ( 18 | 'medium': 768px, 19 | 'large': 1024px 20 | ); 21 | 22 | // Dividing the layout in halves and thirds 23 | @include im-columns(2, 3); 24 | ``` 25 | 26 | *Generates:* 27 | 28 | ```css 29 | @media (min-width: 768px) { 30 | .col--1-2\@medium { 31 | width: 50%; 32 | } 33 | .col--2-2\@medium { 34 | width: 100%; 35 | } 36 | .col--1-3\@medium { 37 | width: 33.33333%; 38 | } 39 | .col--2-3\@medium { 40 | width: 66.66667%; 41 | } 42 | .col--3-3\@medium { 43 | width: 100%; 44 | } 45 | } 46 | 47 | @media (min-width: 1024px) { 48 | .col--1-2\@large { 49 | width: 50%; 50 | } 51 | .col--2-2\@large { 52 | width: 100%; 53 | } 54 | .col--1-3\@large { 55 | width: 33.33333%; 56 | } 57 | .col--2-3\@large { 58 | width: 66.66667%; 59 | } 60 | .col--3-3\@large { 61 | width: 100%; 62 | } 63 | } 64 | 65 | .col--1-2 { 66 | width: 50%; 67 | } 68 | 69 | .col--2-2 { 70 | width: 100%; 71 | } 72 | 73 | .col--1-3 { 74 | width: 33.33333%; 75 | } 76 | 77 | .col--2-3 { 78 | width: 66.66667%; 79 | } 80 | 81 | .col--3-3 { 82 | width: 100%; 83 | } 84 | ``` 85 | 86 | ### Installation 87 | 88 | - **Manually:** Download [this file](https://raw.githubusercontent.com/eduardoboucas/include-media-columns/master/_include-media-columns.scss) and import it into your Sass project 89 | - **Bower:** Run `bower install include-media-columns` 90 | 91 | 92 | ### Usage examples 93 | 94 | 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: 95 | 96 | ```scss 97 | @include im-columns(1, 2, 4); 98 | 99 | .col { 100 | float: left; 101 | } 102 | ``` 103 | 104 | ```html 105 |
106 | ``` 107 | -------------------------------------------------------------------------------- /_include-media-columns.scss: -------------------------------------------------------------------------------- 1 | /// 2 | /// Generates column classes based on the defined breakpoints, 3 | /// named with the convention `.col--x-y@breakpoint`, where 4 | /// `x` is a subdivision of `y`. 5 | /// 6 | /// @link http://csswizardry.com/2015/08/bemit-taking-the-bem-naming-convention-a-step-further/ Taking the BEM naming convention a step further 7 | /// 8 | /// @param {Arglist} $columns - Grid divisions 9 | /// 10 | /// @example scss - Dividing the grid in thirds and fourths 11 | /// @include im-columns(3, 4); 12 | /// 13 | /// /* Generates: */ 14 | /// .col-1-3@phone, .col-1-3@tablet, .col-1-3@deskop 15 | /// .col-2-3@phone (...) 16 | /// 17 | 18 | $im-columns-class: '.col' !default; 19 | 20 | @mixin im-columns($columns...) { 21 | @each $i in $columns { 22 | @for $n from 1 through $i { 23 | #{$im-columns-class}--#{$n}-#{$i} { 24 | width: ($n / $i) * 100%; 25 | } 26 | } 27 | } 28 | 29 | @each $breakpoint in $breakpoints { 30 | $breakpoint-name: nth($breakpoint, 1); 31 | 32 | @include media(#{'>=' + $breakpoint-name}) { 33 | @each $i in $columns { 34 | @for $n from 1 through $i { 35 | #{$im-columns-class}--#{$n}-#{$i}\@#{$breakpoint-name} { 36 | width: ($n / $i) * 100%; 37 | } 38 | } 39 | } 40 | } 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "include-media-columns", 3 | "version": "1.2.0", 4 | "homepage": "https://github.com/eduardoboucas/include-media-columns", 5 | "authors": [ 6 | "Eduardo Boucas " 7 | ], 8 | "description": "An include-media plugin for generating grid classes based on the BEMIT naming convention", 9 | "main": "_include-media-columns.scss", 10 | "keywords": [ 11 | "breakpoint", 12 | "breakpoints", 13 | "media", 14 | "queries", 15 | "media-queries", 16 | "media-query", 17 | "mediaquery", 18 | "sass", 19 | "scss", 20 | "rwd", 21 | "responsive", 22 | "css" 23 | ], 24 | "dependencies": { 25 | "include-media": "^1.0.0" 26 | }, 27 | "license": "MIT", 28 | "ignore": [ 29 | "**/.*", 30 | "node_modules", 31 | "bower_components", 32 | "test", 33 | "tests" 34 | ] 35 | } 36 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "include-media-columns", 3 | "name": "include-media-columns", 4 | "version": "1.2.0", 5 | "description": "An include-media plugin for generating grid classes based on the BEMIT naming convention", 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/eduardoboucas/include-media-columns.git" 9 | }, 10 | "main": "_include-media-columns.scss", 11 | "author": { 12 | "name": "Eduardo Boucas", 13 | "email": "mail@eduardoboucas.com" 14 | }, 15 | "bugs": { 16 | "url": "https://github.com/eduardoboucas/include-media-columns/issues" 17 | }, 18 | "homepage": "https://github.com/eduardoboucas/include-media-columns", 19 | "license": "MIT", 20 | "devDependencies": {} 21 | } 22 | --------------------------------------------------------------------------------