Karen Menezes works towards an open, adaptive web that is accessible to all. She has an inexplicable love for CSS and responsive user interfaces. In her downtime, she loves urban gardening, dancing, cooking and filing CSS browser bugs. You can connect with her
Variables are the core reference for SASS Projects. Badly architected preprocessor code is much harder to debug and maintain than a large CSS file created with basic structure and common sense.
property is your ticket to shape-shifting the monotonous, boxy layouts traditionally associated with flat, responsive design.
You will begin to think outside the box
, literally, and hexagons, stars and octagons will begin to take form on your web pages. Once you get your hands dirty with
, there’s no end to the shapes you can generate, simply by tweaking a few values. While the focus of this article is on
using polygons with CSS, all of the demos provide a reference to an inline SVG, in order to gain additional support on Firefox. Generating a
clipped shape is trivial once you have created a responsive shape with CSS’
. We’ll look at this in detail later.
Although the syntax might be initially confounding, flexbox lives up to its name. It creates intelligent boxes that are stretchable, squeezable and capable of changing visual order. It provides simple solutions to layout paradigms that CSS has always struggled with: vertical centering and equal heights.