A quick look at using a generated grid from Gridifier in your website to simplify making responsive layouts.
Gridifier is a tool I created for myself that generates a responsive grid. It was inspired by lots of other grid systems like Bootstrap, Pure.css and Foundation but has it’s own features and doesn’t require you to use the whole framework to implement it in your websites.
Let’s look at how to use Gridifier in your website.
This is what it should look like when it’s done:
Remember the purpose of this lesson is to type the code out yourself—build up that muscle memory in your fingers!
Start the lesson by forking and cloning the using-gridifier repository.
Fork & clone the “using-gridifier” repo.
The repository will have some starter files to get you on your way and include requirements for Markbot so you can be sure you’ve completed the lesson.
This includes some starter code that you can get by forking and cloning the repository. You’ll use Markbot to double check everything is done properly.
Before we get started, create some files and get ready.
index.htmlgrid.css in your css foldermain.css in your css folderDon’t forget to follow the naming conventions.
Use the html5, viewport, and css snippets.
<!DOCTYPE html>
<html lang="en-ca">
<head>
<meta charset="utf-8">
<title>Using Gridifier</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="css/grid.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
</head>
<body>
</body>
</html>
Create the boilerplate with html5, viewport & css
The order of these files is extremely important: grid.css should always come before main.css in the HTML.
Don’t forget to attach both CSS files: grid.css and main.css
Use the cssviewport, borderbox & textsize snippets.
@-moz-viewport { width: device-width; scale: 1; }
@-ms-viewport { width: device-width; scale: 1; }
@-o-viewport { width: device-width; scale: 1; }
@-webkit-viewport { width: device-width; scale: 1; }
@viewport { width: device-width; scale: 1; }
html {
box-sizing: border-box;
-moz-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
*, *::before, *::after {
box-sizing: inherit;
}
body {
margin: 0;
}
.img-flex {
display: block;
width: 100%;
}
figure {
margin: 0;
}
figcaption {
padding: .5em;
}
Create the boilerplate with cssviewport, borderbox & textsize
Make sure to add the class for scalable images.
We’re going to use the <figure> tag when we write our HTML, so let’s just clear out some of the defaults for it right away.
Let’s add all the content we need to the HTML including the basic tags.
⋮
<body>
<h1>Prehistoric creatures</h1>
<div>
<div>
<figure>
<img class="img-flex" src="images/diplodocus.jpg" alt="">
<figcaption>Diplodocus</figcaption>
</figure>
</div>
<div>
<figure>
<img class="img-flex" src="images/hadrosaur.jpg" alt="">
<figcaption>Hadrosaur</figcaption>
</figure>
</div>
<div>
<figure>
<img class="img-flex" src="images/iguanodon.jpg" alt="">
<figcaption>Iguanodon</figcaption>
</figure>
</div>
<div>
<figure>
<img class="img-flex" src="images/stegosaurus.jpg" alt="">
<figcaption>Stegosaurus</figcaption>
</figure>
</div>
</div>
</body>
</html>
Don’t forget to add the .img-flex class to all the images.
We’re going to use Gridifier to generate a fully complete grid for us to use in our website.
Keep all the settings as their defaults.
Copy all code generated by Gridifier, in the right-hand panel & paste it into your grid.css file.
That’s it—we have a fully functional grid. Now we can concentrate fully on our layout and write much less CSS.
We should never touch the generated CSS just in case we want to replace it later.
Now that we have a copy of Gridifer, we’re done with CSS. We can move on to putting the right classes into our HTML.
⋮
<h1>Prehistoric creatures</h1>
<div class="grid">
<div class="unit xs-1 s-1-2 m-1-2 l-1-4">
<figure>
<img class="img-flex" src="images/diplodocus.jpg" alt="">
<figcaption>Diplodocus</figcaption>
</figure>
</div>
<div class="unit xs-1 s-1-2 m-1-2 l-1-4">
<figure>
<img class="img-flex" src="images/hadrosaur.jpg" alt="">
<figcaption>Hadrosaur</figcaption>
</figure>
</div>
<div class="unit xs-1 s-1-2 m-1-2 l-1-4">
<figure>
<img class="img-flex" src="images/iguanodon.jpg" alt="">
<figcaption>Iguanodon</figcaption>
</figure>
</div>
<div class="unit xs-1 s-1-2 m-1-2 l-1-4">
<figure>
<img class="img-flex" src="images/stegosaurus.jpg" alt="">
<figcaption>Stegosaurus</figcaption>
</figure>
</div>
</div>
</body>
</html>
Now that we’ve added all those classes we should have a responsive layout.
Check it out in your browser—it should look like this:
We first need to add the .grid class to an element surrounding all the units.
We’re specifying 4 different sizes on the .unit:
xs-1 — Full width on extra smalls-1-2 — Half width on smallm-1-2 — Half width on mediuml-1-4 — Quarter width on largeThis is up to you! Add another brand new .grid row to the bottom of the HTML that has the 3 air dinosaurs.
Inside the new .grid, there should be <div> and <figure> tags for these remaining images:
archeopteryx.jpgpteranodon.jpgrhamphorhynchus.jpgCheck out the screenshots folder in the repo you forked to see what the final layouts should look like.
Add the correct grid sizes to each of the remaining units. Gridifier already supports those layouts so you won’t have to change any CSS.
Drop the final, coded exercise into Markbot and fix all the errors until Markbot gives you all green (and maybe a little yellow).
After you’ve fixed all the problems, go ahead and submit the assignment. You’ll immediately get your grade.