Prototype template
Quick start template
With the following example you can start your project quickly, I recommend using this structure but you can always choose your own way of doing it.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Prototype template</title>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
<link href="https://unpkg.com/shido@^3.0.8/dist/css/shido.min.css" rel="stylesheet">
</head>
<body>
<div class="main-container">
Nav
Content
...
</div>
<footer>
Content
...
</footer>
</body>
</html>
Do you want to play?
The following example is a little more complex, the idea is that you can play with classes and columns while testing Shido, you can also use it as a starter template if you want.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Shido prototype template</title>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
<link href="https://unpkg.com/shido@^3.0.8/dist/css/shido.min.css" rel="stylesheet">
<link href="https://unpkg.com/shido@^3.0.8/dist/css/shido-colors.min.css" rel="stylesheet">
</head>
<body>
<div class="main-container">
<header class="bg-grey-100">
<div class="scontainer">
<div class="line">
<div class="x:scol-12">
<nav>
<ul class="x:mrg-all-0 x:pad-all-0">
<li class="dis-inline-block x:middle x:pad-all-10">
<a href="#item-1">Item 1</a>
</li>
<li class="dis-inline-block x:middle x:pad-all-10">
<a href="#item-2">Item 2</a>
</li>
<li class="dis-inline-block x:middle x:pad-all-10">
<a href="#item-3">Item 3</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</header>
<section id="section-name" class="x:pad-bt-20 s:pad-bt-40 m:pad-bt-60">
<div class="scontainer">
<div class="line">
<div class="x:scol-12">
<h1 class="x:fs-30 s:fs-40 m:fs-50 l:fs-60">Lorem ipsum dolor sit.</h1>
</div>
<div class="x:scol-12">
<p class="fw-semi-bold">Content...
<span class="c-pink-200 fw-light">...more content.</span></p>
</div>
</div>
</div>
</section>
</div>
<footer class="bg-grey-100">
<div class="scontainer">
<div class="line">
<div class="x:scol-12">
<p>Shido © 2020</p>
</div>
</div>
</div>
</footer>
</body>
</html>