Prototyping with HTML and CSS

Slide 1

Slide 1 text

Prototyping with  HTML & CSS Mike Aparicio User Interface Engineer  maparicio@groupon.com @peruvianidol

Slide 2

Slide 2 text

! codepen.io

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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  Link to groupon.com

Slide 7

Slide 7 text

! Hello, World

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

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

•

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

Typography

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

Images

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

Forms

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

Default Email URL Phone Date Contextual Keyboards

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

Tables

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

Container Elements

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

The Box Model

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

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 */

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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)

Slide 49

Slide 49 text

Precedence • Inline styles take highest precedence. 

• Styles in the head of the document take the next highest precedence. 

    p { color: black; }    • Styles linked from an external ﬁle take the lowest precedence.     

Slide 50

Slide 50 text

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.

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

Floats

Slide 61

Slide 61 text

No content

Slide 62

Slide 62 text

No content

Slide 63

Slide 63 text

No content

Slide 64

Slide 64 text

No content

Slide 65

Slide 65 text

No content

Slide 66

Slide 66 text

No content

Slide 67

Slide 67 text

No content

Slide 68

Slide 68 text

No content

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

Absolute Positioning • Positioned relative to the first parent element with position other than static (default); normally • 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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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 (

Slide 73

Slide 73 text

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 •

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

Media Queries

Slide 76

Slide 76 text

No content

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

CSS Methodologies

Slide 79

Slide 79 text

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/

Slide 80

Slide 80 text

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/

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

Putting it All Together

Slide 85

Slide 85 text

No content

Slide 86

Slide 86 text

Step 1: Semantic Markup

Slide 87

Slide 87 text

No content

Slide 88

Slide 88 text

No content

Slide 89

Slide 89 text

No content

Slide 90

Slide 90 text

Step 2: Look for Patterns

Slide 91

Slide 91 text

No content

Slide 92

Slide 92 text

Step 3: Add Additional Structure

Slide 93

Slide 93 text

No content

Slide 94

Slide 94 text

No content

Slide 95

Slide 95 text

No content

Slide 96

Slide 96 text

No content

Slide 97

Slide 97 text

Step 4: Style Content

Slide 98

Slide 98 text

No content

Slide 99

Slide 99 text

No content

Slide 100

Slide 100 text

No content

Slide 101

Slide 101 text

No content

Slide 102

Slide 102 text

No content

Slide 103

Slide 103 text

Step 5: Add Layout Styles

Slide 104

Slide 104 text

No content

Slide 105

Slide 105 text

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)

Slide 106

Slide 106 text

Thank You!