Shopify Debut Theme Code Documentation

 

DEBUT (V 16.5.2), Narrative, Boundless, Venture, Simple Shopify themes code documentation are written below:

$grid-medium: 750px;
$grid-large: 990px;
$grid-widescreen: 1400px;
$grid-gutter: 30px;
$grid-gutter-mobile: 22px;

$small: 'small';
$medium: 'medium';
$medium-down: 'medium-down';
$medium-up: 'medium-up';
$large: 'large';
$large-down: 'large-down';
$large-up: 'large-up';
$widescreen: 'widescreen';

$grid-breakpoints: 
$small '(max-width: #{750px - 1px})',
$medium '(min-width: #{750px}) and (max-width: #{990px - 1})',
$medium-down '(max-width: #{990px - 1})',
$medium-up '(min-width: #{750px})',
$large '(min-width: #{990px}) and (max-width: #{1400px - 1})',
$large-down '(max-width: #{$1400px - 1})',
$large-up '(min-width: #{990px})',
$widescreen '(min-width: #{1400px})'

 

Responsive:

@include media-query($small) {}  *most uesd

@include media-query($medium-up) {}  * most uesd

@include media-query($medium-down)

@include media-query($large-up)

@include media-query($widescreen)

 

 

/*============= Grid Columns =============*/

Create width classes, prepended by the breakpoint name.

Whole
--one-whole { width: 100%; }

Halves
--one-half { width: percentage(1 / 2); }

Thirds
--one-third { width: percentage(1 / 3); }
--two-thirds { width: percentage(2 / 3); }

Quarters
--one-quarter { width: percentage(1 / 4); }
--two-quarters { width: percentage(2 / 4); }
--three-quarters { width: percentage(3 / 4); }

Fifths
--one-fifth { width: percentage(1 / 5); }
--two-fifths { width: percentage(2 / 5); }
--three-fifths { width: percentage(3 / 5); }
--four-fifths { width: percentage(4 / 5); }

Sixths
--one-sixth { width: percentage(1 / 6); }
--two-sixths { width: percentage(2 / 6); }
--three-sixths { width: percentage(3 / 6); }
--four-sixths { width: percentage(4 / 6); }
--five-sixths { width: percentage(5 / 6); }

Eighths
--one-eighth { width: percentage(1 / 8); }
--two-eighths { width: percentage(2 / 8); }
--three-eighths { width: percentage(3 / 8); }
--four-eighths { width: percentage(4 / 8); }
--five-eighths { width: percentage(5 / 8); }
--six-eighths { width: percentage(6 / 8); }
--seven-eighths { width: percentage(7 / 8); }

Tenths
--one-tenth { width: percentage(1 / 10); }
--two-tenths { width: percentage(2 / 10); }
--three-tenths { width: percentage(3 / 10); }
--four-tenths { width: percentage(4 / 10); }
--five-tenths { width: percentage(5 / 10); }
--six-tenths { width: percentage(6 / 10); }
--seven-tenths { width: percentage(7 / 10); }
--eight-tenths { width: percentage(8 / 10); }
--nine-tenths { width: percentage(9 / 10); }

Twelfths
--one-twelfth { width: percentage(1 / 12); }
--two-twelfths { width: percentage(2 / 12); }
--three-twelfths { width: percentage(3 / 12); }
--four-twelfths { width: percentage(4 / 12); }
--five-twelfths { width: percentage(5 / 12); }
--six-twelfths { width: percentage(6 / 12); }
--seven-twelfths { width: percentage(7 / 12); }
--eight-twelfths { width: percentage(8 / 12); }
--nine-twelfths { width: percentage(9 / 12); }
--ten-twelfths { width: percentage(10 / 12); }
--eleven-twelfths { width: percentage(11 / 12); }


/*============= Grid push classes =============*/

Halves
--push-one-half { left: percentage(1 / 2); }

Thirds
--push-one-third { left: percentage(1 / 3); }
--push-two-thirds { left: percentage(2 / 3); }

Quarters
--push-one-quarter { left: percentage(1 / 4); }
--push-two-quarters { left: percentage(2 / 4); }
--push-three-quarters { left: percentage(3 / 4); }

Fifths
--push-one-fifth { left: percentage(1 / 5); }
--push-two-fifths { left: percentage(2 / 5); }
--push-three-fifths { left: percentage(3 / 5); }
--push-four-fifths { left: percentage(4 / 5); }

Sixths
--push-one-sixth { left: percentage(1 / 6); }
--push-two-sixths { left: percentage(2 / 6); }
--push-three-sixths { left: percentage(3 / 6); }
--push-four-sixths { left: percentage(4 / 6); }
--push-five-sixths { left: percentage(5 / 6); }

Eighths
--push-one-eighth { left: percentage(1 / 8); }
--push-two-eighths { left: percentage(2 / 8); }
--push-three-eighths { left: percentage(3 / 8); }
--push-four-eighths { left: percentage(4 / 8); }
--push-five-eighths { left: percentage(5 / 8); }
--push-six-eighths { left: percentage(6 / 8); }
--push-seven-eighths { left: percentage(7 / 8); }

Tenths
--push-one-tenth { left: percentage(1 / 10); }
--push-two-tenths { left: percentage(2 / 10); }
--push-three-tenths { left: percentage(3 / 10); }
--push-four-tenths { left: percentage(4 / 10); }
--push-five-tenths { left: percentage(5 / 10); }
--push-six-tenths { left: percentage(6 / 10); }
--push-seven-tenths { left: percentage(7 / 10); }
--push-eight-tenths { left: percentage(8 / 10); }
--push-nine-tenths { left: percentage(9 / 10); }

Twelfths
--push-one-twelfth { left: percentage(1 / 12); }
--push-two-twelfths { left: percentage(2 / 12); }
--push-three-twelfths { left: percentage(3 / 12); }
--push-four-twelfths { left: percentage(4 / 12); }
--push-five-twelfths { left: percentage(5 / 12); }
--push-six-twelfths { left: percentage(6 / 12); }
--push-seven-twelfths { left: percentage(7 / 12); }
--push-eight-twelfths { left: percentage(8 / 12); }
--push-nine-twelfths { left: percentage(9 / 12); }
--push-ten-twelfths { left: percentage(10 / 12); }
--push-eleven-twelfths { left: percentage(11 / 12); }
}

Clearfix helper on uniform grids

--one-half:nth-child(2n+1),
--one-third:nth-child(3n+1),
--one-quarter:nth-child(4n+1),
--one-fifth:nth-child(5n+1),
--one-sixth:nth-child(6n+1),
--two-sixths:nth-child(3n+1),
--three-sixths:nth-child(2n+1),
--one-eighth:nth-child(8n+1),
--two-eighths:nth-child(4n+1),
--four-eighths:nth-child(2n+1),
--five-tenths:nth-child(2n+1),
--one-twelfth:nth-child(12n+1),
--two-twelfths:nth-child(6n+1),
--three-twelfths:nth-child(4n+1),
--four-twelfths:nth-child(3n+1),
--six-twelfths:nth-child(2n+1) { clear: both; }
}
}

 

 

Most Used: 

medium-up--one-third 

medium-up--one-quarter

medium-up--one-half

medium-up--five-sixths

medium-up--push-one-twelfth

small--one-half

 

<div class="grid">
  <div class="grid__item medium-up--one-whole">
     First Column (width: 100%)
  </div>
</div>

 

<div class="grid">
  <div class="grid__item medium-up--one-half">
     First Column (width: 50%)
  </div>
  <div class="grid__item medium-up--one-half">
     Second Column (width: 50%)
  </div>
</div>

 

<div class="grid">
  <div class="grid__item medium-up--one-third">
     First Column (width: 33.33%)
  </div>
  <div class="grid__item medium-up--one-third">
     Second Column (width: 33.33%)
  </div>
  <div class="grid__item medium-up--one-third">
     Third Column (width: 33.33%)
  </div>
</div>

 

<div class="grid">
  <div class="grid__item medium-up--one-quarter">
      First Column (width: 25%)
  </div>
  <div class="grid__item medium-up--one-quarter">
     Second Column (width: 25%)
  </div>
  <div class="grid__item medium-up--one-quarter">
     Third Column (width: 25%)
  </div>
  <div class="grid__item medium-up--one-quarter">
     Forth Column (width: 25%)
  </div>
</div>

 

<div class="grid">
  <div class="grid__item medium-up--one-fifth">
     First Column (width: 20%)
  </div>
  <div class="grid__item medium-up--one-fifth">
     Second Column (width: 20%)
  </div>
  <div class="grid__item medium-up--one-fifth">
     Third Column (width: 20%)
  </div>
  <div class="grid__item medium-up--one-fifth">
     Forth Column (width: 20%)
  </div>
  <div class="grid__item medium-up--one-fifth">
     Fifth Column (width: 20%)
  </div>
</div>

 

<div class="grid">
  <div class="grid__item medium-up--one-sixth">
     First Column (width: 16.66%)
  </div>
  <div class="grid__item medium-up--one-sixth">
     Second Column (width: 16.66%)
  </div>
  <div class="grid__item medium-up--one-sixth">
     Third Column (width: 16.66%)
  </div>
  <div class="grid__item medium-up--one-sixth">
     Forth Column (width: 16.66%)
  </div>
  <div class="grid__item medium-up--one-sixth">
     Fifth Column (width: 16.66%)
  </div>
  <div class="grid__item medium-up--one-sixth">
     Sixth Column (width: 16.66%)
  </div>
 </div>

 

<div class="grid">
  <div class="grid__item medium-up--one-eighth">
     First Column (width: 12.50%)
  </div>
  <div class="grid__item medium-up--one-eighth">
     Second Column (width: 12.50%)
  </div>
  <div class="grid__item medium-up--one-eighth">
     Third Column (width: 12.50%)
  </div>
  <div class="grid__item medium-up--one-eighth">
     Forth Column (width: 12.50%)
  </div>
  <div class="grid__item medium-up--one-eighth">
     Fifth Column (width: 12.50%)
  </div>
  <div class="grid__item medium-up--one-eighth">
     Sixth Column (width: 12.50%)
  </div>
  <div class="grid__item medium-up--one-eighth">
     Seventh Column (width: 12.50%)
  </div>
  <div class="grid__item medium-up--one-eighth">
     Eighth Column (width: 12.50%)
  </div>
 </div>

 

<div class="grid">
  <div class="grid__item medium-up--one-tenth">
     First Column (width: 10%)
  </div>
  <div class="grid__item medium-up--one-tenth">
     Second Column (width: 10%)
  </div>
  <div class="grid__item medium-up--one-tenth">
     Third Column (width: 10%)
  </div>
  <div class="grid__item medium-up--one-tenth">
     Forth Column (width: 10%)
  </div>
  <div class="grid__item medium-up--one-tenth">
     Fifth Column (width: 10%)
  </div>
  <div class="grid__item medium-up--one-tenth">
     Sixth Column (width: 10%)
  </div>
  <div class="grid__item medium-up--one-tenth">
     Seventh Column (width: 10%)
  </div>
  <div class="grid__item medium-up--one-tenth">
     Eighth Column (width: 10%)
  </div>
  <div class="grid__item medium-up--one-tenth">
     Nineth Column (width: 10%)
  </div>
  <div class="grid__item medium-up--one-tenth">
     Tenth Column (width: 10%)
  </div>
 </div>

 

<div class="grid">
  <div class="grid__item medium-up--one-twelfth">
     First Column (width: 8.33%)
  </div>
  <div class="grid__item medium-up--one-twelfth">
     Second Column (width: 8.33%)
  </div>
  <div class="grid__item medium-up--one-twelfth">
     Third Column (width: 8.33%)
  </div>
  <div class="grid__item medium-up--one-twelfth">
     Forth Column (width: 8.33%)
  </div>
  <div class="grid__item medium-up--one-twelfth">
     Fifth Column (width: 8.33%)
  </div>
  <div class="grid__item medium-up--one-twelfth">
     Sixth Column (width: 8.33%)
  </div>
  <div class="grid__item medium-up--one-twelfth">
     Seventh Column (width: 8.33%)
  </div>
  <div class="grid__item medium-up--one-twelfth">
     Eighth Column (width: 8.33%)
  </div>
  <div class="grid__item medium-up--one-twelfth">
     Nineth Column (width: 8.33%)
  </div>
  <div class="grid__item medium-up--one-twelfth">
     Tenth Column (width: 8.33%)
  </div>
  <div class="grid__item medium-up--one-twelfth">
     Eleventh Column (width: 8.33%)
  </div>
  <div class="grid__item medium-up--one-twelfth">
     Twelfths Column (width: 8.33%)
  </div>
</div>

 

Class: 

.grid {
@include clearfix();
list-style: none;
margin: 0;
padding: 0;
margin-left: -$grid-gutter;

@include media-query($small) {
margin-left: -$grid-gutter-mobile;
}
}

.grid__item {
float: left;
padding-left: $grid-gutter;
width: 100%;

@include media-query($small) {
padding-left: $grid-gutter-mobile;
}

&[class*="--push"] {
position: relative;
}
}

.grid--no-gutters {
margin-left: 0;

.grid__item {
padding-left: 0;
}
}

.grid--half-gutters {
margin-left: -($grid-gutter / 2);

> .grid__item {
padding-left: $grid-gutter / 2;
}
}

.grid--double-gutters {
margin-left: -($grid-gutter * 2);

> .grid__item {
padding-left: $grid-gutter * 2;
}
}

.grid--flush-bottom {
margin-bottom: -$section-spacing;
overflow: auto;

> .grid__item {
margin-bottom: $section-spacing;
}
}

.grid--table {
display: table;
table-layout: fixed;
width: 100%;

> .grid__item {
float: none;
display: table-cell;
vertical-align: middle;
}
}

.grid--view-items {
overflow: auto;
margin-bottom: -$section-spacing-small;
}

 

grid--footer-float-right

page-width { padding-left: 55px; padding-right: 55px; }

--text-left

--text-right

--text-center

--show

--hide

--left

--right

h1, h2, h3, h4, h5, h6

 

Button :

.btn
.btn--secondary
.btn--secondary-accent
.btn--small
.btn--tertiary

 

 Slider Image Size:

Slide height setting Recommended width Recommended height
Adapt to first image 1200 px 600 px
Small 1200 px 475 px
Medium 1200 px 489 px
Large 1200 px 775 px

 

Banner Image Size: 545px x 491px

Product Image Size: 530px x 520px

 

And that’s it!

If you have any trouble, feel free to leave a comment below and I’ll do my best to help.

Need Shopify Expert Help?

If you need any Shopify expert help, you can try on Shopi Tasker . Shopi Tasker is a certified Shopify expert agency. They have been focused on delivering small & big tasks to Shopify users and have helped over 100+ Shopify store owners get stuff done.

out of sandbox theme
pixel union shopify theme
themeforest free shopify theme
bold shopify apps

Leave a comment