systematic-css

Recommendations

Info

Not all content needs to be encapsulated in widgets. It could be. But it doesn't need to be. Thecontent inserted within layout sections can be marked up as a mix of widgets and stand-aloneelements. Consider the following example. There is one widget, "ArticleHeadline", whichencapsulates an and that represent the main headline and trailer text for an article.But the main copy and opening image of the article is placed directly inside the "MAIN" layoutsection. This content will be styled exclusively with the default properties set for the and element types. Actually, the presentation of the element is extended by applicationof a global modifier, "float-right".The simplest way to design websitesA new design system for modern web interfacesLorem ipsum...Widget modifiersThe default presentation of widgets can be tweaked and extended by application of additionalmodifier classes. Example:.Dialog {border: 1px solid hsl(0, 0%, 60%);left: 50%;margin-left: -400px;margin-top: -40px;padding: 2rem;position: absolute;top: 50%;width: 800px;}.Dialog.dialog-alert { border-color: hsl(15, 100%, 50%); }Widgets 49
Modifiers can also be used to target specific instances of an element within a widget structure..Dialog p {padding: 0.5rem 1rem;}.Dialog p.dialog-header {border-bottom: 1px solid hsl(0, 0%, 60%);font-weight: bold;}Usage:Alert!{Alert message...}OK>These techniques are covered in greater detail in the next chapter.Nested widgetsBig, complex widgets like popup dialogs can still be pretty tricky to manage. One solution is tobreak them up into lots of smaller widgets.Consider the following (simplified) example. A widget called "Dialog" is composed fromthree other sub-widgets: "DialogHeader", "DialogBody" and "DialogFooter".Popup titlePopup messageWidgets 50
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: January 2015NextMonTueWedThuFriSatS
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 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:/

systematic-css

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

Delete template?

Save as template?