How it works

All details about the inside of Shido will be documented in this section.

Details

  • Developed with: Less and Sass
  • Number of columns: 12
  • Column padding: 10px on each side of a column
  • Offsets: Yes
  • Column ordering: No
  • Default font size: 16px
  • Safe area: 1366px

Breakpoints

The breakpoints apply for devices with screen widths greater than or equal to the defined breakpoints, invalidating the breakpoints for smaller devices. For example using columns, any class .m:scol-* will work on medium, large and extra large devices if a class .l:scol-* or .xl:scol-* is not present.

x

≥ 0px

s

≥ 600px

m

≥ 768px

l

≥ 1024px

xl

≥ 1366px

It is important to note that the breakpoint x is applied by default in some cases such as columns and fonts.

Columns

If you are using a class .s:scol-4 and there is no class .x:scol-* automatically the breakpont by default it will be .x:scol-12, if this is what you want then it is not necessary to declare a class .x:scol-12


<div classs="line">
  <div class="s:scol-4">4</div>
  <div class="s:scol-4">4</div>
  <div class="s:scol-4">4</div>
</div>
4
4
4
See more about columns

Fonts

If you are using a class .s:fs-24 and there is no class .x:fs-* automatically the breakpont by default it will be .x:fs-16, if this is what you want then it is not necessary to declare the class .x:fs-16


<p class="s:fs-24 x:center">Responsive fonts!</p>

Responsive fonts!

See more about fonts

Variables

The following set of variables configures the parameters necessary for the correct functioning of the grid, I don't recommend overwriting variables unless you are sure of what you are doing. If you want to customize your Shido installation I recommend doing it as follows:

Customize your project

Breakpoints

Breakpoint variables will help you define special behaviors within media queries depending on your needs. I don't recommend overwriting them for any reason unless you are sure of what you are doing.


@x-screen-min:  0px;
@s-screen-min:  600px;
@m-screen-min:  768px;
@l-screen-min:  1024px;
@xl-screen-min: 1366px;

@x-screen-max:  599px;
@s-screen-max:  767px;
@m-screen-max:  1023px;
@l-screen-max:  1365px;

    

$x-screen-min:  0px;
$s-screen-min:  600px;
$m-screen-min:  768px;
$l-screen-min:  1024px;
$xl-screen-min: 1366px;

$x-screen-max:  599px;
$s-screen-max:  767px;
$m-screen-max:  1023px;
$l-screen-max:  1365px;

With breakpoint variables you can set media queries to give specific behaviors.


@media (max-width: @m-screen-max) { ... }
@media (min-width: @l-screen-min) { ... }

    

@media (max-width: $m-screen-max) { ... }
@media (min-width: $l-screen-min) { ... }

All variables

With the exception of breakpoints, all variables begin with the prefix s- to avoid problems with the variables of your project.


// Grid
@s-scontainer:          1366px;
@s-columns:             12;
@s-grid:                100/@s-columns;
@s-column-padding:      10px;
@s-scontainer-padding:  10px;

// Layout
@s-body-background-color: #fff;
@s-body-font-color:       #000;
@s-headings-font-color:   #000;
@s-body-font-family:      -apple-system, BlinkMacSystemFont, "Segoe UI", "Source Sans Pro", Oxygen, sans-serif;
@s-headings-font-family:  -apple-system, BlinkMacSystemFont, "Segoe UI", "Source Sans Pro", Oxygen, sans-serif;
@s-main-link-color:       #2196F3;
@s-main-link-color-hover: #1565C0;

// Fonts
@s-increment-font: 2;
@s-min-font-size:  10;
@s-max-font-size:  60;

// Marging & Padding
@s-increment-mp:  5;
@s-max-margin:    80;
@s-max-padding:   80;

// Font weight
@s-font-weight-thin:        100;
@s-font-weight-light:       300;
@s-font-weight-regular:     400;
@s-font-weight-medium:      500;
@s-font-weight-semi-bold:   600;
@s-font-weight-bold:        700;
@s-font-weight-extra-bold:  800;
@s-font-weight-black:       900;

    

// Grid
$s-scontainer:          1366px;
$s-columns:             12;
$s-grid:                100/$s-columns;
$s-column-padding:      10px;
$s-scontainer-padding:  10px;

// Layout
$s-body-background-color: #fff;
$s-body-font-color:       #000;
$s-headings-font-color:   #000;
$s-body-font-family:      -apple-system, BlinkMacSystemFont, "Segoe UI", "Source Sans Pro", Oxygen, sans-serif;
$s-headings-font-family:  -apple-system, BlinkMacSystemFont, "Segoe UI", "Source Sans Pro", Oxygen, sans-serif;
$s-main-link-color:       #2196F3;
$s-main-link-color-hover: #1565C0;

// Fonts
$s-increment-font: 2;
$s-min-font-size:  10;
$s-max-font-size:  60;

// Marging & Padding
$s-increment-mp:  5;
$s-max-margin:    80;
$s-max-padding:   80;

// Font weight
$s-font-weight-thin:        100;
$s-font-weight-light:       300;
$s-font-weight-regular:     400;
$s-font-weight-medium:      500;
$s-font-weight-semi-bold:   600;
$s-font-weight-bold:        700;
$s-font-weight-extra-bold:  800;
$s-font-weight-black:       900;