Author: | uhlume |
---|---|
Views Total: | 691 views |
Official Page: | Go to website |
Last Update: | February 26, 2022 |
License: | MIT |
Preview:

Description:
CSS Grid Layout is a standard in responsive design enabling designers to create fast, flexible, and adaptable web page layouts.
In this post, we take a look at Hextile, an open-source SASS library designed to produce responsive and fluid hexagon grid layouts in pure CSS using the CSS Grid Layout.
How to use it:
1. Load the hextile-static.min.css in the document.
<link rel="stylesheet" href="../css/hextile-static.min.css">
2. Add the CSS class hextile-grid
to an HTML list and specify the number of columns to generate using the hextile-n-column
class.
<ul class="hextile-grid hextile-4-column"> <li> Cell 1 </li> <li> Cell 2 </li> <li> Cell 3 </li> ... </ul>
3. Create your own layout by importing the textile SASS component and then writing your own styles as follows:
// Gallery.sass @use 'sass:math'; @use 'sass:string'; @use './sass/hextile'; .gallery { @include hextile.grid($columns: 4, $max-rows: 5, $stagger-direction: up); padding: 1em; filter: drop-shadow(1px 4px 2px rgba(0, 0, 0, 0.5)); > * { @include hextile.hex { background: #333; } } h3 { text-shadow: 1px 1px 2px hsla(0,0,0,0.75); } } h1 { font-size: 3em; text-align: center; transform-origin: center; transform: translate(-33%, 1.5em) rotateZ(-30deg); filter: drop-shadow(1px 4px 2px rgba(0, 0, 0, 0.35)); } h3 { text-align: center; width: 50%; margin: auto auto 1em; } @function zero-fill($number, $digits) { $num-string: '#{$number}'; @for $i from 0 to math.max($digits - string.length($num-string), 0) { $num-string: '0#{$num-string}'; } @return $num-string; } @for $i from 1 through 20 { $nonce: zero-fill(math.round(math.random() * math.random($i) * 1000), 5); #thumb-#{zero-fill($i, 3)} { background-image: url(https://unsplash.it/1280?random&gravity=center&nonce=#{$nonce}); background-size: cover; background-repeat: no-repeat; background-attachment: scroll; } }