How to

Overall preperation reset, normalize or sanitize

Each browser has its own internal stylesheet. It is common practice to eliminate the differences between these stylesheets in advance. In the past these differences were considerable. Nowadays they are minimal. Over time, several stylesheets were developed to cancel these differences. Well known stylesheets in this respect are: Reset, Normalize and Sanitize. This website uses sanitize.css which is integrated in fractionflex.css

Traditional css preperation html5

<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="fractionflex-min.css" /> </head> <body> </body> </html>

In this example you make a link relation to the fractionflex css file.

Advantage:

  • It keeps your html file clean.

Disadvantage:

  • The css file is an extra request to the server. Requests make your websites slow. Up to 200 m/s per request.

Mobile-first css preperation html5

<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> ... </style> </head> <body> <style> ... </style> </body> </html>

In this example you integrate the fractionflex styles into the html file and split it in two parts. In the head section you only place the style needed for cell-phones. Just before the closing body tag you place the style for bigger screens. These styles are marked by the @media min-width tags.

Advantage:

  • Makes your website load faster overall because you don’t need an extra request.
  • Cell-phones don’t have to read styles for bigger screens before displaying the site

Disadvantage:

  • Your html code is a little more difficult to read

Html code basic building blocks

(You can put the basic building blocks between the body tags)


Basic levels

<div class="flex-row"> <div class="flex-column"> <div class="vertical"> <p>column A</p> </div> </div> </div>

column A

  • first-level = row
  • second-level = column
  • third-level = alignment
  • fourth-level = content

Internet Explorer needs the third level to align the content properly. (see documentation)


Two rows and fill-height

<div class="flex-row fill-height"> <div class="flex-column"> <div class="vertical"> <p>column A</p> </div> </div> </div> <div class="flex-row"> <div class="flex-column"> <div class="vertical"> <p>column B</p> </div> </div> </div>

column A

This column has been given the class: "fill-height". As a result it stretches out until it has used up the remaining screen height.

column B


One-row two columns

<div class="flex-row"> <div class="flex-column fr1-3"> <div class="vertical"> <p>column A</p> </div> </div> <div class="flex-column fr2-3"> <div class="vertical"> <p>column B</p> </div> </div> </div>

column A

To define the width of columns fractionflex uses fractions. In this example we use fr1-3 and fr2-3. For all possible fractions see documentation

column B


Nested-columns

<div class="flex-row"> <div class="flex-column fr1-3"> <div class="vertical"> <p>column A</p> </div> </div> <section class="nested-column fr2-3"> <div class="flex-column"> <div class="vertical"> <p>column B</p> </div> </div> <div class="flex-column"> <div class="vertical"> <p>column C</p> </div> </div> </section> </div>

column A

column B

column C


Nested-column with row

<div class="flex-row"> <div class="flex-column fr1-3"> <div class="vertical"> <p>column A</p> </div> </div> <section class="nested-column fr2-3"> <div class="flex-column"> <div class="vertical"> <p>column B</p> </div> </div> <div class="flex-row fill-height"> <div class="flex-column fr1-3"> <div class="vertical"> <p>column C</p> </div> </div> <div class="flex-column fr2-3"> <div class="vertical"> <p>column D</p> </div> </div> </div> </section> </div>

column A

column B

column C

column D


Basic page


Html code basic page

<header class="flex-row"> <section class="flex-column fr1-5"> <div class="vertical"> <p>Logo</p> </div> </section> <section class="nested-column fr4-5"> <header class="flex-column"> <div class="vertical"> <p>Header</p> </div> </header> <nav class="flex-column do-end"> <ul class="horizontal"> <li>navigation</li> <li>navigation</li> <li>navigation</li> </ul> </nav> </section> </header> <main class="flex-row fill-height"> <nav class="flex-column fr1-5"> <ul class="vertical"> <li>nav 2</li> </ul> </nav> <article class="flex-column fr3-5"> <div class="vertical"> <p>article</p> </div> </article> <aside class="flex-column fr1-5"> <div class="vertical"> <p>aside</p> </div> </aside> </main> <footer class="flex-row"> <div class="flex-column fr1-3"> <div class="vertical"> <p>footer 1</p> </div> </div> <div class="flex-column fr1-3"> <div class="vertical"> <p>footer 2</p> </div> </div> <div class="flex-column fr1-3"> <div class="vertical"> <p>footer 3</p> </div> </div> </footer>

Logo

Header

article


Basic page additional css

<style> .vertical{padding:25px} .horizontal li{padding:10px} body{background-color:#CCC} .flex-column{background-color:#F2F2F2; margin:0.5px} </style>

Tips:

  • On the third-level (vertical, horizontal) you can use padding without disturbing the layout structure of rows and columns.
  • When designing, set .flex-column margin to 0.5px and choose different background-colors for body and .flex-column. In this way the boundaries of your design become perfectly visible.
  • This page example make use of new tags like article, main, section,... If you design for older browsers you simply replace them by divisions (div)

Examples of placing content in different ways


do-start, set-start = standard layout

You don't have to use them in this example. It can be handy in more complex designs.

<div class="flex-row"> <div class="flex-column set-start do-start"> <div class="vertical"> <p>Lorem ipsum</p> <p>Lorem ipsum dolor sit amet</p> </div> </div> </div>

Lorem ipsum

Lorem ipsum dolor sit amet


set-center

<div class="flex-row"> <div class="flex-column set-center"> <div class="vertical"> <p>Lorem ipsum</p> <p>Lorem ipsum dolor sit amet</p> </div> </div> </div>

Lorem ipsum

Lorem ipsum dolor sit amet


set-end

<div class="flex-row"> <div class="flex-column set-end"> <div class="vertical"> <p>Lorem ipsum</p> <p>Lorem ipsum dolor sit amet</p> </div> </div> </div>

Lorem ipsum

Lorem ipsum dolor sit amet


do-center (level column)

<div class="flex-row"> <div class="flex-column do-center"> <div class="vertical"> <p>Lorem ipsum</p> <p>Lorem ipsum dolor sit amet</p> </div> </div> </div>

Lorem ipsum

Lorem ipsum dolor sit amet


do-center (level vertical)

<div class="flex-row"> <div class="flex-column"> <div class="vertical do-center"> <p>Lorem ipsum</p> <p>Lorem ipsum dolor sit amet</p> </div> </div> </div>

Lorem ipsum

Lorem ipsum dolor sit amet


do-end (level column)

<div class="flex-row"> <div class="flex-column do-end"> <div class="vertical"> <p>Lorem ipsum</p> <p>Lorem ipsum dolor sit amet</p> </div> </div> </div>

Lorem ipsum

Lorem ipsum dolor sit amet


do-end (level vertical)

<div class="flex-row"> <div class="flex-column"> <div class="vertical do-end"> <p>Lorem ipsum</p> <p>Lorem ipsum dolor sit amet</p> </div> </div> </div>

Lorem ipsum

Lorem ipsum dolor sit amet


set-center, do-center

<div class="flex-row"> <div class="flex-column set-center do-center"> <div class="vertical"> <p>Lorem ipsum</p> <p>Lorem ipsum dolor sit amet</p> </div> </div> </div>

Lorem ipsum

Lorem ipsum dolor sit amet


set-center, do-center (level vertical)

<div class="flex-row"> <div class="flex-column set-center"> <div class="vertical do-center"> <p>Lorem ipsum</p> <p>Lorem ipsum dolor sit amet</p> </div> </div> </div>

Lorem ipsum

Lorem ipsum dolor sit amet


set-end, do-end, do-center (level vertical)

<div class="flex-row"> <div class="flex-column set-end do-end" > <div class="vertical do-center"> <p>Lorem ipsum</p> <p>Lorem ipsum dolor sit amet</p> </div> </div> </div>

Lorem ipsum

Lorem ipsum dolor sit amet


Do you get the idea?

It would take to much space to write down all the combinations with do- and set-.

  • Of course, it works also with all horizontal alignments of a column
  • If you would wish, you can still combine this with the old-fashioned css text-align
  • Beware! Use .set-start, .set-center, .set-end only on column level. Internet Explorer can't cooperate with this on the vertical or horizontal levels in nested columns. (Content overflows all bounderies)

Examples of a few more 'special' align-classes in (fraction)flex:

items-around and items-between


items-around (vertical)

<div class="flex-row"> <div class="flex-column"> <div class="vertical items-around"> <p>Lorem ipsum</p> <p>Lorem ipsum dolor sit amet</p> </div> </div> </div>

Lorem ipsum

Lorem ipsum dolor sit amet


items-around (horizontal)

<div class="flex-row"> <div class="flex-column"> <div class="horizontal items-around"> <p>Lorem ipsum</p> <p>Lorem ipsum dolor sit amet</p> </div> </div> </div>

Lorem ipsum

Lorem ipsum dolor sit amet


set-center, items-around (horizontal)

<div class="flex-row"> <div class="flex-column set-center"> <div class="horizontal items-around"> <p>Lorem ipsum</p> <p>Lorem ipsum dolor sit amet</p> </div> </div> </div>

Lorem ipsum

Lorem ipsum dolor sit amet


items-between (vertical)

<div class="flex-row"> <div class="flex-column"> <div class="vertical items-between"> <p>Lorem ipsum</p> <p>Lorem ipsum dolor sit amet</p> </div> </div> </div>

Lorem ipsum

Lorem ipsum dolor sit amet


items-between (horizontal)

<div class="flex-row"> <div class="flex-column"> <div class="horizontal items-between"> <p>Lorem ipsum</p> <p>Lorem ipsum dolor sit amet</p> </div> </div> </div>

Lorem ipsum

Lorem ipsum dolor sit amet


set-center, items-between (horizontal)

<div class="flex-row"> <div class="flex-column set-center"> <div class="horizontal items-between"> <p>Lorem ipsum</p> <p>Lorem ipsum dolor sit amet</p> </div> </div> </div>

Lorem ipsum

Lorem ipsum dolor sit amet


INDEX AZ