Attsf css kt


Published on

AT&T Storefront CSS Knowledge Transfer

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Attsf css kt

  1. 1. 4 1 1 3 L I N E S O F S T Y L I N G G O O D N E S S AT&T Web Storefront CSS
  2. 2. C L E A N S L A T E CSS Reset
  3. 3. CSS Reset   The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
  4. 4. M A K E I T G O W H E R E I T N E E D S T O G O CSS Layout
  5. 5. Grid Layout Fixed width grid-based layout At 900 pixels wide
  6. 6. Grid Layout Class Width .Col-1 120 .Col-2 276 .Col-3 432 .Col-4 588 .Col-5 744 .Col-6 900 .Col-4 .Col-2
  7. 7. Layout Utility Comparison .Col-1, .Col-2, .Col-3, .Col- 4, .Col-5  Has right margin for column gutter .Col-1L, .Col-2L, .Col-3L, .Col-4L, .Col-5L, .Col-6  No right margin
  8. 8. Class Margin- bottom .Row-H 6 .Row-1 12 .Row-2 24 .Row-3 36 .Row-4 48 .Row-5 60 Grid Layout Row-3
  9. 9. Normal classes Padding used instead for IE margin collapsing issue Internet Explore layout considerations Class Margin- bottom .Row-H 6 .Row-1 12 .Row-2 24 .Row-3 36 .Row-4 48 .Row-5 60 Class padding- bottom .Row-PH 6 .Row-P1 12 .Row-P2 24 .Row-P3 36 .Row-P4 48 .Row-P5 60
  10. 10. Similar Layout Utility Classes  .Row-TX classes (“top”) are the similar except that the margin is applied to the top (i.e. .Row-T1 has margin-top:12px)  .R-X classes (“right”) have a right margin (i.e. .R-1 has margin-right:12px)  .L-X classes (“left”) have a left margin (i.e. .L-1 has margin-left:12px)  .Border-B, .Border-L, .Border-T, .Border-B similarly apply a border around the element’s respective edges
  11. 11. A L O O K A T T H E C S S “ Z - I N D E X ” P R O P E R T Y Stacking Order
  12. 12. Stacking order z-index  Ensures proper layering so that items like menus, popups, modal windows, appear above the content they are supposed to
  13. 13. Stacking order z-index Class z-index .jScrollPaneContainer 1 .jScrollArrowUp 1 .jScrollArrowDown 1 .DropdownControl 3 .GlobalNavigation 4 .SubNavigation 70 .GlobalNavigation .Button 80 #overlay 90 .Popup 100 •Items with a higher z-index will appear above items with a lower z-index
  14. 14. Internet Explorer z-index  IE7 renders the stacking order incorrectly  It reorders the z-index if it’s inside of a “positioned” element  index-bug/
  15. 15. F L O A T I N G G R A P H I C M E T H O D F O R D Y N A M I C C O N T E N T Sliding Doors
  16. 16. Sliding Doors (cont.) Wrapping dynamic content Info
  17. 17. Sliding Doors  Creates flexible interface components  We need to expand the background images to compensate for that growth. We need to expand the background images to compensate for that growth.  SlidingDoors should have a  Wide background image that is positioned to the right;  Overlapping element that has a narrow background image that is positioned to the left and sits on top of the SlidingDoors background image.
  18. 18. Sliding Doors CSS .Button class aligned to the right .Inside class “floating” to the left Markup <span class="Button"> <span class="Inside“> Button Text Here </span> </span>
  19. 19. I T ’ S P R O B A B L Y G O I N G T O M A K E Y O U C R Y Onion Skinning
  20. 20. CSS3 enhancement  Rounded Corners  Drop Shadow  Compliant Browsers -webkit-border-radius: 5px; -moz-border-radius: 5px; -webkit-box-shadow: 0px 0px 18px #555; -moz-box-shadow: 0px 0px 18px #555;
  21. 21. Onion Skinning  To achieve this effect in Internet Explorer we need to use an image with the desired effect applied in a image creation program like Photoshop or Gimp. Rounded rectangle with drop shadow graphic
  22. 22. Our friend Internet Explorer Square Peg, Round Hole <div class="Popup shadow-one PopMinIE" id="appPopup"> <div class="corner-a"></div> <div class="corner-b"></div> <div class="shadow-two"> <div class="shadow-three"> <div class="shadow-four"> Content Here <div class="ClearFix"></div> </div> </div> </div> </div>
  23. 23. Onion Skinning   Multiple layers needed  Each layer reveals part of the graphic
  24. 24. Onion Skinning  Allows for dynamic content that the edges “shrink wrap” to, but it does create a lot of additional markup (Not to scale)
  25. 25. O P T I M I Z I N G C O M M O N G R A P H I C S Sprites
  26. 26. Sprites Sliding doors spriteArrows sprite
  27. 27. Sprites  Reduces HTTP Requests for many individual images  Greatly improves performance 
  28. 28. Sprites “next” button has background-position: -10px -152px “previous” button has background-position:-10px -212px; Set dimension window Arrow Sprite