https://github.com/dhanishgajjar/css-flags

A collection of pure CSS flags, all single divs.
https://github.com/dhanishgajjar/css-flags

css3 design flags gulp html icons illustration library pug scss

Last synced: 28 days ago
JSON representation

A collection of pure CSS flags, all single divs.

• Host: GitHub
• URL: https://github.com/dhanishgajjar/css-flags
• Owner: dhanishgajjar
• License: mit
• Created: 2017-08-31T09:25:50.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2023-01-04T14:15:50.000Z (almost 2 years ago)
• Last Synced: 2024-10-01T06:35:08.347Z (about 1 month ago)
• Topics: css3, design, flags, gulp, html, icons, illustration, library, pug, scss
• Language: CSS
• Homepage: https://codepen.io/dhanishgajjar/full/xLmyjJ/
• Size: 2.04 MB
• Stars: 97
• Watchers: 5
• Forks: 14
• Open Issues: 15
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
Single Div Pure CSS Flags

=========================

[![Project Supported By CSSGrid.io](https://img.shields.io/badge/👍_Project_Supported_By-CSSGrid.ioTutorials-brightgreen.svg?style=flat-square)](https://CSSGrid.io/friend/DHANISH) [![Project Supported By Flexbox.io](https://img.shields.io/badge/👍_Project_Supported_By-Flexbox.ioTutorials-brightgreen.svg?style=flat-square)](https://Flexbox.io/friend/DHANISH)

[Using the Library](#how-to-use-the-library)

[Instructions for Developers](#instructions-for-developers)

![IMAGE ALT TEXT HERE](./repo-img/flags.png)

## 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"

```HTML



```

The flag class contains these fixed properties

```CSS

.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

```HTML



```


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](https://github.com/parcel-bundler/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](https://twitter.com/dhanishgajjar)

Instagram: [@dhanishgajjar](https://instagram.com/dhanishgajjar)