CSS-only implementations of the Scandinavian countries’ national flags.
Demo
Backstory
Back from 2015’s Mönki Gras conference, its ‘Nordic Craft Culture and Tech’ theme resonated with me. After a couple of days of those ever-present flags with the Scandinavian cross, I think I fell in love with its simplicity and shared history.
Since the flag designs are quite simple and similar, I decided to try to replicate them using only CSS (or Sass, more precisely).
Flags
Currently, all the 5 main Scandinavian flags are available:
- Denmark
- Finland
- Iceland
- Norway
- Sweden
Design
Denmark
A red field charged with a white cross extending to the edges; the vertical part of the cross is shifted to the hoist side. Dimensions: 3:1:3 width / 3:1:4.5 to 3:1:5.25 length. — from Wikipedia
Ratio: 28:37
Vertical proportions: 12:4:12
Horizontal proportions: 12:4:21
Colours: red (Pantone 186C, R:210 G:16 B:52), white
Finland
Sea-blue Nordic cross on white field. — from Wikipedia
Ratio: 11:18
Vertical proportions: 4:3:4
Horizontal proportions: 5:3:10
Colours: white, blue (Pantone 2945C, R:0 G:82 B:165)
Iceland
A white-fimbriated red Nordic cross on a blue field — from Wikipedia
Ratio: 18:25
Vertical proportions: 7:1:2:1:7
Horizontal proportions: 7:1:2:1:14
Colours: blue (Pantone 2945C, R:0 G:82 B:165), white, red (Pantone 1795, R:215 G:31 B:41)
Norway
A white-fimbriated blue Nordic cross on a red field — from Wikipedia
Ratio: 8:11
Vertical proportions: 6:1:2:1:6
Horizontal proportions: 6:1:2:1:12
Colours: red (Pantone 186C, R:210 G:16 B:52), white, blue (Pantone 301, R:0 G:85 B:155)
Sweden
Blue with a yellow/gold Scandinavian cross that extends to the edges of the flag. Dimensions: 5:2:9 horizontally and 4:2:4 vertically. — from Wikipedia
Ratio: 5:8
Vertical proportions: 4:2:4
Horizontal proportions: 5:2:9
Colours: blue (Pantone 301, R:0 G:85 B:155), yellow (Pantone 116C, R:255 G:206 B:0)
Basic technique
- A single HTML element for the flag itself, a
div. - A single class addition will show the flag, like
.flag-norway, for example. - On 2-colours flags, the
::beforepseudo-element is the vertical bar and::afteris the horizontal bar. - On 3-colours flags, a different technique is employed: the vertical bar is
achieved setting a linear gradient as the
<div>’s background, using hard stops to set the limits of each colour; the::afterpseudo-element is reponsible for the inner horizontal bar, and the outer horizontal bar is the::before, with a transparent bit to not cut the vertical bar.
Why not use the same technique for both?
I could, in fact, use the latter technique for both situations (flags with 2 or 3 colours), but I prefer to have two different approaches for two different problems: when 2 pseudo-elements are enough and when you (apparently) need more.
Constraints
Currently, all the dimensions & ratios are dependent on a single dimension,
which is the height of the final flags (identified as $height-global on the
file _base.css). I would like to change this, but I couldn’t find a way to
do so, CSS-only. So, if you want flags with different dimensions, just change
that variable to the height you want, compile the Sass and use the CSS.
Browser compatibility
All flags work on Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+. Flags with three colours (Norway and Iceland) don’t work on IE 8 and 9 because of the gradients technique used. I tried to keep the CSS generated simple and minimal, so if you want to broad the compatibility of this project, checkout CSS-Tricks for more info.
Compile
I have included a Makefile with the following targets:
build— Default action, compiles the Sass code & minifies the resulting CSS.watch— Compiles the Sass code & minifies the resulting CSS, watching the project’s SCSS files for modifications and repeating the process.test— Helps with debugging; runsbuild, openstest/index.html(a kind of playground page) and then runswatch.clean— Removes any disposable folder, likecss/and.sass-cache/.