dhanishgajjar / css-flags

A collection of pure CSS flags, all single divs.

Single Div Pure CSS Flags

Using the Library

Instructions for Developers

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

css-flags's Issues

No Canada Flag?

Canada is very big important country, please add

Add Indian flag

Indian flag 🇮🇳 is missing from the collection, please add it. ☺️

[Feature request] Country selectors as alpha 2 codes

It would massively help automation to have the country CSS selectors as their alpha 2 code.

Here is the list: https://www.iban.com/country-codes

Can we have flag of "India" please?

[Feature request] Publish as an NPM package