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
C L E A N S L A T E
CSS Reset
CSS Reset
 http://meyerweb.com/eric/tools/css/reset/
 The goal of a reset stylesheet is to reduce browser inconsistencie...
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
Grid Layout
Fixed width
grid-based layout
At 900 pixels wide
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
Layout Utility Comparison
.Col-1, .Col-2, .Col-3, .Col-
4, .Col-5
 Has right margin for
column gutter
.Col-1L, .Col-2L, ....
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
Normal classes
Padding used instead for
IE margin collapsing issue
Internet Explore layout considerations
Class Margin-
bo...
Similar Layout Utility Classes
 .Row-TX classes (“top”) are the similar except that the
margin is applied to the top
(i.e...
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
Stacking order z-index
 Ensures proper layering so
that items like menus,
popups, modal windows,
appear above the content...
Stacking order z-index
Class z-index
.jScrollPaneContainer 1
.jScrollArrowUp 1
.jScrollArrowDown 1
.DropdownControl 3
.Glo...
Internet Explorer z-index
 IE7 renders the stacking order incorrectly
 It reorders the z-index if it’s inside of a “posi...
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
Sliding Doors (cont.)
Wrapping dynamic content
http://www.alistapart.com/articles/slidingdoors/More Info
Sliding Doors
 Creates flexible interface
components
 We need to expand the background
images to compensate for that
gro...
Sliding Doors
CSS
.Button class aligned to the right
.Inside class “floating” to the left
Markup
<span class="Button">
<sp...
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
CSS3 enhancement
 Rounded Corners
 Drop Shadow
 Compliant Browsers
-webkit-border-radius: 5px;
-moz-border-radius: 5px;...
Onion Skinning
 To achieve this effect in
Internet Explorer we
need to use an image
with the desired effect
applied in a ...
Our friend Internet Explorer
Square Peg, Round Hole
<div class="Popup shadow-one PopMinIE" id="appPopup">
<div class="corn...
Onion Skinning
 http://www.alistapart.com/articles/onionskin/
 Multiple layers needed
 Each layer reveals part of
the g...
Onion Skinning
 Allows for dynamic content that
the edges “shrink wrap” to, but it
does create a lot of additional
markup...
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
Sprites
Sliding doors spriteArrows sprite
Sprites
 Reduces HTTP Requests for many individual images
 Greatly improves performance
 http://www.alistapart.com/arti...
Sprites
“next” button has background-position: -10px -152px
“previous” button has background-position:-10px -212px;
Set di...
Upcoming SlideShare
Loading in...5
×

Attsf css kt

360

Published on

AT&T Storefront CSS Knowledge Transfer

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
360
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
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  http://meyerweb.com/eric/tools/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  http://brenelz.com/blog/squish-the-internet-explorer-z- 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 http://www.alistapart.com/articles/slidingdoors/More 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  http://www.alistapart.com/articles/onionskin/  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  http://www.alistapart.com/articles/sprites
  28. 28. Sprites “next” button has background-position: -10px -152px “previous” button has background-position:-10px -212px; Set dimension window Arrow Sprite
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×