From d353c648bfdc75550591cdebb4d5d755ed9df27a Mon Sep 17 00:00:00 2001 From: Felix S Date: Sun, 27 Sep 2015 18:58:36 +0200 Subject: [PATCH 1/7] Rename $hagrid-child-selector to $hagrid-item-selector --- src/_hagrid.scss | 2 +- src/hagrid/_core.scss | 2 +- src/hagrid/_modifiers.scss | 14 +++++++------- 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/_hagrid.scss b/src/_hagrid.scss index 5d94fb9..88068ee 100644 --- a/src/_hagrid.scss +++ b/src/_hagrid.scss @@ -38,7 +38,7 @@ $hagrid-breakpoints: ( // * By default, the selector used is `> *`. If you use a consistent selector for grid-items, you can set hagrid to use it here ////////////////////////////// -$hagrid-child-selector: "> *"; +$hagrid-item-selector: "> *"; // * Fallback Grid // * Inline-block grid fallback if you need to support IE9 / Android 4.3- diff --git a/src/hagrid/_core.scss b/src/hagrid/_core.scss index e1845bb..6f6e49d 100644 --- a/src/hagrid/_core.scss +++ b/src/hagrid/_core.scss @@ -94,7 +94,7 @@ display: flex; flex-flow: row wrap; - #{$hagrid-child-selector} { + #{$hagrid-item-selector} { flex: 1 1 100%; } diff --git a/src/hagrid/_modifiers.scss b/src/hagrid/_modifiers.scss index a389b48..be3c165 100644 --- a/src/hagrid/_modifiers.scss +++ b/src/hagrid/_modifiers.scss @@ -40,7 +40,7 @@ }; } - #{$hagrid-child-selector} { + #{$hagrid-item-selector} { @if $is-not-spacing == true { padding: { left: $gutter; @@ -62,7 +62,7 @@ @if $hagrid-fallback { text-align: right; - #{$hagrid-child-selector} { + #{$hagrid-item-selector} { text-align: left; } } @@ -72,7 +72,7 @@ @if $hagrid-fallback { text-align: center; - #{$hagrid-child-selector} { + #{$hagrid-item-selector} { text-align: left; } } @@ -85,7 +85,7 @@ align-items: flex-end; @if $hagrid-fallback { - #{$hagrid-child-selector} { + #{$hagrid-item-selector} { vertical-align: bottom; } } @@ -95,7 +95,7 @@ align-items: center; @if $hagrid-fallback { - #{$hagrid-child-selector} { + #{$hagrid-item-selector} { vertical-align: middle; } } @@ -127,7 +127,7 @@ @if $hagrid-fallback { direction: rtl; - #{$hagrid-child-selector} { + #{$hagrid-item-selector} { direction: ltr; text-align: left; } @@ -160,7 +160,7 @@ left: -$gutter; }; - #{$hagrid-child-selector} { + #{$hagrid-item-selector} { padding: { left: $gutter; }; From 93a59509c12f1cfd1b39f644f58a1bb025045796 Mon Sep 17 00:00:00 2001 From: Felix S Date: Sun, 27 Sep 2015 18:59:21 +0200 Subject: [PATCH 2/7] Add support for custom & multiple breakpoints in bp and i --- src/hagrid/_core.scss | 20 ++++++---- src/hagrid/_functions.scss | 81 ++++++++++++++++++++++++++++++++------ 2 files changed, 83 insertions(+), 18 deletions(-) diff --git a/src/hagrid/_core.scss b/src/hagrid/_core.scss index 6f6e49d..5fd5e6b 100644 --- a/src/hagrid/_core.scss +++ b/src/hagrid/_core.scss @@ -106,13 +106,19 @@ // Breakpoints /////////////////////////////// -@mixin bp($breakpoint) { - @if map-has-key($hagrid-breakpoints, $breakpoint) { - @media only screen and #{map-get($hagrid-breakpoints, $breakpoint)} { - @content; +@mixin bp($breakpoints...) { + + @each $breakpoint in $breakpoints { + + $bp: parse-breakpoint($breakpoint); + + @if $bp != false { + @media only screen and #{$bp} { + @content; + } + } + @else { + @warn "You are trying to call @bp with an unknown, unquoted breakpoint: #{$bp}"; } - } - @else { - @error "Breakpoint #{$breakpoint} is not specified in $hagrid-breakpoints." } } diff --git a/src/hagrid/_functions.scss b/src/hagrid/_functions.scss index 02d3949..b271852 100644 --- a/src/hagrid/_functions.scss +++ b/src/hagrid/_functions.scss @@ -51,7 +51,7 @@ $hagrid-placeholders: (); } } -// Argument Parser +// Main Parser ////////////////////////////// @mixin grid-calc($prop, $widths...) { @@ -75,7 +75,7 @@ $hagrid-placeholders: (); @each $width in $widths { // * If a general width is passed in, use it @if type-of($width) == number or $width == auto { - #{$prop}: cw($width); + #{$prop}: calculate-width($width); $width-detected: true; } // * If false is passed, assign no width @@ -95,15 +95,21 @@ $hagrid-placeholders: (); $key: nth($width, 2); } - @if map-has-key($hagrid-breakpoints, $key) { - @include bp($key) { - #{$prop}: cw($value) + // * Cater for specific breakpoints + + $bp: parse-breakpoint($key); + + @if $bp != false { + @include bp(#{$key}) { + #{$prop}: calculate-width($value); } - } @else { - @warn "You are trying to assign a width to an unknown breakpoint: #{$key}" + } + @else { + @warn "You are trying to assign a width to an unknown, unquoted breakpoint: #{$key}" } } } + // * If only responsive params are passed, default to mobile-first @if $width-detected == false and $prop == width { #{$prop}: 100%; @@ -133,6 +139,63 @@ $hagrid-placeholders: (); @return map-get($hagrid-gutters, $id); } +// Breakpoint Validity CHecker +// Validated a breakpoint and returns itstype "ref" or "quoted" or false +////////////////////////////// + +@function parse-breakpoint($key, $get-map: true) { + @if map-has-key($hagrid-breakpoints, $key) { + @if $get-map == false { + @return $key; + } @else { + @return map-get($hagrid-breakpoints, $key); + } + } + @elseif is-mq($key) { + @return $key; + } + @else { + @return false; + } +} + +@function is-mq($string) { + @if str-starts-with($string, unquote("(")) and str-end-with($string, unquote(")")) { + @return true; + } + @else { + @return false; + } +} + +@function str-starts-with($string, $needle) { + @if type-of($string) != "string" { + @warn "`str-starts-with` function expecting a string for $string; #{type-of($string)} given."; + @return false; + } + + @if type-of($needle) != "string" { + @warn "`str-starts-with` function expecting a string for $needle; #{type-of($needle)} given."; + @return false; + } + + @return str-slice($string, 1, str-length($needle)) == $needle; +} + +@function str-ends-with($string, $needle) { + @if type-of($string) != "string" { + @warn "`str-starts-with` function expecting a string for $string; #{type-of($string)} given."; + @return false; + } + + @if type-of($needle) != "string" { + @warn "`str-starts-with` function expecting a string for $needle; #{type-of($needle)} given."; + @return false; + } + + @return str-slice($string, -1 * str-length($needle)) == $needle; +} + // Shorthands ////////////////////////////// @@ -143,7 +206,3 @@ $hagrid-placeholders: (); @mixin i($widths...) { @include item($widths...); } - -@function cw($value) { - @return calculate-width($value); -} From 8f503bc81c2b1b5b5b5de9d8f3352a84c44a0052 Mon Sep 17 00:00:00 2001 From: Felix S Date: Sun, 27 Sep 2015 18:59:42 +0200 Subject: [PATCH 3/7] Add tests for new features --- __test__/src/jade/_tests/breakpoints.jade | 19 +++++++++++++ __test__/src/jade/index.jade | 2 ++ __test__/src/scss/test.scss | 1 + __test__/src/scss/tests/_breakpoints.scss | 34 +++++++++++++++++++++++ 4 files changed, 56 insertions(+) create mode 100644 __test__/src/jade/_tests/breakpoints.jade create mode 100644 __test__/src/scss/tests/_breakpoints.scss diff --git a/__test__/src/jade/_tests/breakpoints.jade b/__test__/src/jade/_tests/breakpoints.jade new file mode 100644 index 0000000..4ccbe7f --- /dev/null +++ b/__test__/src/jade/_tests/breakpoints.jade @@ -0,0 +1,19 @@ +block content + header(role="banner") + h1 Test: Breakpoints + section.breakpoint-container + article.breakpoint-text.visible-md-up + p White on md & up + article.breakpoint-text.visible-sm-md + p White only on sm & md + article.breakpoint-text.visible-custom + p White on screens > 666px + section.breakpoint-grid + article.breakpoint-item + div.block + article.breakpoint-item + div.block + article.breakpoint-item + div.block + article.breakpoint-item + div.block diff --git a/__test__/src/jade/index.jade b/__test__/src/jade/index.jade index 9070e57..e58d3ea 100644 --- a/__test__/src/jade/index.jade +++ b/__test__/src/jade/index.jade @@ -7,3 +7,5 @@ block content include _tests/pushpull include _tests/modifiers + + include _tests/breakpoints diff --git a/__test__/src/scss/test.scss b/__test__/src/scss/test.scss index 9985f63..b82f7f4 100644 --- a/__test__/src/scss/test.scss +++ b/__test__/src/scss/test.scss @@ -8,6 +8,7 @@ $color-border: #3D051A; @import "tests/widths"; @import "tests/pushpull"; @import "tests/modifiers"; +@import "tests/breakpoints"; body { background: $color-primary; diff --git a/__test__/src/scss/tests/_breakpoints.scss b/__test__/src/scss/tests/_breakpoints.scss new file mode 100644 index 0000000..b768d6a --- /dev/null +++ b/__test__/src/scss/tests/_breakpoints.scss @@ -0,0 +1,34 @@ +.breakpoint { + &-grid { + @include g; + } + &-item { + @include i("(min-width: 666px)" 1/2, 1/4 lg); + } + + &-text { + margin-bottom: 1rem; + } + + &-text.visible-md-up { + @include bp(md) { + color: #fff; + } + } + + &-text.visible-sm-md { + @include bp(sm,md) { + color: #fff; + } + @include bp(lg) { + color: $color-secondary; + } + } + + &-text.visible-custom { + @include bp("(min-width: 666px)") { + color: #fff; + } + } + +} From ffc9d14857b308b78254bd27eff07708b9337936 Mon Sep 17 00:00:00 2001 From: Felix S Date: Sun, 27 Sep 2015 18:59:54 +0200 Subject: [PATCH 4/7] Update Readme & Docs --- README.md | 153 +++++++++++++++++++++++++++++++++-------------- src/_hagrid.scss | 11 ++-- 2 files changed, 114 insertions(+), 50 deletions(-) diff --git a/README.md b/README.md index 19f00b2..6bbd6ff 100644 --- a/README.md +++ b/README.md @@ -9,11 +9,11 @@ ## Contents: 1. [Installing](https://github.com/felics/hagrid#install) - 2. [Using the Mixin](https://github.com/felics/hagrid#use) - 3. [Configuration Options](https://github.com/felics/hagrid#options) - 4. [Avaiable Modifiers](https://github.com/felics/hagrid#modifiers) + 2. [Usage](https://github.com/felics/hagrid#use) + 3. [Configuration](https://github.com/felics/hagrid#options) + 4. [Modifiers](https://github.com/felics/hagrid#modifiers) 5. [Browser Support](https://github.com/felics/hagrid#browser-support) - 6. [Prefixes](https://github.com/felics/hagrid#prefixes) + 6. [Prefixing](https://github.com/felics/hagrid#prefixes) 7. [Credit & License](https://github.com/felics/hagrid#credit) ## Install: @@ -22,36 +22,44 @@ bower install hagrid ``` +```scss +@import "hagrid"; +``` + ## Use: ```scss +// * Initialize a basic grid + .parent { - // * Initialize basic grid @include g; // * Initialize a grid with a set of modifiers + // * Modifiers are applied to all items of one grid @include g(full, rev); - // * Alternative syntax + // * Alt. Syntax @include grid(full, rev); } -.child { - // * Initialize a grid-item with a set of responsive widths - // * The general width is set without a breakpoint-keyword (Here: 1/2) +// * Initialize a grid-item with a set of responsive widths + +.item { + + // * The general width is set without a breakpoint-keyword (e.g. md) // * Responsive widths are set in the config-map $hagrid-breakpoints @include i(1/2, 1/3 md, 1/4 lg); - // * If you initialize the item without arguments or a general width, it defaults to 100% (mobile first) + // * If you initialize an item without arguments or a general width, it defaults to 100% (mobile first) @include i; @include i(2/3 md, 3/4 lg); - // * You can use whatever you want as values. - // * Fractions work great for grids and allow infinite columns without doing math. - // * Passing in false will prevent @i from setting any general width (Responsive widths are false by default) + // * You can use whatever you want as values + // * Fractions work great for grids and allow for complex grids without doing math + // * Passing in false will prevent @i from setting any general width // * Recommended @include i(1/2, 1/3 md, 1/4 lg); @@ -59,38 +67,85 @@ bower install hagrid //* Possible @include i(false, lg 50%); - // * Alternative syntax + // * You can use custom breakpoints in Hagrid. Those should be quoted + // * Breakpoints pointing at $hagrid-breakpoints should not be quoted + @include i(2/3 "min-width: 580px", 1/3 lg); + + // * Alt. Syntax @include item(); } ``` -By default, the grid is just a light wrapper around flexbox, so go nuts with flexbox. Note: `display: flex` is only set on the grid, so you may have to re-set it on grid-items and children. +*Note:* `display: flex` is set on each grid-parent, so you have to re-set it on grid-items if you use the fallback-frid and want to use flexbox-properties in grid-items. ## Options: - - `$hagrid-gutters`: Specify gutters between items. They are used like modifiers or applied to all grids (default). (see below) - - `$hagrid-breakpoints`: Set the breakpoints. Can be used with the @bp-mixin too. - - `$hagrid-child-selector`: Gutters and modifiers are applied to all children of each grid-container. By default, the selector `> *` is used. If you use a consistent selector for grid-items, you can set it here. - - `$hagrid-fallback`: If you want to add an `inline-block`-grid for older browsers, set this to true. By default, the whitespace issue is fixed the [pure](http://purecss.io)-way via letter-spacing / font-family. You have to reset item-font with `$hagrid-fallback-font`. If you want to fix the issue via 0-whitespace HTML, set `$hagrid-fallback-fontfix` to false - - `$hagrid-fallback-warnings:` Displays warnings about modifiers / mixins that won't work on the fallback - - `$hagrid-dry-mixins`: By default, mixins apply all properties every time they are called. This makes the output CSS more readable, but also larger. GZIP negates this. If you don't have access to gzip or want to bundle static properties for all selectors at the first mixin-call, set this to true. + +```scss + + +// * Specify gutters between items. They are used like modifiers or applied to all grids +$hagrid-gutters: ( + default: 1.5rem, + full: 0, + narrow: 0.5rem, + wide: 3rem +); + +// * Set common breakpoints used in your project. Can be used in the @bp-mixin (see below) +$hagrid-breakpoints: ( + sm: "(min-width: 35.5em)", + md: "(min-width: 48em)", + lg: "(min-width: 64em)", + xl: "(min-width: 80em)" +); + +// * Gutters and modifiers are applied to all items of each grid-container +// * By default, the selector `> *` is used. If you use a consistent selector for grid-items, you can set it here +$hagrid-item-selector: "> *"; + + +// * If you want to add an `inline-block`-grid for older browsers, set this to true +$hagrid-fallback: false; + +// * By default, the whitespace issue is fixed the pure-way via letter-spacing / font-family +// * If you want to fix the issue via 0-whitespace HTML, set `$hagrid-fallback-fontfix` to false +$hagrid-fallback-fontfix: true; + +// * If you are using the fontfix (recommended), reset your typeface here +$hagrid-fallback-font: sans-serif; + +// * Displays warnings about modifiers / mixins that won't work on the fallback +$hagrid-fallback-warnings: false; + +// * When set to true, hagrid will extend shared properties among grids and grid-items +// * When set to false (default), the output will be better traceable but slightly larger (gzip will eat this up) +$hagrid-dry-mixins: false; +``` ## Modifiers: +```scss + +// * Modifiers are set on grids +@include g(center, middle, full); + +``` + ### x-axis Alignment: - **right:** Align grid-items to the right in partially filled rows. - **center:** Center grid-items in partially filled rows. - - **space-around:** Distribute items by using variable space around them. - - **space-between:** Distribute items by using variable space between them. + - **space-around:** Distribute items in partially filled rows by using variable space around them. + - **space-between:** Distribute items in partially filled rows by using variable space between them. ### y-axis Alignment: - - **bottom**: Align items to the middle of the grid. + - **bottom**: Align items to the bottom of the grid. - **middle**: Vertically center grid items. ### Spacing: -You can provide custom gutters in the grid via the config-variable `$hagrid-gutters`. Use them as you would use a normal modifier. (e.g. `@include g(wide)`) +> You can provide custom gutters to the grid via the config-variable `$hagrid-gutters`. Use them as you would use a normal modifier. (e.g. `@include g(wide)`) ### Direction: @@ -99,8 +154,29 @@ You can provide custom gutters in the grid via the config-variable `$hagrid-gutt ### Mixins: - - **stretch:** Assign stretch mixin to a group of grid-items in a grid to stretch-align their contents. - **bp:** Use breakpoints directly in a class. + - **stretch:** Assign stretch-mixin to a group of grid-items in a grid to stretch-align their contents. + +#### Example (bp): + +```scss + + .item { + // * Single Breakpoint + @include bp(md) { + text-align: left; + } + // * Multiple Breakpoints + @include bp(md, lg) { + text-align: left; + } + // * Specific Breakpoints + @include bp("(min-width: 568px and max-width: 640px)") { + text-align: left; + } + } +``` + #### Example (stretch): @@ -115,34 +191,23 @@ You can provide custom gutters in the grid via the config-variable `$hagrid-gutt } ``` -#### Example (bp): - -```scss - -.item { - @include bp(md) { - text-align: left; - } -} -``` - ## Browser Support: - Chrome - Firefox - - Safari 7+ (Fallback 6+) - - Android 4.4+ (Fallback 2.3+) - - IE 10+ (Fallback 9+ / 8+ with polyfill & -rem) - - Opera 12+ + - Safari **7+** *(Fallback 6+)* + - Android **4.4+** *(Fallback 2.3+)* + - IE **10+** *(Fallback 9+ / 8+ with polyfill & -rem)* + - Opera **12+** ## Prefixes: -Hagrid does not generate prefixes (`-webkit-`,`-ms-`) - as it is designed to be integrated with common SASS workflows in mind (Gulp / Grunt with [Autoprefixer](https://github.com/postcss/autoprefixer)). A sample configuration for Autoprefixer is available in the [test build-file](https://github.com/felics/hagrid/blob/master/gulpfile.js#L22-L23). +Hagrid does not generate prefixes (`-webkit-`,`-ms-`) as it is designed to be integrated with common SASS workflows in mind (Gulp / Grunt with [Autoprefixer](https://github.com/postcss/autoprefixer)). A sample configuration for Autoprefixer is available in the [test build-file](https://github.com/felics/hagrid/blob/master/gulpfile.js#L22-L23). Be careful not to set browsers in a way that generates legacy flexbox syntax! ## Credit: -Beard used in the logo by [ZQ](http://www.designbolts.com/2013/02/24/free-vector-hipster-stock-mustache-beard-rayban-glasses/). + - Started as a fork of [csswizardry-grids](http://github.com/csswizardry/csswizardry-grids) + - Beard used in the logo by [ZQ](http://www.designbolts.com/2013/02/24/free-vector-hipster-stock-mustache-beard-rayban-glasses/). ## License: diff --git a/src/_hagrid.scss b/src/_hagrid.scss index 88068ee..d877a74 100644 --- a/src/_hagrid.scss +++ b/src/_hagrid.scss @@ -32,10 +32,9 @@ $hagrid-breakpoints: ( xl: "(min-width: 80em)" ); - // * Gutter & Modifier Selector -// * Margins and modifiers get applied to the grid by setting them on all children of each grid -// * By default, the selector used is `> *`. If you use a consistent selector for grid-items, you can set hagrid to use it here +// * Gutters and modifiers are applied to all items of each grid-container +// * By default, the selector `> *` is used. If you use a consistent selector for grid-items, you can set hagrid to use it here ////////////////////////////// $hagrid-item-selector: "> *"; @@ -50,11 +49,11 @@ $hagrid-fallback: false; // * Display warnings if you use modifiers that behave different on the fallback $hagrid-fallback-warnings: false; -// * Default: Inline-Block Whitespace Issues are fixed in CSS via letter-spacing. Reset the font below -// * false: You manually remove all whitespace in your html +// * By default, the whitespace issue is fixed the pure-way via letter-spacing / font-family +// * If you want to fix the issue via 0-whitespace HTML, set `$hagrid-fallback-fontfix` to false $hagrid-fallback-fontfix: true; -// * If you are using the fontfix (recommended), reset your -font here +// * If you are using the fontfix (recommended), reset your typeface here $hagrid-fallback-font: sans-serif; From a36d145198ec3561c85e486e17c3cd7ab55aa980 Mon Sep 17 00:00:00 2001 From: Felix S Date: Sun, 27 Sep 2015 19:01:19 +0200 Subject: [PATCH 5/7] :rocket: v.2.0.0 --- bower.json | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/bower.json b/bower.json index 238792a..d65e551 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "hagrid", - "version": "1.2.0", + "version": "2.0.0", "authors": [ "felics " ], diff --git a/package.json b/package.json index c0519d2..4f39b64 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "hagrid", - "version": "1.2.0", + "version": "2.0.0", "license": "MIT", "repository": { "type": "git", From f4663a9e407a862e0baecbb45b6ee2daaa70ef6c Mon Sep 17 00:00:00 2001 From: Felix S Date: Mon, 28 Sep 2015 13:19:20 +0200 Subject: [PATCH 6/7] Add note about auto to docs - Close #31 - Fix some spelling mistake in functions.scss --- README.md | 21 +++++++++++++++++++++ src/hagrid/_functions.scss | 4 ++-- 2 files changed, 23 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 6bbd6ff..257ae42 100644 --- a/README.md +++ b/README.md @@ -191,6 +191,27 @@ $hagrid-dry-mixins: false; } ``` +## Automatic Grid Layouts: + +An automatic grid modifier was included until v1.1.0 but then removed because of its inconsistency with the fallback-grid. It will be re-added when the fallback can be safely dropped. Example of automatic grids with pure flexbox: + +```scss + +.grid { + display: flex; + flex: 1 1 auto; +} + +.grid-item { + flex: 1 1 0%; +} + +.grid-item.example { + flex: 0 0 auto; + width: 50%; +} + +``` ## Browser Support: - Chrome diff --git a/src/hagrid/_functions.scss b/src/hagrid/_functions.scss index b271852..70efd31 100644 --- a/src/hagrid/_functions.scss +++ b/src/hagrid/_functions.scss @@ -139,7 +139,7 @@ $hagrid-placeholders: (); @return map-get($hagrid-gutters, $id); } -// Breakpoint Validity CHecker +// Breakpoint Validity Checker // Validated a breakpoint and returns itstype "ref" or "quoted" or false ////////////////////////////// @@ -160,7 +160,7 @@ $hagrid-placeholders: (); } @function is-mq($string) { - @if str-starts-with($string, unquote("(")) and str-end-with($string, unquote(")")) { + @if str-starts-with($string, unquote("(")) and str-end-with($string, unquote(")")    ) { @return true; } @else { From d1d6b7aeb07c8bafdab8f2bfdb6a85d9bce1e2ce Mon Sep 17 00:00:00 2001 From: Felix S Date: Wed, 30 Sep 2015 20:06:03 +0200 Subject: [PATCH 7/7] Typo in readme --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 257ae42..ec1b2da 100644 --- a/README.md +++ b/README.md @@ -76,7 +76,7 @@ bower install hagrid } ``` -*Note:* `display: flex` is set on each grid-parent, so you have to re-set it on grid-items if you use the fallback-frid and want to use flexbox-properties in grid-items. +*Note:* `display: flex` is set on each grid-parent, so you have to re-set it on grid-items if you use the fallback-grid and want to use flexbox-properties in grid-items. ## Options: