/stylus

  • core Home to the variables that power Opal Coast in your app
  • layout Basic layout rules for the main elements of each page — usually those appearing in the master page
    • _body.styl The core elements of HTML that often begin a stylesheet — html, body, a etc.
    • _header.styl The first block element of the page, containing the logo and main nav
    • _nav.styl The top-level navigation throughout the app, expressing its information architecture
    • _content.styl Everything between the header and footer — the meat & potatoes of the page
    • _footer.styl The last block element of the page, usually containing credits or a reduced nav
  • modules Elements that can visually and/or structurally be used throughout the app
    • core Every app will use these modules, so they've earned their own folder
      • _typog.styl Definitions for the standard typographic elements (h1–5, p) using variables from type
      • _col.styl Defintions for a responsive relative grid system that defines in-page layout for Halsbury apps
      • _forms.styl input, select, textarea & related input styles
      • _buttons.styl Related to forms, defining the styles and variations of call-to-action links & form submit elements
    • _module.styl Your module here…
  • pages Collections of or variations on modules specific to pages of the app, or totally unique code
    • _page.styl Your page here…
  • vendors
    • _slick.styl The last slider you'll ever need
  • styles.styl Where it all comes together. Rename as appropriate to project & reference .css version.