Creating a beautiful card-based design layout with Sass and Gerillass

Published in

Gerillass

6 min readAug 12, 2020

Creating a card-based design layout can often be challenging, especially if you don’t use a framework like Bootstrap or any other library to support this goal. Here is a flexible and straightforward way to create beautiful card-based design layouts using Sass and Gerillass.

We’ll be installing Node.js and Gulp CLI, and download a Gulp-based starter project named Gerillass Play to get started with Sass and Gerillass quickly.

Note that there are many ways of using Gerillass. The method that we are about to use now is just one of them. To learn more about installation and usage, please check the installation details on Github.

If you are using the Gerillass Sass library already skip these installation steps.

Node.js Installation:

The first thing is first.

Since we’ll be working with Node.js, you must install it on our computer, first.

To do that, visit the Node.js site at https://nodejs.org/en/ and then download the “LTS” version. After that, start the installer by double-clicking the installation file.

Now let’s open the terminal window and run the following command to test if the Node.js installed on your computer properly.

node --version

If you see the version info it is good to go!

Gulp CLI Installation

Open the terminal window again and run the following command to install Gulp CLI on your computer.

npm install --global gulp-cli

Note that the macOS users need to use sudo flag at the beginning like in the below example.

sudo npm install --global gulp-cli

Now let’s check the Gulp CLI version that we installed globally:

gulp --version

Installing Gerillass Play

To get started with Gerillass quickly we are going to download a Gulp-based starter project named Gerillass Play that I built for you. It will come with all the packages and configurations that you’ll need to work with Sass and Gerillass.

Now let’s open your terminal window. Type cd desktop to target the desktop folder, and then run the following command to install the project.

Replace your-project-name with a preferred one (e.g., card-based design).

git clone https://github.com/selfishprimate/gerillass-play-gulp.git your-project-name

Run the following command to go into that project folder.

cd your-project-name

When you are in the folder, type the following command, and hit the enter to install all the packages.

npm install

Now let’s boot up the project by running the following command.

gulp start

If you see the following screen on your browser, that means everything went well so far.

Creating a card-based design layout with Gerillass

Now open the “index.html” file under the “src” folder and replace the code with the one below.

Save the file to see the changes on your browser.

The page will be updated as soon as you save the file! Thanks to Gulp and BrowserSync.

I know the page looks a bit messy right now, but don’t worry, we are going to fix it.

Let’s use some Gerillass Sass mixins to fix that ugliness.

Open the “styles.scss” file under the “src/assets/scss” folder and scroll down till you see the comment I left for you:

/* Write your styles here! */

We are going to write our styles here.

First, let’s fix the width of the card images by calling the Reset Figure mixin in the “.card-figure” selector.

You can find the final version of the Sass code at the end of the article.

The code above will output the CSS code below (you can follow along with the changes by opening the “styles.scss” file under the “src/assets/scss” folder).

This will give us the following page.

Now, let’s use Columnizer mixin to create three hypothetical columns so that we can line up every item accordingly in the “.cards-container” element.

Columnizer mixin must always be called in the parent element’s selector.

It will generate…

We wrote just a few lines of Sass code so far, and look what we got!

Now let’s pass a second argument for Columnizer mixin to control the space between the cards.

The layout has started to form roughly, what do you think? Now let’s improve our cards cosmetically.

Our cards looking good now!

If you think that the last two items look bizarre, fortunately, there is a hack to fix that. You can pass a “true” value as a third argument for the Columnizer mixin to fix that.

That will make the orphans fill the gap.

Now let’s make our card-based design layout responsive

To make this layout responsive, we’ll make a little change inside of our Sass code: First, let’s change the value of the first argument of Columnizer mixin from “3” to “1”.

That will set the number of columns to “1” default.

After that let’s use another very useful mixin named Breakpoint to generate CSS media queries.

The code above will set the number of columns to “2” after “medium” breakpoint , and to “3” after “large” breakpoint.

Now shrink your browser window to see how our card-based design layout responds to the various screen sizes.

So far, so good. But we have one last thing to do!

Making the entire card clickable

We’ll make the entire card surface clickable by stretching the link inside of it. To achieve that, we are going to use another useful Sass mixin from the library named Stretched Link.

Call the Stretched Link Sass mixin in the “.card-link” selector, and add position: relative; style rule to the containing element, in this case, it’s the “.card” selector.

Note that the containing block must have position: relative; style rule and the mixin must be applied to only one of its children.

You can click wherever you want on the card now.

That’s all for now. Thank you for reading so far. I hope the article was helpful for you, and please let me know if you’re having any trouble using Gerillass. You can write to me on Twitter; I’ll soon be answering you.

See you around!

Related Links:

The final version of the Sass code.