systematic-css

Recommendations

Info

child selectors and pseudo classes (e.g. .Headline > h1 and :first-of-type) are best avoided,too. They create a tight coupling between HTML and CSS, making it that bit harder to extendand modify widgets in the future.Dynamic modifiersWidgets can be optionally enhanced with dynamic behaviours. Imagine a widget calledSlideshow that displays a series of images. By default, when the HTML is initially rendered, allof the images in a slideshow might be visible, presented one after the other in a vertical layout.The markup might look something like this:Then a JavaScript program called Slideshow.js could come along and progressively enhancethis, by dynamically applying certain classes that CSS can use to restyle and animate theslideshow. This is what the markup might look like at one moment in time:Modifiers 61
Dynamic modifiers – any class that is dynamically switched in and out of a web page by aclient-side JavaScript program – should be prefixed with "is-" followed by a verb or noun thatdescribes the component's current state. Dynamic modifiers that belong to a particular widgetshould be further prefixed with the widget's name (written lower case) and encapsulated inthe widget's namespace..SideNav.slideshow-is-opening {}.SideNav.slideshow-is-open {}.SideNav.slideshow-is-closing {}.SideNav.slideshow-is-closed {}Classes that are added to a document for the purpose of feature detection should be prefixedwith "supports-", for example "supports-<strong>css</strong>boxsizing".Modifiers 62
Page 1 and 2:
SystematicCSSKieran Potts
Page 3 and 4:
Contents1 Introduction6 The princip
Page 5 and 6:
There is hope. The Shadow DOM - par
Page 7 and 8:
Web design methodologies benefit al
Page 9 and 10:
The principlesof good CSSAll web de
Page 11 and 12:
vary from project to project. But o
Page 13 and 14: to figure out exactly what things t
Page 15 and 16: Defensive programmingIn many of the
Page 17 and 18: Now, in a large project it is entir
Page 19 and 20: Single responsibility principleIt i
Page 21 and 22: }color: hsl(0, 0%, 100%);*.shout {f
Page 23 and 24: And that's very handy. Once a class
Page 25 and 26: Take CSS. The easiest, most practic
Page 27 and 28: of the default presentation of HTML
Page 29 and 30: Class namesIn the Systematic CSS we
Page 31 and 32: We can work out from their names an
Page 33 and 34: (which renders a navigation menu).
Page 35 and 36: Classes added to a document for the
Page 37 and 38: LayoutThe first stage of a new web
Page 39 and 40: --display--float--position--top, bo
Page 41 and 42: Usage:Modifiers are explained in gr
Page 43 and 44: ElementsThe next stage is to set th
Page 45 and 46: @media screen and (min-width: 37.5r
Page 47 and 48: WidgetsHTML's extensive suite of na
Page 49 and 50: HomeAboutLearnExtendShareSearchSear
Page 51 and 52: January 2015NextMonTueWedThuFriSatS
Page 53 and 54: Modifiers can also be used to targe
Page 55 and 56: Lorem ipsum dolor sit amet...10 Jan
Page 57 and 58: ModifiersWhen something needs to be
Page 59 and 60: Element modifiersHTML's native elem
Page 61 and 62: Modifiers can also target specific
Page 63: Now there is much less risk that th
Page 67 and 68: In large projects I will have one s
Page 69 and 70: ReferencesAtomic Designhttp://bradf
Page 71: Object-Oriented CSS Frameworkhttp:/
show all

systematic-css

Create successful ePaper yourself

Delete template?

Save as template?