Category: Lambda

For those of you laying out web pages using a grid system (e.

For those of you laying out web pages using a grid system (e.g. Bootstrap but there are about a million others) how about giving flexbox a go? It’s well supported in browsers these days.

That said the flexbox spec is a little complex to learn quickly so I wrote a CSS library that allows you to do flexbox layouts with a minimum of fuss and with sensible defaults. You can layout out something as easily as this:

<div class="toolbar f-row f-middle f-padding“>

menu

<strong class=" f-grow “>Welcome to f-layout

email

<img style="width:56px;height:56px;border-radius:50%;"

src=”https://s.gravatar.com/avatar/f850593bdae3…..b4acfdfdb98? s=80″>

Which is the tool bar section of the layout shown below.

The classes f-row, f-middle and f-padding mean “lay things out horizontally, vertically centred and with some padding around each element”. The f-grow class on the title “Welcome to f-layout” means expand to fill the all the space. The other stuff is for showing icons and my gravatar.

f-layout is installable by Npm or Bower. Give it a shot and tell me what you think.

https://github.com/jhlagado/f-layout/