CSS

box-sizing

It's useful to be aware of box-sizing which governs how borders are included in div size calculations.

Pseudo elements

  • ​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 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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Diagonal Background</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
#elem-container {
height: 100%;
}
#elem {
position: relative;
}
#elem:before {
content: ""; /* an empty div */
height: 120%; /* with a height settable against parent container */
width: 135%; /* wider than the page so you can't see the edges */
position: absolute; /* outside of the document flow */
z-index: -1; /* and behind the #elem */
display: block;
background-color: lightblue; /* and behind the #elem */
transform: rotate(12deg);
left: -15%; /* with offsets as required */
top: -15%;
}
</style>
</head>
<body>
<div id="elem-container">
<div id="elem">
<p>
Lorem ipsum dolor sit amet, at per iudicabit periculis, an officiis
salutandi vel. Sit an meis adhuc.
</p>
<p>
Lorem ipsum dolor sit amet, at per iudicabit periculis, an officiis
salutandi vel. Sit an meis adhuc.
</p>
<p>
Lorem ipsum dolor sit amet, at per iudicabit periculis, an officiis
salutandi vel. Sit an meis adhuc.
</p>
<p>
Lorem ipsum dolor sit amet, at per iudicabit periculis, an officiis
salutandi vel. Sit an meis adhuc.
</p>
</div>
</div>
</body>
</html>

Diagonal background with before and after

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Page title</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
#elem-container {
height: 100%;
}
#elem {
position: relative;
}
#elem:before {
content: ""; /* an empty div */
height: 100%; /* with a height settable against parent container */
width: 135%; /* wider than the page so you can't see the edges */
position: absolute; /* outside of the document flow */
z-index: -1; /* and behind the #elem */
display: block;
background-color: lightblue; /* and behind the #elem */
transform: rotate(12deg);
left: -15%; /* with offsets as required */
top: -35%;
}
#elem:after {
content: "";
height: 120%;
width: 135%;
position: absolute;
z-index: -2;
display: block;
background-color: darkblue;
transform: rotate(-12deg);
left: -15%;
top: -5%;
}
</style>
</head>
<body>
<div id="elem-container">
<div id="elem">
<p>
Lorem ipsum dolor sit amet, at per iudicabit periculis, an officiis
salutandi vel. Sit an meis adhuc.
</p>
<p>
Lorem ipsum dolor sit amet, at per iudicabit periculis, an officiis
salutandi vel. Sit an meis adhuc.
</p>
<p>
Lorem ipsum dolor sit amet, at per iudicabit periculis, an officiis
salutandi vel. Sit an meis adhuc.
</p>
<p>
Lorem ipsum dolor sit amet, at per iudicabit periculis, an officiis
salutandi vel. Sit an meis adhuc.
</p>
<p>
Lorem ipsum dolor sit amet, at per iudicabit periculis, an officiis
salutandi vel. Sit an meis adhuc.
</p>
<p>
Lorem ipsum dolor sit amet, at per iudicabit periculis, an officiis
salutandi vel. Sit an meis adhuc.
</p>
<p>
Lorem ipsum dolor sit amet, at per iudicabit periculis, an officiis
salutandi vel. Sit an meis adhuc.
</p>
<p>
Lorem ipsum dolor sit amet, at per iudicabit periculis, an officiis
salutandi vel. Sit an meis adhuc.
</p>
</div>
</div>
</body>
</html>