Skip to content
A collection of pure CSS flags, all single divs.
CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.cache
dist
repo-img
scss updates Feb 13, 2020
.DS_Store
.gitignore
LICENSE
README.md
index.pug
package-lock.json
package.json
yarn.lock

README.md

Single Div Pure CSS Flags

Project Supported By CSSGrid.io Project Supported By Flexbox.io

Using the Library

Instructions for Developers

IMAGE ALT TEXT HERE

How to use the library

Grab the compiled CSS from the ./dist folder

For the purpose of this personal project, first, I have an empty div with the class of "flag"

<div class="flag"></div>

The flag class contains these fixed properties

.flag {
  width: 180px;
  height: 120px;
  overflow: hidden;
  border: 1px solid #efefef;
}

There is a class for each country that you can chain after the .flag class

for example

<div class="flag brazil"></div>

Most of the flags were not possible in a single div, so they are not included, but here are the ones that are:

Class Names
.algeria
.armenia
.austria
.azerbaijan
.bahamas
.bahrain
.bangladesh
.barbados
.belgium
.benin
.bolivia
.botswana
.brazil
.bulgaria
.burkina-faso
.burundi
.cameroon
.central-african-republic
.chad
.chile
.colombia
.comoros
.costa-rica
.cote-d-ivoire
.cuba
.czech-republic
.democratic-republic-of-congo
.denmark
.djibouti
.east-timor
.estonia
.finland
.france
.gabon
.the-gambia
.germany
.ghana
.greece
.guinea
.guinea-bissau
.guyana
.hungary
.iceland
.india
.indonesia
.iran
.iraq
.ireland
.israel
.italy
.jamaica
.japan
.kuwait
.laos
.latvia
.liberia
.libya
.lithuania
.luxembourg
.madagascar
.malaysia
.maldives
.mali
.mauritania
.mauritius
.monaco
.myanmar
.namibia
.nauru
.nepal
.the-netherlands
.niger
.nigeria
.north-korea
.norway
.pakistan
.palau
.panama
.peru
.phillippines
.poland
.qatar
.republic-of-china
.republic-of-congo
.romania
.russia
.rwanda
.saint-kitts-and-nevis
.saint-lucia
.sao-tome-and-principe
.senegal
.seychelles
.sierra-leone
.somalia
.south-sudan
.sudan
.suriname
.sweden
.switzerland
.syria
.tanzania
.thailand
.togo
.tonga
.trinidad-and-tobago
.tunisia
.turkey
.ukraine
.uae
.the-united-kingdom
.vietnam
.western-sahara
.yemen

Instructions for Developers

I am using Pug, Sass and Parcel

Folder Structure is simple.

├── node_modules
├── scss
    ├── flags
        ├── _a.scss
                |
        ├── all partials a - y
                |
        ├── _y.scss
    ├── _base.scss
    ├── _mixins.scss
    ├── _variables.scss
    ├── style.css
├── .gitignore
├── index.pug
├── package-lock.json
├── package.json
├── README.md

To install node modules run

npm install

I am using Parcel.

parcel index.pug

will start a local server and watch over sass and pug files

parcel build index.pug

will publish the build to ./dist folder

If you want to contribute, feel free to make a pull request. Or if you see any issues, you can open an issue.


Twitter: @dhanishgajjar

Instagram: @dhanishgajjar

You can’t perform that action at this time.