Help! Is there a reference for the grid layout used in Slate?

Shopify Partner
1 0 0

I got overwhelmed modifying Simple for new new store so I decided to start from scratch with Slate's starter theme. I followed Nathan Fergusson's Youtube tutorial and right at the first step, throwing the featured products into a grid (using grid--uniform / grid__item etc), was a complete fail. It looks like the SCSS got compiled correctly, but it's not displaying in a grid. 

 

Is there a reference or guide anywhere to the grid CSS library used? 

 

0 Likes
New Member
5 0 0

This is my goto for the grid reference. Several other themes use this as the starting point as well. I am currently working on a Venture theme that uses the same gride scheme.

 

https://shopify.github.io/slate.shopify.com/docs/0.14.0/css-examples/#grid

 

You should also be able to hit the theme.scss.liquid as well and reference the grid options in there for your layout purposes. It's really helpful to learn the push classes as well. 

/*============================================================================
  Grid Columns
    - Create width classes, prepended by the breakpoint name.
==============================================================================*/
@mixin grid-column-generator($grid-breakpoint-type:"") {
  /** Whole */
  .#{$grid-breakpoint-type}one-whole       { width: 100%; @include flex-basis(100%); }

  /* Halves */
  .#{$grid-breakpoint-type}one-half        { width: percentage(1/2); @include flex-basis(percentage(1/2)); }

  /* Thirds */
  .#{$grid-breakpoint-type}one-third       { width: percentage(1/3); @include flex-basis(percentage(1/3)); }
  .#{$grid-breakpoint-type}two-thirds      { width: percentage(2/3); @include flex-basis(percentage(2/3)); }

  /* Quarters */
  .#{$grid-breakpoint-type}one-quarter     { width: percentage(1/4); @include flex-basis(percentage(1/4)); }
  .#{$grid-breakpoint-type}two-quarters    { width: percentage(2/4); @include flex-basis(percentage(2/4)); }
  .#{$grid-breakpoint-type}three-quarters  { width: percentage(3/4); @include flex-basis(percentage(3/4)); }

  /* Fifths */
  .#{$grid-breakpoint-type}one-fifth       { width: percentage(1/5); @include flex-basis(percentage(1/5)); }
  .#{$grid-breakpoint-type}two-fifths      { width: percentage(2/5); @include flex-basis(percentage(2/5)); }
  .#{$grid-breakpoint-type}three-fifths    { width: percentage(3/5); @include flex-basis(percentage(3/5)); }
  .#{$grid-breakpoint-type}four-fifths     { width: percentage(4/5); @include flex-basis(percentage(4/5)); }

  /* Sixths */
  .#{$grid-breakpoint-type}one-sixth       { width: percentage(1/6); @include flex-basis(percentage(1/6)); }
  .#{$grid-breakpoint-type}two-sixths      { width: percentage(2/6); @include flex-basis(percentage(2/6)); }
  .#{$grid-breakpoint-type}three-sixths    { width: percentage(3/6); @include flex-basis(percentage(3/6)); }
  .#{$grid-breakpoint-type}four-sixths     { width: percentage(4/6); @include flex-basis(percentage(4/6)); }
  .#{$grid-breakpoint-type}five-sixths     { width: percentage(5/6); @include flex-basis(percentage(5/6)); }

  /* Eighths */
  .#{$grid-breakpoint-type}one-eighth      { width: percentage(1/8); @include flex-basis(percentage(1/8)); }
  .#{$grid-breakpoint-type}two-eighths     { width: percentage(2/8); @include flex-basis(percentage(2/8)); }
  .#{$grid-breakpoint-type}three-eighths   { width: percentage(3/8); @include flex-basis(percentage(3/8)); }
  .#{$grid-breakpoint-type}four-eighths    { width: percentage(4/8); @include flex-basis(percentage(4/8)); }
  .#{$grid-breakpoint-type}five-eighths    { width: percentage(5/8); @include flex-basis(percentage(5/8)); }
  .#{$grid-breakpoint-type}six-eighths     { width: percentage(6/8); @include flex-basis(percentage(6/8)); }
  .#{$grid-breakpoint-type}seven-eighths   { width: percentage(7/8); @include flex-basis(percentage(7/8)); }

  /* Tenths */
  .#{$grid-breakpoint-type}one-tenth       { width: percentage(1/10); @include flex-basis(percentage(1/10)); }
  .#{$grid-breakpoint-type}two-tenths      { width: percentage(2/10); @include flex-basis(percentage(2/10)); }
  .#{$grid-breakpoint-type}three-tenths    { width: percentage(3/10); @include flex-basis(percentage(3/10)); }
  .#{$grid-breakpoint-type}four-tenths     { width: percentage(4/10); @include flex-basis(percentage(4/10)); }
  .#{$grid-breakpoint-type}five-tenths     { width: percentage(5/10); @include flex-basis(percentage(5/10)); }
  .#{$grid-breakpoint-type}six-tenths      { width: percentage(6/10); @include flex-basis(percentage(6/10)); }
  .#{$grid-breakpoint-type}seven-tenths    { width: percentage(7/10); @include flex-basis(percentage(7/10)); }
  .#{$grid-breakpoint-type}eight-tenths    { width: percentage(8/10); @include flex-basis(percentage(8/10)); }
  .#{$grid-breakpoint-type}nine-tenths     { width: percentage(9/10); @include flex-basis(percentage(9/10)); }

  /* Twelfths */
  .#{$grid-breakpoint-type}one-twelfth     { width: percentage(1/12); @include flex-basis(percentage(1/12)); }
  .#{$grid-breakpoint-type}two-twelfths    { width: percentage(2/12); @include flex-basis(percentage(2/12)); }
  .#{$grid-breakpoint-type}three-twelfths  { width: percentage(3/12); @include flex-basis(percentage(3/12)); }
  .#{$grid-breakpoint-type}four-twelfths   { width: percentage(4/12); @include flex-basis(percentage(4/12)); }
  .#{$grid-breakpoint-type}five-twelfths   { width: percentage(5/12); @include flex-basis(percentage(5/12)); }
  .#{$grid-breakpoint-type}six-twelfths    { width: percentage(6/12); @include flex-basis(percentage(6/12)); }
  .#{$grid-breakpoint-type}seven-twelfths  { width: percentage(7/12); @include flex-basis(percentage(7/12)); }
  .#{$grid-breakpoint-type}eight-twelfths  { width: percentage(8/12); @include flex-basis(percentage(8/12)); }
  .#{$grid-breakpoint-type}nine-twelfths   { width: percentage(9/12); @include flex-basis(percentage(9/12)); }
  .#{$grid-breakpoint-type}ten-twelfths    { width: percentage(10/12); @include flex-basis(percentage(10/12)); }
  .#{$grid-breakpoint-type}eleven-twelfths { width: percentage(11/12); @include flex-basis(percentage(11/12)); }
}
0 Likes