Awesome Open Source
Awesome Open Source

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


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
html (10,843
css (7,240
library (1,298
scss (657
design (372
icons (287
css3 (200
gulp (199
pug (86
flags (26
illustration (17

Find Open Source By Browsing 7,000 Topics Across 59 Categories