CSS part 2 Outro

Some CSS Properties z-index: auto | <integer> Controls stacking elements position: fixed | absolute | static | relative | sticky Sticky is experimental (for now) clear: none | left | right| both

Multiple Column Layout Use floats for layout Use divs with explicit widths and floats specified to achieve multiple column layout Use percentages to achieve fluid design Use max-width and min-width to restrict stretching and shrinking of content Use margin to center divs

Transitions State changes usually occur instantly Transitions exist to smooth out the change Four properties need to be defined: CSS property to change (transition-property) How long transition takes (transition-duration) How the transition accelerates (transition-timing-function) Whether there’s a pause before transition starts (transition-delay)

Transitions Shorthand syntax: transition: property duration timing-function delay; Transition multiple properties by separating values for each property with a comma

Transform

Transform Transform: rotate(angledeg) | translate(xpx,ypx) | scale(z) | skew(xdeg,ydeg); You can apply multiple transfroms by spacing functions, eg: transform: rotate(90deg) scale(1.5) skew(30deg, 40deg);

Keyframes Animation Transitions define two states (start and end) only Intermediate states calculated automatically Programmer can explicitly define intermediate states using @keyframes rule Example: DO IT YOURSELF

CSS Reset Browsers (User Agents) provide their own style sheet Users may want to override this style sheet for consistency This is achieved using a ‘CSS Reset’ Many reset style sheets exist. Find some

CSS Image Replacement Replace text with image when no appropriate font exists Multiple approaches exist #tmp{ Text-indent: 100%; overflow: hidden; whitespace: nowrap; }

CSS Sprites Use image replacement technique to improve page performance Load one large image instead of loading several smaller ones Use bakcground-position property and image replacement techniques to display the correct image Example: Do it yourself

SASS & LESS Extension to CSS language Add variables, maths, nesting and mixing in rules Need to be compiled to native css Reduce production SASS; sass-lang.com LESS; lesscss.org

Styling Forms Forms using HTML exclusively are ugly Little CSS is enough to see a drastic improvement Properly aligned forms increase user engagement

Styling Forms Start with basic style: block level properties, clearing floats Align labels by using float, text-align, and making the label block-level Fix fieldsets (eg removing border) and style buttons appropriately

Styling tables border-collapse: separate | collapse border-spacing: horizontalpx verticalpx empty-cells: show | hide | inherit Individual cells can be styled as necessary

Responsive Web Design Page layout adapts to available screen size

Responsive Web Design Fluid Layout Flexible images Media Queries Use percentage when defining widths Flexible images Img{max-width: 100%;} Media Queries Deliver styles based on media (screen, mobile,…)

Responsive Web Design Start with setting viewport in head element using meta tag <meta name="viewport" content="width=device-width, initial-scale=1"> This sets the viewport to the width of the device (mobile or desktop)

Responsive Web Design Media Queries start with @media followed by media, like screen, followed by condition @media screen and (min-width:480px;){ /*mobile specific styles here*/ } This media query targets screens that have a viewport min-width of 480px (bigger than mobile devices)

Responsive Web Design Strategies: Mobile first approach; design for mobile and style to scale Usually RWD have two layouts; mobile and desktop. Some include a 3rd for tablets There is an increasing array of devices with different widths. This is why developers are moving away from px in favour of em when defining media queries (Future proofing)

Conclusions CSS is sometimes enough for RWD, other times JavaScript may be necessary When the user experience varies greatly between mobile and desktop, developing two different sites may be better than RWD This is an introduction. The web is the ultimate resource for knowledge expansion