HTML - The mindset

Instead of creating pages, create the system of layouts and components.

Abstract the website into molecules(Components).

Components should be context-free, can be placed in layouts or specific components.

Instead of write similar codes across pages,

<div class="main-nav">...</div>

<div class="profile-nav">...</div>

<div class="product-nav">...</div>

<div class="footer-nav">...</div>

Try to abstract out the real thing,

<div class="nav">...</div>

<div class="nav nav--tabs">...</div>

<div class="nav nav--lists">...</div>

<div class="nav nav--strips">...</div>

The mindset to … … develop layouts

What are layouts?

CSS rules divide the page into sections, serves as containers, hold one or more components.

Layouts should not contain decorative styles (border, background, etc).

Write you layout based on the grid system you have picked, set your float, margin, etc.

Grab a grid system or write one

Bootstrap grid system http://getbootstrap.com/examples/grid/

The 1kb CSS Grid (http://1kbgrid.com/)

The 1200px Grid System (http://1200px.com/)

The Responsive Grid System (http://www.responsivegridsystem.com/)

The Golden Grid System (http://goldengridsystem.com/)

Example(3 columns layout with Bootstrap 3 grid system):

<div class="layout-sample">

    <div class="col-md-4">_placeholder_</div>

    <div class="col-md-4">_placeholder_</div>

    <div class="col-md-4">_placeholder_</div>

</div>

The mindset to … … develop components

A full analysis is a good start, break down pages to categories of components.

Continue the progress, disassemble the component, layout the structure.

Example:

/tabs/

        /tabs-label/

        /tabs-label/

        /tabs-label/

        /tabs-label/