Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Breakpoint() #9

Merged
merged 4 commits into from

2 participants

@kaishin
Admin

The foundation of a responsive grid in the form of a single mixin coupling breakpoints and total grid columns.

@kylefiedler
Admin

Looks great

@kylefiedler kylefiedler merged commit 8b17f88 into from
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
This page is out of date. Refresh to see the latest.
Showing with 173 additions and 13 deletions.
  1. +136 −12 README.md
  2. +36 −0 grid/_grid.scss
  3. +1 −1  settings/_grid.scss
View
148 README.md
@@ -66,18 +66,18 @@ To use a table-cell layout, add ```table``` as the ```display``` argument:
@include span-columns(6 of 8, table)
- Likewise for inline-block:
+Likewise for inline-block:
@include span-columns(6 of 8, inline-block)
- The following syntaxes would also work:
-
+The following syntaxes would also work:
+
@include span-columns(6 / 8,inline-block);
@include span-columns(6 8,inline-block);
### Rows
- In order to clear floated or table-cell columns, use the ```row``` mixin:
+In order to clear floated or table-cell columns, use the ```row``` mixin:
@include row($display);
@@ -87,30 +87,30 @@ To use a table-cell layout, add ```table``` as the ```display``` argument:
### Shifting columns
- To move an element to the left or right by a number of columns, use the ```shift``` mixin:
+To move an element to the left or right by a number of columns, use the ```shift``` mixin:
@include shift(2); // Move 2 columns to the right
@include shift(-3); // Move 3 columns to the left
- Please note that the ```shift()``` mixin is incompatible with display ```table```.
+Please note that the ```shift()``` mixin is incompatible with display ```table```.
### Padding columns
- To add padding around the entire column use ```pad()```. By default it adds the same value as the grid's gutter but can take any unit value.
+To add padding around the entire column use ```pad()```. By default it adds the same value as the grid's gutter but can take any unit value.
@include pad; // Adds a padding equivalent to the grid's gutter
@extend pad(20px); // Adds a padding of 20px
- The ```pad()``` mixin works particularly well with ```span-columns(x, y, table)``` by adding the necessary padding without breaking your table-based grid layout.
+The ```pad()``` mixin works particularly well with ```span-columns(x, y, table)``` by adding the necessary padding without breaking your table-based grid layout.
### Removing gutter
- Neat automatically removes the last columns's gutter. However, if you are queueing more than one row of columns within the same parent element, you need to specify which columns are considered last in their row to preserve the layout. Use the ```omega``` mixin to achieve this:
+Neat automatically removes the last columns's gutter. However, if you are queueing more than one row of columns within the same parent element, you need to specify which columns are considered last in their row to preserve the layout. Use the ```omega``` mixin to achieve this:
@include omega; // Removes right gutter
- You can also use ```nth-omega``` to remove the gutter of a specific column or set of columns:
+You can also use ```nth-omega``` to remove the gutter of a specific column or set of columns:
@include nth-omega(nth-child);
@@ -122,14 +122,138 @@ To use a table-cell layout, add ```table``` as the ```display``` argument:
### Filling parent elements
- This makes sure that the child fills 100% of its parent:
+This makes sure that the child fills 100% of its parent:
@include fill-parent;
+### Breakpoints
+
+The ```breakpoint()``` mixin allows you to use media-queries to modify both the grid and the layout. It takes two arguments:
+
+ @include breakpoint($query:$feature $value, $total-columns: $grid-columns)
+
+* ```query``` contains the media feature (min-width, max-width, etc.) and the value (481px, 30em, etc.). If you specify the value only, ```min-width``` will be used by default (ideal if you follow a mobile-first approach). You can also change the default feature in the settings (see section below).
+* ```total-columns``` (optional) is the total number of columns to be used inside this media query. Changing the total number of columns will change the width, padding and margin percentages obtained using the ```span-column``` mixin.
+
+##### Example 1
+
+ .my-class {
+ @include breakpoint(481px) {
+ font-size: 1.2em;
+ }
+ }
+
+ // Compiled CSS
+
+ @media screen and (min-width: 481px) {
+ .my-class {
+ font-size: 1.2em;
+ }
+ }
+
+##### Example 2
+
+ .my-class {
+ @include breakpoint(max-width 769px) {
+ float: none;
+ }
+ }
+
+ // Compiled CSS
+
+ @media screen and (max-width: 769px) {
+ .my-class {
+ float: none;
+ }
+ }
+
+##### Example 3
+
+ .my-class {
+ @include breakpoint(max-width 769px) {
+ @include span-columns(6);
+ }
+ }
+
+ // Compiled CSS
+
+ @media screen and (max-width: 769px) {
+ .my-class {
+ display: block;
+ float: left;
+ margin-right: 2.35765%;
+ width: 48.82117%; // That's 6 columns of the total 12
+ }
+
+ .my-class:last-child {
+ margin-right: 0;
+ }
+ }
+
+##### Example 4
+
+ .my-class {
+ @include breakpoint(max-width 769px, 6) { // Use a 6 column grid (instead of the default 12)
+ @include span-columns(6);
+ }
+ }
+
+ // Compiled CSS
+
+ @media screen and (max-width: 769px) {
+ .my-class {
+ display: block;
+ float: left;
+ margin-right: 4.82916%;
+ width: 100%; // That's 6 columns of the total 6 specified for this media query
+ }
+ .my-class:last-child {
+ margin-right: 0;
+ }
+ }
+
+For convenience, you can create a list variable to hold your media context (breakpoint/column-count) and use it throughout your code:
+
+ $mobile: max-width 480px 4; // Use a 4 column grid in mobile devices (requires all three arguments to work)
+
+ .my-class {
+ @include breakpoint($mobile) {
+ @include span-columns(2);
+ }
+ }
+
+ // Compiled CSS
+
+ @media screen and (max-width: 480px) {
+ .my-class {
+ display: block;
+ float: left;
+ margin-right: 7.42297%;
+ width: 46.28851%; // 2 columns of the total 4 in this media context
+ }
+ .my-class:last-child {
+ margin-right: 0;
+ }
+ }
+
+Here is a summary of possible argument combinations:
+
+ // YAY
+ @include breakpoint(480px);
+ @include breakpoint(max-width 480px);
+ @include breakpoint(480px, 4);
+ @include breakpoint(max-width 480px, 4);
+ @include breakpoint(max-width 480px 4); // Shorthand syntax
+
+ // NAY
+ @include breakpoint(480px 4);
+ @include breakpoint(max-width 4);
+ @include breakpoint(max-width, 4);
+
### Changing the defaults
- All the default settings can be overridden, including ```$grid-columns``` and ```$max-width```. The complete list of settings can be found in the ```/settings``` subfolder. In order to override any of these settings, redefine the variable in your site-wide ```_variables.scss``` and make sure to import it *before* Neat (failing to do so will cause Neat to use the default values):
+All the default settings can be overridden, including ```$grid-columns``` and ```$max-width```. The complete list of settings can be found in the ```/settings``` subfolder. In order to override any of these settings, redefine the variable in your site-wide ```_variables.scss``` and make sure to import it *before* Neat (failing to do so will cause Neat to use the default values):
@import "bourbon/bourbon";
@import "variables";
View
36 grid/_grid.scss
@@ -114,3 +114,39 @@ $fg-max-width: $max-width;
@include box-sizing(border-box);
}
}
+
+// Breakpoints
+@mixin breakpoint($query:$feature $value $columns, $total-columns: $grid-columns) {
+
+ @if length($query) == 1 {
+ @media screen and ($default-feature: nth($query, 1)) {
+ $default-grid-columns: $grid-columns;
+ $grid-columns: $total-columns;
+ @content;
+ $grid-columns: $default-grid-columns;
+ }
+ }
+
+ @else if length($query) == 2 {
+ @media screen and (nth($query, 1): nth($query, 2)) {
+ $default-grid-columns: $grid-columns;
+ $grid-columns: $total-columns;
+ @content;
+ $grid-columns: $default-grid-columns;
+ }
+ }
+
+ @else if length($query) == 3 {
+ @media screen and (nth($query, 1): nth($query, 2)) {
+ $default-grid-columns: $grid-columns;
+ $grid-columns: nth($query, 3);
+ @content;
+ $grid-columns: $default-grid-columns;
+ }
+ }
+
+ @else {
+ @warn "Wrong number of arguments for breakpoint(). Read the documentation for more details.";
+ }
+}
+
View
2  settings/_grid.scss
@@ -3,4 +3,4 @@ $gutter: golden-ratio(1em, 1) !default;
$grid-columns: 12 !default;
$max-width: golden-ratio(1em, 9) !default;
$border-box-sizing: true !default; // Makes all elements have border-box layout
-
+$default-feature: min-width;
Something went wrong with that request. Please try again.