inuitcss + bemit

inuitcss.md

InuitCSS

File Organization

An explanation of ITCSS.

• Settings: Used with preprocessors and contains font, color definitions, etc.

  • core:
    • inuit-global-font-size
    • inuit-global-line-height
    • inuit-oldIE
    • inuit-global-spacing-unit
    • inuit-global-spacing-unit-factory-tiny
    • inuit-global-spacing-unit-factory-small
    • inuit-global-spacing-unit-factory-large
    • inuit-global-spacing-unit-factory-huge

• Tools: Globally used mixins and functions. It's important not to output any CSS in the first 2 layers.

  • clearfix:
    • inuit-clearfix()
  • font-size:
    • inuit-font-size($font-size, $line-height, $important)
  • hidden:
    • inuit-hidden-visually()
  • rem:
    • inuit-rem($value)
    • inuit-rem($property, $value)

• Generic: Reset and/or normalize styles, box-sizing definition, etc. This is the first layer which generates actual CSS.

  • box-sizing
  • normalize
  • reset
  • shared

• Elements: Styling for bare HTML elements like (H1, A, etc). These come with default styling from the browser so we can redefine them here.

  • headings:
    • $inuit-font-size-h1
    • $inuit-font-size-h2
    • $inuit-font-size-h3
    • $inuit-font-size-h4
    • $inuit-font-size-h5
    • $inuit-font-size-h6
  • images
  • page
  • tables

• Objects: Class-based selectors which definite undecorated design patterns, for example media object known from OOCSS.

  • block
  • box
  • crop:
    • $inuit-crops
  • flag
  • layout:
    • $inuit-use-markup-fix
  • list-bare
  • list-inline:
    • $inuit-list-inline-delimiter
  • media
  • pack
  • ratio:
    • $inuit-ratios
  • tables
  • wrapper:
    • $inuit-wrapper-width

• Components: Specific UI components. This is where the majority of our work takes place and our UI components are often composed of Object and Components

• Trumps: Utilities and helper classes with ability to override anything which goes before in the triangle, eg. hide helper class.

  • clearfix
  • headings
  • hide
  • print
  • spacing:
    • $inuit-spacing-directions
    • $inuit-spacing-properties
    • $inuit-spacing-sizes
  • widths:
    • $inuit-fractions
    • $inuit-offsets
    • $inuit-widths($columsn, $breakpoint)

BEMIT Naming Convention

CSS namespacing is important.

• o-: Signify that something is an Object, and that it may be used in any number of unrelated contexts to the one you can ucrrently see it in. Making modifications to these types of class could potentially have knock-on effects in a lot of other unrelated places. Tread carefully

• c-: Signify that something is a Component. This is a concrete, implementation-specific peice of UI. All of the changes you make to its styles should be detectable in the context you're currently looking at. Modifying these styles should be safe and have no side effects.

• u-: Signify that this class is a Utility class. It has a very specific role (often providing only one declaration) and should not be bound onto or changed. It can be reused and is not tied to any specific piece of UI. You will probably recognize this namespace from libraries and methodoligies like SUIT.

• t-: Signify that a class is responsible for adding a Theme to a view. It lets us know that UI Components' current cosmetic appearance may be due to the presence of a theme.

• s-: Signify that a class creates a new styling context or Scope. Similar to a Theme, but not necessarilty cosmetic, these should be used sparingly - they can be open to abuse and lead to poor CSS if not used widely.

• is-, has-: Signify that the pieces of UI in question is currently styled a certain way because of a state or condition. This stateful namespace is gorgeous, and comes from SMACSS. It tells us that the DOM currently has a temporary, optional, or short-lived style applied to it due to a certain state being invoked.

• _: Signify that this class is the worst of the worst - a hack! Sometimes, although incredibly rarely, we need to add a class in our markup in ourder to force something to work. If we do this, we need to let others know that this class is less than ideal, and hopefully temporary (i.e. do not bind onto this).

• js-: Signify that this piece of the DOM has some behavior acting upon it, and that JavaScript binds onto it to provide that behavior. If you're not a developer working with JavaScript, leave these well alone.

• qa-: Signify that a QA or Test Engineering team is running an automated UI test which needs to find or bind onto these parts of the DOM. Like the JavaScript namespace, this basically just reserves hooks in the DOM for non-CSS purposes.