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

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:

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.