CSS-only implementations of the Scandinavian countries’ national flags.
CSS Makefile
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist
scss
test
.gitignore
LICENSE
Makefile
README.md

README.md

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 ::before pseudo-element is the vertical bar and ::after is 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 ::after pseudo-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; runs build, opens test/index.html (a kind of playground page) and then runs watch.
  • clean — Removes any disposable folder, like css/ and .sass-cache/.

Further reading