systematic-css

Recommendations

Info

Optional footer contentHere are the selectors:.Dialog {}.DialogHeader {}.DialogHeader h2 {}.DialogBody {}.DialogBody p {}.DialogFooter {}.DialogFooter p {}Because each of the three sub-widgets is encapsulated in its own namespace, each can be moreeasily developed, tested, and maintained separately of the rest. And each widget specialises injust one thing. The parent Dialog widget would be responsible only for wrapping everything upin a box and positioning it on the page. The other three widgets would need only to focus onpresenting the content of each section of a dialog window.The widgets Dialog, DialogHeader, DialogBody and DialogFooter are clearly related. Butthere's nothing stopping us from combining entirely unrelated widgets to compose complex UIdesigns. Here's the markup for a tabbed interface that is made from lots of different widgets,each developed and maintained independently.PopularJust inEditor's choiceMost popular storiesThis is the titleLorem ipsum dolor sit amet...10 January, 2015This is the titleWidgets 51
Lorem ipsum dolor sit amet...10 January, 2015This is the titleLorem ipsum dolor sit amet...10 January, 2015......Widget inheritanceAnother methodology for composing complex UIs is to have widgets extend from otherwidgets. By way of example, here's another version of a Dialog widget:MessageDescriptionActionHere are the selectors we'd need to style this:.Dialog {}.Dialog h2 {}.Dialog p {}.Dialog button {}Now imagine that we wanted to modify the default presentation of dialogs when the messageis particularly important or requires feedback from the user. One option would be to add amodifier class.Widgets 52
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: Modifiers can also be used to targe
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 and 64: Now there is much less risk that th
Page 65 and 66: Dynamic modifiers - any class that
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

You also want an ePaper? Increase the reach of your titles

Delete template?

Save as template?