CSS tips and tricks..

In no particular order, just as and when I find them.

margin:auto for an element where the parent has display:flex enabled also centers vertically. In the horizontal margin:auto lays out the elements evenly spaced - see the heart example below.

This is centred vertically and horizontally.

The other way to do this which is certainly easier to read and understand is to apply the instruction to the flexbox container:

  justify-content: center; /**center on the main axis**/
  align-items:center; /**center on the cross axis**/
1
2

Or one could use align-self:center and justify-self:center on the child of the flexbox container.

Perculiar thing - it seems possible to override alignment on the cross-axis for individuals items, but it is not possible to override the justification once it has been established.

Free Code Camp Applied Visual Design Section

Here is something based on lesson on freecodecamp.org - a heart with just css (changed units to em from px). It uses a square block of colour which is rotated 45 degrees to a diamond transform: rotate(-45deg). The ::before and ::after pseudo elements are circles of the same colour (border-radius:50% creates a circle). It is then simply a matter of positioning the circles to overlap the diamond.

The examples above use style hoisting. We can just write some html inside the markdown file, but to apply a style to it using some inline css which applies just to this page (vue component when built) we need a style module and a vue directive to use that style.

<p :class="$style.demo"><p :class="$style.example"></p></p>
1
<style module>
.demo {
  display: flex;
  height: 15vh;
  border-style:solid;
  border-width:0.1em;
  border-color:green;
  border-radius: .5em;
}
.example {
  color: green;
  margin: auto;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

The square below is using an infinite css animation loop through the colours of the rainbow (more or less). Its an extension of this lesson.

This next one is a really crude bouncing ball using the top and left positions in the @keyframes definition. It also uses calc() to subtract the width of the ball from 100% to make sure the ball does not escape the bounds of the box. The bouncing does not correspond to reality - its just playing around with movement.

In addition to vw and vh which are familiar and easy to use, there is also vmin and vmax which use the smaller or larger of viewport height/width respectively.

Free Code Camp CSS Grid

One gotcha noted is that if using grid-area on a grid-item where there is not area template on the grid-container, the four values are horizontal line start, vertical line start, horizontal line end, vertical line end. For example this is the first two rows intersection with the last two columns (of a three by three grid).

grid-area: 1/2/3/4;
1