Huesos
Style
Guide

Repositoire

GitHub

Preview

Show Grid

Setting $show-grid to true will show a grid both behind the <body>. Note that image, video and iframe’s height may throw vertical rhythm away.

A helper class .show-grid is also included. This class can be applied to any container to show the grid.

The grid includes “half steps” (1/2 of the vertical rhythm) to help debugging uneven units (i.e. ritmo(5)).

Example

<article class="show-grid">
    <h1>You will need to activate $show-grid</h1>
    <h2>If deactivated, you won't see the grid behind this text</h2>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Atque amet quis dolores, ullam quidem dolorum provident? At totam tempore nemo, necessitatibus eum temporibus deleniti itaque? Labore sed repellendus rerum sequi.</p>
</article>

Assets

  • Filesystem Path: src/components/debug/show-grid/_show-grid.scss
  • Size: 670 Bytes 
  • @if $show-grid == true {
	body {
		background-size: ritmo($base-line-multi) ritmo($base-line-multi), ritmo($base-line-multi / 2) ritmo($base-line-multi / 2);
		background-image: linear-gradient(to bottom, rgba(0,0,0, 0.1) 1px, transparent 1px), linear-gradient(to bottom, rgba(0,0,0, 0.05) 1px, transparent 1px);
		background-repeat: repeat;
	}
	
}

.show-grid {
	background-size: ritmo($base-line-multi) ritmo($base-line-multi), ritmo($base-line-multi / 2) ritmo($base-line-multi / 2);
	background-image: linear-gradient(to bottom, rgba(0,0,0, 0.1) 1px, transparent 1px), linear-gradient(to bottom, rgba(0,0,0, 0.05) 1px, transparent 1px);
	background-repeat: repeat;
}