Commit 6b4e02a1 authored by Lipis's avatar Lipis
Browse files

Merge pull request #3 from lipis/master 

Updated docs and stuff
parents 61af818e c408bb9c

README.md

+48 −5
Original line number Diff line number Diff line 
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 `<span>`. If you want the flag to have the squared version then also add 

the clas `flag-icon-squared`. Example:



    <span class="flag-icon flag-icon-gr"></span>

    <span class="flag-icon flag-icon-gr flag-icon-squared"></span>



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

-------

assets/docs.css

+1 −10
Original line number Diff line number Diff line
@@ -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;

}

assets/docs.js

0 → 100644
+12 −0
Original line number Diff line number Diff line 
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';

    }

  }

}

index.html

+94 −97
Original line number Diff line number Diff line
@@ -7,7 +7,7 @@ 
    <meta name="author" content="">



    <title>country-flag-icons</title>

    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.no-icons.min.css" rel="stylesheet">

    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.no-icons.min.css" rel="stylesheet" id="bootstrap">

    <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">

    <link href="./assets/docs.css" rel="stylesheet">

    <link href="./css/country-flag-icons.css" rel="stylesheet">
@@ -22,15 +22,18 @@ 
          CSS for svg based country flag icons!

        </p>

        <p>

          <a href="https://github.com/lipis/country-flag-icons" class="btn btn-default btn-lg">

          <a href="https://github.com/lipis/country-flag-icons" class="btn btn-success btn-lg">

            <span class="icon-github"></span>

            View Project

          </a>

          <a href="https://github.com/lipis/country-flag-icons/archive/master.zip" class="btn btn-primary btn-lg">

            <span class="icon-download-alt"></span>

            Download Source

            Download

          </a>

        </p>

        <p>

          <button id="btn-bootstrap" class="btn btn-default btn-xs">Disable Bootstrap</button>

        </p>

      </div>

    </div>

    <div class="container">
@@ -38,6 +41,7 @@ 
        <div class="page-header">

          <h1>Examples (inline with text)</h1>

        </div>

        <div class="no-wrap">

          <h1>

            h1

            <span class="flag-icon flag-icon-gr"></span>
@@ -119,17 +123,18 @@ 
            <span class="label label-danger"><span class="flag-icon flag-icon-gr"></span> GR</span>

          </p>

        </section>

      </section>

      <section id="more">

        <div class="page-header">

          <h1>Examples (on any element)</h1>

        </div>

        <div class="row">

          <div class="col-lg-3 col-md-4 col-sm-4 col-xs-3">

          <div class="col-lg-3 col-md-4 col-sm-4 col-xs-6">

            <div class="flag-wrapper">

              <div class="img-thumbnail flag flag-icon-background flag-icon-gr"></div>

            </div>

          </div>

          <div class="col-lg-3 col-md-4 col-sm-4 col-xs-3">

          <div class="col-lg-3 col-md-4 col-sm-4 col-xs-6">

            <div class="flag-wrapper">

              <div class="img-thumbnail flag flag-icon-background flag-icon-es"></div>

            </div>
@@ -166,7 +171,7 @@ 
          </div>

          <div class="col-sm-2 col-xs-3">

            <div class="flag-wrapper">

              <div class="img-thumbnail flag flag-icon-background flag-icon-ke"></div>

              <div class="img-thumbnail flag flag-icon-background flag-icon-ge"></div>

            </div>

          </div>

          <div class="col-sm-2 col-xs-3">
@@ -184,7 +189,7 @@ 
              <div class="img-thumbnail flag flag-icon-background flag-icon-jp"></div>

            </div>

          </div>

          <div class="col-sm-2 col-xs-3">

          <div class="col-sm-2 col-xs-3 hidden-xs">

            <div class="flag-wrapper">

              <div class="img-thumbnail flag flag-icon-background flag-icon-in"></div>

            </div>
@@ -199,7 +204,7 @@ 
              <div class="img-thumbnail flag flag-icon-background flag-icon-si"></div>

            </div>

          </div>

          <div class="col-sm-2 col-xs-3 visible-xs visible-lg">

          <div class="col-sm-2 col-xs-3 visible-lg">

            <div class="flag-wrapper">

              <div class="img-thumbnail flag flag-icon-background flag-icon-ca"></div>

            </div>
@@ -207,15 +212,7 @@ 
        </div>

      </section>

    </div>

    <footer class="text-muted text-center">

      <div class="container">

        <ul class="list-inline">

          <li><a href="https://github.com/lipis/country-flag-icons">GitHub project</a></li>

          <li><a href="https://github.com/lipis/country-flag-icons/issues">Issues</a></li>

        </ul>



      </div>

    </footer>

    <script src="http://localhost:35729/livereload.js"></script>

    <script src="./assets/docs.js"></script>

  </body>

</html>