Prototyping with HTML and CSS

Prototyping with  HTML & CSS Mike Aparicio User Interface Engineer 
[email protected] @peruvianidol

! codepen.io

Front-End • HTML = Content (what is means) • CSS
= Presentation (what it looks like) • JavaScript = Behavior (what it does)

HTML • HyperText Markup Language • Document Object Model (DOM)
• An outline of content • Tags give elements semantic meaning  This is a paragraph. • Attributes provide additional information  <a href=“http://groupon.com”>Link to groupon.com</a>

! Hello, World

HTML Formatting • Indentation is not necessary but is crucial
for legibility • Whitespace outside of elements will not be rendered • Tags are case insensitive but all lowercase is the norm • Quotes are not necessary around attributes but are the norm • Make sure elements are nested properly  This is properly nested  This is not properly nested • <!-‐-‐ Use comments liberally -‐-‐>

Typography

Images

Default Email URL Phone Date Contextual Keyboards

Tables

Container Elements

HTML5 Elements • header • footer • section • article
• ﬁgure • ﬁgcaption • aside

CSS • Cascading Style Sheets • Describes the visual properties
of elements • Uses element, class and ID selectors to target elements in the DOM • Browsers have limited default styles for each element

The Box Model

Vendor Prefixes • -webkit- (Chrome, Safari, Blackberry) • -moz- (Firefox)
• -ms- (Internet Explorer) • -o- (Opera)

A CSS Rule p {  font-‐size: 18px;  
line-‐height: 1.5;  font-‐weight: bold;  font-‐style: italic;  font-‐family: OpenSans, ‘Helvetica Neue’, Arial, sans-‐serif;  color: #555;  } /* Here’s a comment */

CSS Selectors • * (Universal selector) • .class (class selector)
• #id (id selector) • x (element selector) • x y (descendant selector) • x + y (adjacent selector) • x > y (direct children selector) • x ~ y (sibling combinator) • x[attr] (attribute selector) • x[attr=“value”] (matches attribute) • x[attr*/^/$=“value”] (regex attribute) • x:hover (pseudo-selector) • x:not(selector) (negation selector) • x::pseudoElement (pseudo element selector) • x:nth-child(n) (nth-child selector) • x:nth-of-type (nth-of-type selector) http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048

Generated Content • x:before, x:after • Creates an element before
or after an existing one that doesn’t appear in the markup. (content: “?”) • Lots of creative uses - clearﬁx, carats, layered content, icon fonts, etc. • Should have no semantic meaning or functional use

CSS Properties margin padding height width border background font-family font-size
font-weight line-height color letter-spacing word-spacing word-wrap white-space text-align text-transform text-decoration text-overﬂow text-shadow box-shadow opacity display visibility position overﬂow z-index list-style transform transition box-sizing cursor min-height max-height min-width max-width

CSS Values • Can include one or more values depending
on property • Many properties can combine multiple properties  (ex. font, margin, padding, background, border) • Some values may include shorthand  margin: 10px 10px 10px 10px (top, right, bottom, left)  margin: 10px 10px (top/bottom, right/left)  margin: 10px (all sides)

Precedence • Inline styles take highest precedence.  
• Styles in the head of the document take the next highest precedence.  <head>  <style>  p { color: black; }  </style>  </head> • Styles linked from an external ﬁle take the lowest precedence.  <head>  <link href=“style.css” rel=“stylesheet”>  </head>

Specificity • Element selectors affect every element of that type
• Class selectors override element selectors; multiple elements with a class can exist in a document. • ID selectors override element AND class selectors; only one element with an ID can exist in a document. • Adding !important to a declaration overrides everything.

Specificity Tips • Always link to styles externally • Use
class selectors instead of element selectors whenever possible • Never use IDs to style elements • Limit nesting of selectors as much as possible • Never use !important to override styles

Positioning • Just use tables! • Floats • Relative Positioning
• Absolute Positioning • Fixed Positioning • Flexbox

Floats

Relative Positioning • Element is positioned relative to its normal
position • Reserved space for element is preserved within the document ﬂow • Can overlap other elements • Set order of overlapping elements using z-index property • If z-index is not set, element positioned last in HTML will appear on top • Often used as container for absolutely positioned elements

Absolute Positioning • Positioned relative to the first parent element
with position other than static (default); normally <html> • Removed from normal flow of document; can overlap other elements • Can be used in place of floats, which can be problematic • Must ensure proper space so elements don’t unintentionally overlap

Fixed Positioning • Positioned relative to the browser window •
Does not move when window is scrolled • Removed from normal ﬂow of document; can overlap other elements • Useful for navigation

Flexbox • Newfangled layout system in CSS3 • Gives containers
the ability to alter their dimensions to best ﬁll the available space • Good for distributing space evenly within, between or around elements • Supported in most current browsers (<IE 10 not supported) • http://devbryce.com/site/ﬂexbox/

CSS Transitions • Animates between states of CSS properties •
transition: property duration timing-function delay • transition: opacity .3s ease-‐in-‐out .5s; • Pretty good support in current browsers without vendor preﬁxes • <IE10 fuggedaboutit

CSS Transforms • Manipulates elements in a 2D or 3D
space • transform: transform-function • transform: rotate(90deg); • Decent browser support with vendor preﬁxes • 3D transforms less supported • Often used in conjunction with CSS transitions • Examples: sliding navigation, ﬂip cards, image galleries

Media Queries

Media Queries • Allow for styles to take affect when
certain client criteria are met • width, height, aspect ratio, resolution, media type (screen/print) • @media screen and (max-‐width: 768px) { } • “The ﬁrst media query is no media query.” - Yoda? • Not supported in IE8 and below

CSS Methodologies

SMACCS • Scalable Modular Architecture for CSS • Divide CSS
into base, layout, module, state and theme rules • Base - default element styles • Layout - grid and positioning styles • Module - small chunks of reusable styles • State - styles affected by behavior (JavaScript) • Theme - variations on existing styles • http://smacss.com/

Atomic Design • Style modules in increasing order of complexity
• Atoms - individual elements, basic building blocks • Molecules - simple combinations of atomic elements (ex. search form) • Organisms - a complex, distinct section of an interface (ex. header) • Templates - groups of organisms combined to create pages (low-fi) • Pages - specific instances of templates (high-fi) • http://bradfrostweb.com/blog/post/atomic-web-design/

OOCSS • Object-Oriented CSS • Identify and create reusable patterns
independent of each other • Separate structure and skin, container and content • https://github.com/stubbornella/oocss/wiki

CSS Frameworks • Twitter Bootstrap, Zurb Foundation, Groupon Interface Guidelines
(ahem) • Set of base CSS and JS that provide minimally designed components for fast, high-ﬁdelity prototyping • Include responsive grid, form, table, button styles, JS components such as modals and alerts • Can cause sites to look the same (which can be good or bad) • Often include more code than a single project needs

jQuery • JS library that simpliﬁes navigating the DOM and
selecting elements • Useful for toggling classes to trigger CSS changes on interactions • Adds some overhead (~32k) but widely used • Lightweight alternatives exist (Zepto ~10k) • jQuery is JavaScript but JavaScript is not jQuery

Putting it All Together

Step 1: Semantic Markup

Step 2: Look for Patterns

Step 3: Add Additional Structure

Step 4: Style Content

Step 5: Add Layout Styles

Resources • Sublime Text (http://www.sublimetext.com/) • w3 Schools (http://www.w3schools.com/) •
CSS Tricks (http://css-tricks.com/) • Can I Use (http://caniuse.com/) • A Book Apart (http://www.abookapart.com/) • Developing with Web Standards, John Allsopp (http://idol.pe/OsT9gl)

Thank You!

Prototyping with HTML and CSS

Prototyping with HTML and CSS

More Decks by Mike Aparicio

Other Decks in Design

Featured

Transcript