Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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

About

CSS-only implementations of the Scandinavian countries’ national flags.

Topics

Resources

License

You can’t perform that action at this time.