diff --git a/README.md b/README.md index fc657ed27..59347d79e 100644 --- a/README.md +++ b/README.md @@ -1,29 +1,72 @@ country-flag-icons ================== -CSS for svg based country flag icons. See the [demo](http://lipis.github.io/country-flag-icons/). +CSS for svg based country flag icons. See the +[demo](http://lipis.github.io/country-flag-icons/). CSS classes ----------- -`.flag-icon` sets the correct proportions for the flag icon when used inline with text. +`.flag-icon` sets the correct proportions for the flag icon when used inline +with text. -`.flag-icon-xx` sets the `background-image` with the correct flag, where `xx` is the [ISO 3166-1-alpha-2 code](http://www.iso.org/iso/country_names_and_code_elements). +`.flag-icon-xx` sets the `background-image` with the correct flag, where `xx` is the +[ISO 3166-1-alpha-2 code](http://www.iso.org/iso/country_names_and_code_elements). `.flag-icon-squared` for the squared version of the flag. -`.flag-icon-background` sets the the background to `position: 50%`, `repeat:no-repeat` and `size:contain`. +`.flag-icon-background` sets the the background to `position: 50%`, +`repeat:no-repeat` and `size:contain`. Usage ----- +For using the flags inline with text add the classes `.flag-icon` and `.flag-icon-xx` +to an empty ``. If you want the flag to have the squared version then also add +the clas `flag-icon-squared`. Example: + +You could also apply this to any element, but in that case you'll have to use the +`flag-icon-background` instead of `flag-icon` and you're set. This will add the +correct background with the following CSS properties: + + background-size: contain; + background-position: 50%; + background-repeat: no-repeat; + +Which means that the flag is just going to appear in the middle of an element, so +you will have to set manually the correct size of 3x4 ratio or if it's squared add also the `flag-icon-squared` class. + + +Development +----------- + +Run the `npm install` to install the dependencies after cloning the project and +you'll be able to: + +To watch for changes and live reloed if served + + $ grunt + +To build `*.less` files + + $ grunt build + +To serve it on `localhost:8000` + + $ grunt connect + +To have only specific countries in the css file, remove the ones that you don't +need from the +[`country-flag-icons-list.less`](https://github.com/lipis/country-flag-icons/blob/master/less/country-flag-icons-list.less) +file and build it again. + Credits ------- -This project wouldn't exist without the awesome collection of svg flags: +This project wouldn't exist without the awesome collection of svg flags: [koppi/iso-country-flags-svg-collection](https://github.com/koppi/iso-country-flags-svg-collection) diff --git a/assets/docs.css b/assets/docs.css index 75b4840d8..f02c1cdc3 100644 --- a/assets/docs.css +++ b/assets/docs.css @@ -21,21 +21,12 @@ background-size: cover; } -footer { - margin-top: 30px; - padding: 30px 0; - border-top: 1px solid #ddd; -} - h1, h2, h3, h4, h5, h6 { font-weight: 300; } -#examples { +.no-wrap { white-space: nowrap; margin-bottom: 8px; -} - -#examples { overflow: hidden; } diff --git a/assets/docs.js b/assets/docs.js new file mode 100644 index 000000000..b41edf22b --- /dev/null +++ b/assets/docs.js @@ -0,0 +1,12 @@ +window.onload = function () { + document.getElementById('btn-bootstrap').onclick = function() { + console.log('shit'); + if (document.getElementById('bootstrap').rel == 'stylesheet') { + document.getElementById('bootstrap').rel = 'none'; + document.getElementById('btn-bootstrap').innerHTML = 'Enable Bootstrap'; + } else { + document.getElementById('bootstrap').rel = 'stylesheet'; + document.getElementById('btn-bootstrap').innerHTML = 'Disalbe Bootstrap'; + } + } +} diff --git a/index.html b/index.html index 3a762d3e9..9c8d518d0 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,7 @@ country-flag-icons - + @@ -22,15 +22,18 @@

country-flag-icons

CSS for svg based country flag icons!

- + View Project - Download Source + Download

+

+ +

@@ -38,98 +41,100 @@

country-flag-icons

Examples (inline with text)

-

- h1 - - GR - GR - GR - GR - GR - GR -

-

- h2 - - GR - GR - GR - GR - GR - GR -

-

- h3 - - GR - GR - GR - GR - GR - GR -

-

- h4 - - GR - GR - GR - GR - GR - GR -

-
- h5 - - GR - GR - GR - GR - GR - GR -
-
- h6 - - GR - GR - GR - GR - GR - GR -
-

- p - - GR - GR - GR - GR - GR - GR -

-

- p.lead - - GR - GR - GR - GR - GR - GR -

+
+

+ h1 + + GR + GR + GR + GR + GR + GR +

+

+ h2 + + GR + GR + GR + GR + GR + GR +

+

+ h3 + + GR + GR + GR + GR + GR + GR +

+

+ h4 + + GR + GR + GR + GR + GR + GR +

+
+ h5 + + GR + GR + GR + GR + GR + GR +
+
+ h6 + + GR + GR + GR + GR + GR + GR +
+

+ p + + GR + GR + GR + GR + GR + GR +

+

+ p.lead + + GR + GR + GR + GR + GR + GR +

+

Examples (on any element)

-
+
-
+
@@ -166,7 +171,7 @@

Examples (on any element)

-
+
@@ -184,7 +189,7 @@

Examples (on any element)

-
+
-
+
@@ -207,15 +212,7 @@

Examples (on any element)

- +