Mastering CSS Layouts: UI CSS Masterclass short guide

Becoming a “master” of CSS is more than just memorizing selectors. It’s about mastering your workflow. Create efficient, maintainable, smart (sexy) CSS . An organized directory structure for all projects. Begin with meaningful markup. Keep your selectors declarations organized. Elements flow naturally on the page, in the order that they appear in the source. Moves the element by coordinates relative to where it lives within “normal flow”. emoves the element from normal flow and positions by coordinates to the nearest parent element that hasrelative positioning. By default, the element will position to the viewport if no parent exists that has relative positioning.

J I N A B O LT O N

M A S T E R I N G C S S L AYO U T S

Buongiorno!

Mastering C S S

Layouts Once &

for All?

It’s about mastering

your workflow.

A Consistent

Workflow

J I N A B O LT O N

M A S T E R I N G C S S L AYO U T S

Create a development

starter toolkit.

An organized directory structure

for all projects.

js/

css/

i/

J I N A B O LT O N

M A S T E R I N G C S S L AYO U T S

Barebones

A Simple, Usable,

& Clean C S S

Framework

J I N A B O LT O N

M A S T E R I N G C S S L AYO U T S

@import 'reset.css';

@import 'foundation.css';

Optional: Your

Chosen JavaScript

Framework

J I N A B O LT O N

M A S T E R I N G C S S L AYO U T S

Design from the

content out or from

outside in?

Begin with

meaningful markup.

J I N A B O LT O N

M A S T E R I N G C S S L AYO U T S

Write it clean;

keep it clean.

Clarity is beautiful.

Organization

Element Types DOM Hierarchy Style Types

J I N A B O LT O N

M A S T E R I N G C S S L AYO U T S

Declarations

Alphabetical Style Types

Comments are

your friend.

J I N A B O LT O N

M A S T E R I N G C S S L AYO U T S

/* Company Name Typography CSS

*/

/* RESET

GLOBAL TYPOGRAPHY STRUCTURE FORMS

TABLES WIDGETS */

Balance readability

& optimization.

J I N A B O LT O N

M A S T E R I N G C S S L AYO U T S

Debugging

Validate your code.

W 3 C H T M L Validator

http://validator.w3.org/

C S S Validator

http://jigsaw.w3.org/css-validator/

Documentation

Techniques

J I N A B O LT O N

M A S T E R I N G C S S L AYO U T S

The Box Model

Image by Andy Clarke, adapted from the original image created by Jon Hicks

http://www.hicksdesign.co.uk/boxmodel/

J I N A B O LT O N

M A S T E R I N G C S S L AYO U T S

Normal Flow

Elements flow naturally on the page, in the order that

they appear in the source.

Floats

J I N A B O LT O N

M A S T E R I N G C S S L AYO U T S

Floats were not

intended for layout.

Avoid using floats as a

fallback bug fix.

J I N A B O LT O N

M A S T E R I N G C S S L AYO U T S

Positioning

Relative Positioning

Moves the element by coordinates relative to where it

lives within “normal flow”.

J I N A B O LT O N

M A S T E R I N G C S S L AYO U T S

Absolute Positioning

Removes the element from normal flow and positions

by coordinates to the nearest parent element that has

relative positioning By default, the element will

position to the viewport if no parent exists that has

relative positioning.

Fixed Positioning

Removes the element from normal flow and positions

by coordinates to the viewport This element does not

scroll with the rest of the page.

Rounded Corners

C S S + Images Techniques

Consider which of the several techniques fits best.

Do$ your d$ign have a fixed width?

Wi% that always be the c&e?

How about the height?

Could th' change & the co(e( grows shorter/longer?

Fixed width, varied height

J I N A B O LT O N

M A S T E R I N G C S S L AYO U T S

Fixed width, varied height

(long version)

A full-width, short image for the top border.

A full-width, short repeating image for the left

and right borders.

A full-width, short image for the bottom border.

Fixed width, varied height

J I N A B O LT O N

M A S T E R I N G C S S L AYO U T S

Varied width, varied height

A very wide, very tall image for the top and left borders.

A skinny, very tall image for the top right corner and right border.

A very wide, short image for the bottom right corner and bottom border.

A skinny, short image for the bottom left corner.

Varied width, varied height

J I N A B O LT O N

M A S T E R I N G C S S L AYO U T S

A K A

“Navigation Matrix”

J I N A B O LT O N

M A S T E R I N G C S S L AYO U T S

<ul id="menu">

<li id="m-home"><a href="#">Home</a></li>

<li id="m-about"><a href="#">About</a></li>

<li id="m-news"><a href="#">News</a></li>

<li id="m-events"><a href="#">Events</a></li>

<li id="m-links"><a href="#">Links</a></li>

<li id="m-contacts"><a href="#">Contacts</a></li>

</ul>

ul#menu { list-style: none; }

ul#menu li { display: inline; }

J I N A B O LT O N

M A S T E R I N G C S S L AYO U T S

ul#menu li#m-home a { background-position: 0 0; }

ul#menu li#m-about a { background-position: -100px 0; }

ul#menu li#m-news a { background-position: -200px 0; }

ul#menu li#m-events a { background-position: -300px 0; }

ul#menu li#m-links a { background-position: -400px 0; }

ul#menu li#m-contacts a { background-position: -500px 0; }

ul#menu li#m-home a:hover { background-position: 0 -50px; }

ul#menu li#m-about a:hover { background-position: -100px -50px; }

ul#menu li#m-news a:hover { background-position: -200px -50px; }

ul#menu li#m-events a:hover { background-position: -300px -50px; }

ul#menu li#m-links a:hover { background-position: -400px -50px; }

ul#menu li#m-contacts a:hover { background-position: -500px -50px; }

J I N A B O LT O N

M A S T E R I N G C S S L AYO U T S

ul#menu li#m-home.active a{ background-position: 0 -100px; }

ul#menu li#m-about.active a { background-position: -100px -100px; }

ul#menu li#m-news.active a { background-position: -200px -100px; }

ul#menu li#m-events.active a { background-position: -300px -100px; }

ul#menu li#m-links.active a { background-position: -400px -100px; }

ul#menu li#m-contacts.active a { background-position: -500px -100px; }

Negative Margins

J I N A B O LT O N

M A S T E R I N G C S S L AYO U T S

Conditional

comments vs hacks

J I N A B O LT O N

M A S T E R I N G C S S L AYO U T S

Avoid hacks if possible.

Work With the Box Model (not against).

Browsers Change.

If hacks are absolutely necessary, it can be helpful to explain what was done in your C S S comments.

Master your text editor.

J I N A B O LT O N

M A S T E R I N G C S S L AYO U T S

Use version control.

J I N A B O LT O N

M A S T E R I N G C S S L AYO U T S

CSS 3

— Alex Russell

serving of FAIL.”

“

1996

J I N A B O LT O N

M A S T E R I N G C S S L AYO U T S

1997

Candidate Recommendation

J I N A B O LT O N

M A S T E R I N G C S S L AYO U T S

?

C S S 3

Sele%ors Backgrounds & Borders Multi-column Layout

Advanced Layout Grid Positioning Media Queries

J I N A B O LT O N

M A S T E R I N G C S S L AYO U T S

Backgrounds

& Borders

Style any box’s borders and background including

attaching multiple background-images to a

single element.

.addr-bl {

background:

url(a-bl.gif) 100% 0

no-repeat;

}

repeat-x, no-repeat, no-repeat;

background-position:

0 0, 100% 0,

0 100%;

J I N A B O LT O N

M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

M A S T E R I N G C S S L AYO U T S

J I N A B O LT O N

M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

M A S T E R I N G C S S L AYO U T S

J I N A B O LT O N

M A S T E R I N G C S S L AYO U T S

<div class="vcard" >…</div>

.vcard {

border-image:

url("border.png")

30 30 30 30 stretch;

border:

double green 1em;

}

J I N A B O LT O N

M A S T E R I N G C S S L AYO U T S

Multi-column Layout

Making it simpler to create column layouts without

additional markup by using column widths, counts,

gaps and rules.

J I N A B O LT O N

M A S T E R I N G C S S L AYO U T S

J I N A B O LT O N

M A S T E R I N G C S S L AYO U T S

J I N A B O LT O N

M A S T E R I N G C S S L AYO U T S

Grid Positioning

Gives the ability to add invisible grid rules to create

grid layouts (like in books and newspapers), and uses

sizing and new float properties for placing content.

J I N A B O LT O N

M A S T E R I N G C S S L AYO U T S

J I N A B O LT O N

M A S T E R I N G C S S L AYO U T S

J I N A B O LT O N

M A S T E R I N G C S S L AYO U T S

J I N A B O LT O N

M A S T E R I N G C S S L AYO U T S

J I N A B O LT O N

M A S T E R I N G C S S L AYO U T S

Advanced Layout

Aims to fully separate visual layout order from a

document’s content by defining “slots” in a grid in

which content can flow or be placed, or that remain

empty — all without additional markup

a a c d

J I N A B O LT O N

M A S T E R I N G C S S L AYO U T S

Refined sele%ors to target an element based on an

attribute or position in the document flow plus new

pseudo-classes and pseudo-elements.

J I N A B O LT O N

M A S T E R I N G C S S L AYO U T S

Sele%ors

:nth-child(N) :nth-of-type(N) :last-child

:last-of-type :only-of-type :empty

:nth-last-child(N) :nth-last-of-type(N) :first-of-type

:only-child :root

:target

matches elements on the basis of their positions

within a parent element’s list of child elements (from

beginning to end)

J I N A B O LT O N

M A S T E R I N G C S S L AYO U T S

}

tr:nth-child(odd) td {

background: #ecffd9;

}

J I N A B O LT O N

M A S T E R I N G C S S L AYO U T S

matches elements on the basis of their positions

within a parent element’s list of child elements (from

end to beginning)

J I N A B O LT O N

M A S T E R I N G C S S L AYO U T S

matches elements on the basis of their positions

within a parent element’s list of child elements of the

same type

J I N A B O LT O N

M A S T E R I N G C S S L AYO U T S