Diagonal Background

# CSS ## box-sizing It's useful to be aware of [box-sizing](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing) which governs how borders are included in `div` size calculations. ## Pseudo elements * [Pseudo elements](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements) are worth remembering, they let you style an element based on some property of that element (e.g. `::first-line`), or add elements to the DOM in a suitable position (e.g. `::before`, `::after`). * Proper syntax is `::selector`, however `:selector` seems to be more universally supported ## Tachyons [Tachyons](http://tachyons.io) is an excellent 'functional CSS' library in which each class name has one responsibility. For example the Tachyons class `.ba` stands for `border-style:solid;border-width:1px`, there would not be a Tachyons class called e.g. `.button-active` as that would encompass many different - design specific - CSS functions. ### Tachyons Media Queries Tachyons classes have suffixes: * `[no-suffix]` = applies for all screensizes, and hence is the 'mobile' version * `-ns` = not-small (min-width: 30em) * `-m` = medium (min-width: 30em) and (max-width: 60em) * `-l` = large (min-width: 60em) ## Diagonal block colour background ```markup Diagonal Background

Lorem ipsum dolor sit amet, at per iudicabit periculis, an officiis salutandi vel. Sit an meis adhuc.

``` ## Diagonal background with before and after ```markup Page title

Lorem ipsum dolor sit amet, at per iudicabit periculis, an officiis salutandi vel. Sit an meis adhuc.

```