How to convert Mockup to responsive HTML and CSS writing maintainable CSS code (Part 1)

Before, I did not really like converting mockups to code and was very very slow at it and my CSS code was always a mess. After losing some opportunities, I decided I had to handle this skill as once and for all.

So, I went to work, learned some tools, concepts and did some projects. With time I was quickly converting mockups to responsive HTML and CSS and writing maintainable CSS code.

In this post I will show you a process I use that once you get a hold of it, you will be quickly doing conversions and your CSS code will be more organised and thus maintainable.

To make the post shorter, I will split this into two post which will talk about

1. Preperation and Setting up (Part 1)
2. Getting to work (Part 2)

This post will be about preperation and setting things up. Lets go !!!!

Note: This is not a quick fix solution. So, be ready to learn some new concepts and tools which benefit you alot.

Get your tools ready

Firstly, you will need to brush up on your CSS3 and Bootstrap 4 (this will help you work faster). I recommend w3schools for that.

Since I assume you are learning for this for the long term, I suggest going through the tutorial of each of the technologies(Bootstrap 4 and CSS3) understanding each topic in the tutorial menu on the left.

You do not have to do all the examples but just go through each topic understanding and seeing all what can be done with the technologies.

This is exactly why I like w3schools because, it helps you get a picture of all what can be done with a technology so that when you see a feature on a requirement, you immediately know what it is and thus can easily research how to implement it.

For the other tools and concepts to be learned in this tutorial, remember to just understand the basics so you can understand the tutorial and so you don’t waste time learning something you may not need.

Then, learn and install SASS. It will help in reusing and combining styles of different UI components. Click here to get the basics on SASS.

Read on Atomic Design principles and ABEM

Next, you will need to understand the basics of atomic design. I will just give a brief on the concepts as people understand and use these concepts differently.

• Atoms: Basic elements of the UI(User Interface) and can’t be broken down further. Examples include: button, span, paragraph etc.
• Molecules: Group of atoms which combine to do or represent something specific.
  • Independent and can exist and have meaning on their own.
  • Usually reused on the UI.
  • Examples include a site navigation with links.
• Organisms: Group of molecules or other organisms. Usually used to represent distinct sections or parts of the UI. Example include a product display section of a Shopping website.

Next, read on ABEM which is an adaptation of BEM which is a CSS naming convention which helps you write better CSS code that is easier to maintain. To have an overview on ABEM, go here.

Setting up PatternLab

Next, setup PatternLab. It is a tool which helps you build user interfaces using Atomic design principles by combining the independent components of the UI.

NB: I am using the Mustache version of PatternLab. There is also a twig version available for those comfortable with twig.

1. Click here to download PatternLab.
2. Open the .zip file and extract the folder with name patternlab2-with-demo. You can rename the folder name to reflect your project name if you want but not required.
3. Open the project folder in an editor of your choice. I used phpStorm.
4. In the source/css folder, first create a sass folder, then a components folder in which you create separate folders for atoms, molecules and organisms.
5. Create a folder with name abstract in the sass folder which will contain a partial for SASS variables and another partial for CSS code that does not belong to any specific UI component.
6. Next create a custom.sass file in the sass folder on which all the partial files will be included on.
7. Set SASS to watch the sass directory and compile CSS to the css folder. Use the terminal command below. Make sure you are in the project root folder in the terminal

 sass --watch source/css/sass:source/css

The above instructions on folder structure are just suggestions to help organize your files but you can do it as you please. Below is what part of the css directory structure should look like.

To create the _variables.scss partial, just copy that from source/css/scss/abstracts folder

Since we would be using Bootstrap 4, include it in the _00-head.mustache and _01-foot.mustache files found in the source/_meta/ directory. Also add a link to the custom.css file which was generated by SASS.

I also usually download Boostrap 4 and link to it. To be used only during development to help with code completion in PhpStorm.

The two .mustache files should look like below

• 

• 

Conclusion

Kudos !! for making it this far. In the next post we will actually convert a sample UI design to HTML and CSS code walking through all the steps involved.

So, stay tuned and if any questions, leave it in the comments and let’s discuss.