May 28th, 2020

From Design to Code

Until now, I didn't feel comfortable transforming a given design into code. Of course, I wanted to fix this and I learn by doing (mostly). After browsing around online I chose two website designs from Dribbble as inspiration for my projects. I decided to make them both React.js projects because it makes more sense to me. I am using React.js for some time now and I wanted a starter theme of my own. This is not a post that will go in deep with React.js details, my main focus is the layout and it's CSS.

Starting like this gave me a few quick wins at the beginning to not feel *completely* overwhelmed. You must remember how that feels like, right? :)

I am using Sass and Bootstrap to help me write CSS in a nicer and decoupled way. With an extensive background in the OOP world, I do like structure and Sass is proven to be awesome. Working with CSS is new to me, so bear with me as I go forward in my own pace.

My first step was looking at the design and drawing on a piece of (actual) paper how I can split the elements and create outside and abstract view of this exercise. I thought of 'header container', 'main container', 'footer container'. Below I shared actual pen and paper wireframes from my notebook. It's nothing special, it's simple and clear, I hope.

Draft drawing on paper

I googled about HTML5 and accessibility and installed a few browser extensions to help with the latter. Just type "web accessibility" in your browsers extension market and you will have a lot of options that will help you now and later in time.

My bare minimums were to use <header>, <nav> for navigation, <footer>, <section> etc instead of divs. I definatelly used divs but wanted to NOT use them for what semantic HTML offers.

Html semantics for header and nav

Html semantics for footer

Css tricks

Without a doubt, this website helped a lot: https://css-tricks.com/
Decouple code from the start. This means, create a variables.scss file in which you keep values needed in the page: colours, heights, widths, fonts, text decoration (the last two I didn't yet). Do you have more examples?
Create helpers.scss file (or files) where you add specific classes that do 1 thing and use them across your layout. Instead of using media queries over and over again, you can have a specific class that for small screens you want different padding for example.

Sass no padding for small screens

You can stop repeating yourself if you use the power of Sass and iterate over a map/array and do something with it like here:

Iterate over a map using sass to reduce code redundancy

I can now append class "hidden-sm"/"hidden-lg" etc where I need to.

In my code, I make use of Flexgrid and Bootstrap. It took me a while to not mix them and then be amazed it doesn't work, for instance, 'Row' should not be combined with 'display: flex'. But, you can style cols using flex.

A row should contain 12 columns (col-12) in Bootstrap. For instance, if you want to have two boxes one next to each other, you can add them in a row div and each col size in combination should result in col-12. In the example below, I am specifying that for MINIMUM md screens the first div can occupy col-3 and on smaller screens should be full width and the second div can occupy (the remaining) col-9 and on smaller screens this should be full width as well.

Col-12

Testing

I am making use of browser extensios heavily for testing. Looking mostly at color contrast, labels, if I am using semantic, can I navigate with TAB and anything else helper extension can tell me. Learning on the fly here. I will list my used extensions in Chrome and Firefox:

- SiteImprove extension

- Accessibility monitor extension

- Color Picker from page extension

- WebPageTest.org

- Lighthouse Audit from Chrome Dev Tools

- WAVE Evaluation Tool extension

- a11y.css Accessibility Checker extension (FF only)

Results

https://blog-react-theme.netlify.app/

Code on GitHub: https://github.com/gabrielaradu/blogreactheme MIT Licence

Lighthouse audit results:

Lighthouse audit results

Lighthouse audit results with details for pain points

https://story-react-theme.netlify.app/

Code on GitHub: https://github.com/gabrielaradu/storyreacttheme MIT Licence

Lighthouse audit results:

Lighthouse results

From the first to the second project I have learned new stuff and this made me feel more confident, plus, code looks better. For the latter, I want to continue developing my CSS/Html skills and iterate on the projects and create new ones.

Thank you for reading, if you have constructive suggestions for the code please share them in Github so that everyone learns from them.