Skip to content
This repository has been archived by the owner on Mar 12, 2022. It is now read-only.

Commit

Permalink
Merge branch 'dynamic_columns'
Browse files Browse the repository at this point in the history
  • Loading branch information
@jeromecoupe
jeromecoupe committed Nov 20, 2015
2 parents 6120bd9 + 60a8cb2 commit 20b5ca4
Show file tree
Hide file tree
Showing 3 changed files with 65 additions and 121 deletions.
182 changes: 62 additions & 120 deletions imports/_grid.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,16 @@

$grid-gutter: 40px !default;

/**
* Number of columns
*
* Always use a number or a list of numbers
* You can combine two or more grids
* Be careful with this, it generates quite a few classes per item in the list
* combined with many breakpoints, it can generate a lot of classes
*/

$grid-columns: (10, 12) !default;

/**
* Breakpoints defined using a nested Sass map
Expand Down Expand Up @@ -193,112 +203,60 @@ $grid-class-type: unquote(".");


// -------------------------------------
// =Default proportional grid classes
// -------------------------------------

@mixin mainclasses($namespace:"")
{
#{$grid-class-type}grid__unit--#{$namespace}full { width: 100%; }

#{$grid-class-type}grid__unit--#{$namespace}1of10 { width: 1/10 * 100%; }
#{$grid-class-type}grid__unit--#{$namespace}2of10 { width: 2/10 * 100%; }
#{$grid-class-type}grid__unit--#{$namespace}3of10 { width: 3/10 * 100%; }
#{$grid-class-type}grid__unit--#{$namespace}4of10 { width: 4/10 * 100%; }
#{$grid-class-type}grid__unit--#{$namespace}5of10 { width: 5/10 * 100%; }
#{$grid-class-type}grid__unit--#{$namespace}6of10 { width: 6/10 * 100%; }
#{$grid-class-type}grid__unit--#{$namespace}7of10 { width: 7/10 * 100%; }
#{$grid-class-type}grid__unit--#{$namespace}8of10 { width: 8/10 * 100%; }
#{$grid-class-type}grid__unit--#{$namespace}9of10 { width: 9/10 * 100%; }

#{$grid-class-type}grid__unit--#{$namespace}1of12 { width: 1/12 * 100%; }
#{$grid-class-type}grid__unit--#{$namespace}2of12 { width: 2/12 * 100%; }
#{$grid-class-type}grid__unit--#{$namespace}3of12 { width: 3/12 * 100%; }
#{$grid-class-type}grid__unit--#{$namespace}4of12 { width: 4/12 * 100%; }
#{$grid-class-type}grid__unit--#{$namespace}5of12 { width: 5/12 * 100%; }
#{$grid-class-type}grid__unit--#{$namespace}6of12 { width: 6/12 * 100%; }
#{$grid-class-type}grid__unit--#{$namespace}7of12 { width: 7/12 * 100%; }
#{$grid-class-type}grid__unit--#{$namespace}8of12 { width: 8/12 * 100%; }
#{$grid-class-type}grid__unit--#{$namespace}9of12 { width: 9/12 * 100%; }
#{$grid-class-type}grid__unit--#{$namespace}10of12 { width: 10/12 * 100%; }
#{$grid-class-type}grid__unit--#{$namespace}11of12 { width: 11/12 * 100%; }
}


// -------------------------------------
// =Add push classes
// =Create proportional grid classes
// -------------------------------------

/**
* proportionnaly nudge things to the left
*
* - using relative positioning and left positions
* - combined with pull classes, this allows for more complex content choreography
* - Loop through each value in the list
* - Create corresponding columns classes
* - Using "to" here since the "full" classes are created separately
*/

@mixin pushclasses($namespace:"")
@mixin make-classes($namespace:"")
{
#{$grid-class-type}grid__unit--#{$namespace}push-full { position: relative; left: 100%; }

#{$grid-class-type}grid__unit--#{$namespace}push-1of10 { position: relative; left: 1/10 * 100%; }
#{$grid-class-type}grid__unit--#{$namespace}push-2of10 { position: relative; left: 2/10 * 100%; }
#{$grid-class-type}grid__unit--#{$namespace}push-3of10 { position: relative; left: 3/10 * 100%; }
#{$grid-class-type}grid__unit--#{$namespace}push-4of10 { position: relative; left: 4/10 * 100%; }
#{$grid-class-type}grid__unit--#{$namespace}push-5of10 { position: relative; left: 5/10 * 100%; }
#{$grid-class-type}grid__unit--#{$namespace}push-6of10 { position: relative; left: 6/10 * 100%; }
#{$grid-class-type}grid__unit--#{$namespace}push-7of10 { position: relative; left: 7/10 * 100%; }
#{$grid-class-type}grid__unit--#{$namespace}push-8of10 { position: relative; left: 8/10 * 100%; }
#{$grid-class-type}grid__unit--#{$namespace}push-9of10 { position: relative; left: 9/10 * 100%; }

#{$grid-class-type}grid__unit--#{$namespace}push-1of12 { position: relative; left: 1/12 * 100%; }
#{$grid-class-type}grid__unit--#{$namespace}push-2of12 { position: relative; left: 2/12 * 100%; }
#{$grid-class-type}grid__unit--#{$namespace}push-3of12 { position: relative; left: 3/12 * 100%; }
#{$grid-class-type}grid__unit--#{$namespace}push-4of12 { position: relative; left: 4/12 * 100%; }
#{$grid-class-type}grid__unit--#{$namespace}push-5of12 { position: relative; left: 5/12 * 100%; }
#{$grid-class-type}grid__unit--#{$namespace}push-6of12 { position: relative; left: 6/12 * 100%; }
#{$grid-class-type}grid__unit--#{$namespace}push-7of12 { position: relative; left: 7/12 * 100%; }
#{$grid-class-type}grid__unit--#{$namespace}push-8of12 { position: relative; left: 8/12 * 100%; }
#{$grid-class-type}grid__unit--#{$namespace}push-9of12 { position: relative; left: 9/12 * 100%; }
#{$grid-class-type}grid__unit--#{$namespace}push-10of12 { position: relative; left: 10/12 * 100%; }
#{$grid-class-type}grid__unit--#{$namespace}push-11of12 { position: relative; left: 11/12 * 100%; }
}
// Create main "full" grid classes
#{$grid-class-type}grid__unit--#{$namespace}full { width: 100%};

// Create push "full" grid classes if needed
@if $grid-pushclasses
{
#{$grid-class-type}grid__unit--#{$namespace}push-full { position: relative; left: 100%; }
}

// -------------------------------------
// =add pull classes
// -------------------------------------
// Create pull "full" grid classes if needed
@if $grid-pullclasses
{
#{$grid-class-type}grid__unit--#{$namespace}pull-full { position: relative; right: 100%; }
}

/**
* proportionnaly nudge things to the right
*
* - using relative positioning and right positions
* - combined with pull classes, this allows for more complex content choreography
*/
/**
* Create main grid classes for each column in the grids
*/
@each $columns in $grid-columns
{
@if type-of($columns) != 'number'
{
@error "$grid-columns must be a number or a list of numbers";
}

@mixin pullclasses($namespace:"")
{
#{$grid-class-type}grid__unit--#{$namespace}pull-full { position: relative; right: 100%; }

#{$grid-class-type}grid__unit--#{$namespace}pull-1of10 { position: relative; right: 1/10 * 100%; }
#{$grid-class-type}grid__unit--#{$namespace}pull-2of10 { position: relative; right: 2/10 * 100%; }
#{$grid-class-type}grid__unit--#{$namespace}pull-3of10 { position: relative; right: 3/10 * 100%; }
#{$grid-class-type}grid__unit--#{$namespace}pull-4of10 { position: relative; right: 4/10 * 100%; }
#{$grid-class-type}grid__unit--#{$namespace}pull-5of10 { position: relative; right: 5/10 * 100%; }
#{$grid-class-type}grid__unit--#{$namespace}pull-6of10 { position: relative; right: 6/10 * 100%; }
#{$grid-class-type}grid__unit--#{$namespace}pull-7of10 { position: relative; right: 7/10 * 100%; }
#{$grid-class-type}grid__unit--#{$namespace}pull-8of10 { position: relative; right: 8/10 * 100%; }
#{$grid-class-type}grid__unit--#{$namespace}pull-9of10 { position: relative; right: 9/10 * 100%; }

#{$grid-class-type}grid__unit--#{$namespace}pull-1of12 { position: relative; right: 1/12 * 100%; }
#{$grid-class-type}grid__unit--#{$namespace}pull-2of12 { position: relative; right: 2/12 * 100%; }
#{$grid-class-type}grid__unit--#{$namespace}pull-3of12 { position: relative; right: 3/12 * 100%; }
#{$grid-class-type}grid__unit--#{$namespace}pull-4of12 { position: relative; right: 4/12 * 100%; }
#{$grid-class-type}grid__unit--#{$namespace}pull-5of12 { position: relative; right: 5/12 * 100%; }
#{$grid-class-type}grid__unit--#{$namespace}pull-6of12 { position: relative; right: 6/12 * 100%; }
#{$grid-class-type}grid__unit--#{$namespace}pull-7of12 { position: relative; right: 7/12 * 100%; }
#{$grid-class-type}grid__unit--#{$namespace}pull-8of12 { position: relative; right: 8/12 * 100%; }
#{$grid-class-type}grid__unit--#{$namespace}pull-9of12 { position: relative; right: 9/12 * 100%; }
#{$grid-class-type}grid__unit--#{$namespace}pull-10of12 { position: relative; right: 10/12 * 100%; }
#{$grid-class-type}grid__unit--#{$namespace}pull-11of12 { position: relative; right: 11/12 * 100%; }
@for $i from 1 to $columns
{
// Create main grid classes
#{$grid-class-type}grid__unit--#{$namespace}#{$i}of#{$columns} { width: percentage($i / $columns); }

// Create push grid classes if needed
@if $grid-pushclasses
{
#{$grid-class-type}grid__unit--#{$namespace}push-#{$i}of#{$columns} { position: relative; left: percentage($i / $columns) }
}

// Create pull grid classes if needed
@if $grid-pullclasses
{
#{$grid-class-type}grid__unit--#{$namespace}pull-#{$i}of#{$columns} { position: relative; right: percentage($i / $columns) }
}
}
}
}


Expand All @@ -318,38 +276,22 @@ $grid-class-type: unquote(".");
* include basic non-namespaced (silent) classes without any media queries
*/

@include mainclasses();
@if $grid-pushclasses { @include pushclasses(); }
@if $grid-pullclasses { @include pullclasses(); }
@include make-classes();


/**
* include namespaced (silent) classes for all defined breakpoints
* generate namespaced (silent) classes for all defined breakpoints
*/

@each $breakpoint-name, $breakpoint-params in $breakpoints-list
{
$breakpoint-query: map-get($breakpoint-params, query);
$breakpoint-grid: map-get($breakpoint-params, generate-grid-classes);
$breakpoint-query: map-get($breakpoint-params, query);
$breakpoint-grid: map-get($breakpoint-params, generate-grid-classes);

@if ($breakpoint-grid == true)
{
@media #{$breakpoint-query} {

// generate default grid classes for all media queries
@include mainclasses("#{$breakpoint-name}-");

// generate push grid classes for all media queries
@if ($grid-pushclasses == true)
{
@include pushclasses("#{$breakpoint-name}-");
}

// generate pull grid classes for all media queries
@if ($grid-pullclasses == true)
{
@include pullclasses("#{$breakpoint-name}-");
@if ($breakpoint-grid == true)
{
@media #{$breakpoint-query} {
@include make-classes("#{$breakpoint-name}-");
}
}
}
}
2 changes: 2 additions & 0 deletions imports/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@
* override any configuration specified in _grid.scss here
*/

$grid-columns: (12, 10);

$grid-pushclasses: true;
$grid-pullclasses: true;

Expand Down
2 changes: 1 addition & 1 deletion readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ I wanted a simple and quick way to design responsive grids in Sass so I built th

## Available classes and proportions

We are talking about proportional grids so these classes mean "spanning [proportion] of its parent's width". The default configuration allows you to combine 2 grids (10 and 12 units) but you can easily create your own grid or combination of grids.
We are talking about proportional grids so these classes mean "spanning [proportion] of its parent's width". The default configuration allows you to combine 2 grids (10 and 12 units) but you can easily create your own grid or combination of grids using the $grid-columns parameter.

.grid__unit--#{$namespace}full

Expand Down

0 comments on commit 20b5ca4

Please sign in to comment.