Professional CSS3

Gathering other reusable mixins

What we need is a bunch of useful and reusable mixins. What can be additionally helpful? Let's think:

• Primitives
• Inline lists

Primitives

As you can remember from one of the previous chapters, we have been using primitives. List of mixins which creates primitives can be very useful and helpful part of our framework. We will we have mixins for:

• Rectangle (with and without a fill)
• Circle/ring
• Triangle

Let's have a quick reminder:

=rectangle($w, $h, $c) width: $w height: $h background: $c =square($w, $c) width: $w height: $w background: $c =circle($size, $color) width: $size height: $size border-radius: 50% background: $color =ring($size, $color, $width) width: $size height: $size border-radius: 50% border: $width solid $color ...