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:

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