Tag: css

Posted on

Rem + em, a love story

Not this REM but…

With the new times using javascript for everything on the frontend (React.js, Angular.js) CSS is targeting more and more modular coding.

This is why if you are progressing in CSS you should learn BEM naming conventions.

A common problem I found is the designer use REM units for everything (or even worst PX) because they fear if you use relative units it will be affected by the context, and they want the css rules to be as standalaone as they could. There is a mayor problem with this approach because if you create different sizes of the same component, or you want to change the layout you have to rewrite all the sized attributes. This means more code, more complexity, hard readability…

The solution is to use REM units in the parent and use EM in everychildren, so when you make only a big mediaquery in the body and it will adapt itself all the way down in the body.

Check out this example code I made in codepen.

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”KqXbWr” default_tab=”css,result” user=”pikilon”]See the Pen <a href=’https://codepen.io/pikilon/pen/KqXbWr/’>CSS relative units in component layouting</a> by Pikilon (<a href=’https://codepen.io/pikilon’>@pikilon</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

 

Posted on

Better bootstrap grid

Bootstrap is a great framework (if is in the right hands) and the grid system is one os the most used tools, but isn’t is very repetitive to write?

If your answer is yes you’ll like this unobtrusive bootstrap addon I made. Make grid faster, without writing “col-md-2” six times (in each column).

I add two more things: no-gap columns and a 10 columns based grid (using col10-*-* and .row.base10-*-*)

And you can see documentation and download the file in my github here
You have an example here

[codepen_embed height=”265″ theme_id=”dark” slug_hash=”vKBgJp” default_tab=”result” user=”pikilon”]See the Pen <a href=’https://codepen.io/pikilon/pen/vKBgJp/’>Bootstrap addon better grid (add it before the bootstrap library)</a> by Pikilon (<a href=’http://codepen.io/pikilon’>@pikilon</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]