Skip to content

Commit

Permalink
Added assets and more examples
Browse files Browse the repository at this point in the history
  • Loading branch information
lipis committed Sep 25, 2013
1 parent 29246bb commit 46d97fa
Show file tree
Hide file tree
Showing 11 changed files with 471 additions and 346 deletions.
7 changes: 7 additions & 0 deletions Gruntfile.coffee
Original file line number Diff line number Diff line change
Expand Up @@ -36,11 +36,18 @@ module.exports = (grunt)->
livereload: true
files: 'index.html'

connect:
server:
options:
port: 8000
keepalive: true


grunt.loadNpmTasks("grunt-contrib-clean")
grunt.loadNpmTasks("grunt-contrib-less")
grunt.loadNpmTasks("grunt-contrib-cssmin")
grunt.loadNpmTasks("grunt-contrib-watch")
grunt.loadNpmTasks('grunt-contrib-connect')

grunt.registerTask("default", ["build", "watch"])
grunt.registerTask("build", ["clean", "less"])
Expand Down
15 changes: 4 additions & 11 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,24 +6,17 @@ CSS classes
-----------


`.flag-icon`
`.flag-icon` sets the correct proportions for the flag icon when used inline with text.

`.flag-icon-xx` 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` the squared version of the flag
`.flag-icon-squared` for the squared version of the flag.

`.flag-icon-2x` 2 times bigger size

`.flag-icon-3x` 3 times bigger size
`.flag-icon-background` sets the the background to `position: 50%`, `repeat:no-repeat` and `size:contain`.


Usage
-----

<span class="flag-icon flag-icon-gr"></span>
<span class="flag-icon flag-icon-gr flag-icon-2x"></span>
<span class="flag-icon flag-icon-gr flag-icon-3x"></span>

<span class="flag-icon flag-icon-gr flag-icon-squared"></span>
<span class="flag-icon flag-icon-gr flag-icon-squared flag-icon-2x"></span>
<span class="flag-icon flag-icon-gr flag-icon-squared flag-icon-3x"></span>
8 changes: 8 additions & 0 deletions assets/bootstrap.min.css

Large diffs are not rendered by default.

41 changes: 41 additions & 0 deletions assets/docs.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
.flag-wrapper {
width: 100%;
display: inline-block;
position: relative;
box-shadow: 0 0 2px black;
overflow: hidden;
margin-bottom: 20px;
}

.flag-wrapper:after {
padding-top: 75%; /*1160/2000 ratio*/
display: block;
content: '';
}

.flag-wrapper .flag {
position: absolute;
top: 0; bottom: 0; right: 0; left: 0;
width: 100%;
height: 100%;
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 h1, h2, h3, h4, h5, h6, p{
white-space: nowrap;
margin-bottom: 8px;
}

#examples {
overflow: hidden;
}
34 changes: 19 additions & 15 deletions css/country-flag-icons.css
Original file line number Diff line number Diff line change
Expand Up @@ -7,31 +7,35 @@
background-position: 50%;
background-repeat: no-repeat;
}
.flag-icon.flag-icon-2x {
width: 2.6666666666666665em;
line-height: 2em;
}
.flag-icon.flag-icon-2x.flag-icon-squared {
width: 2em;
}
.flag-icon.flag-icon-3x {
width: 4em;
line-height: 3em;
}
.flag-icon.flag-icon-3x.flag-icon-squared {
width: 3em;
}
.flag-icon:before {
content: "\00a0";
}
.flag-icon.flag-icon-squared {
width: 1em;
}
.background-contain {
.flag-icon-background {
background-size: contain;
background-position: 50%;
background-repeat: no-repeat;
}
.flag-icon-gr {
background-image: url(../flags/4x3/gr.svg);
}
.flag-icon-gr.flag-icon-squared {
background-image: url(../flags/1x1/gr.svg);
}
.flag-icon-dk {
background-image: url(../flags/4x3/dk.svg);
}
.flag-icon-dk.flag-icon-squared {
background-image: url(../flags/1x1/dk.svg);
}
.flag-icon-us {
background-image: url(../flags/4x3/us.svg);
}
.flag-icon-us.flag-icon-squared {
background-image: url(../flags/1x1/us.svg);
}
.flag-icon-ad {
background-image: url(../flags/4x3/ad.svg);
}
Expand Down
2 changes: 1 addition & 1 deletion css/country-flag-icons.min.css

Large diffs are not rendered by default.

131 changes: 104 additions & 27 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,20 +7,9 @@
<meta name="author" content="">

<title>country-flag-icons</title>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<link href="./assets/bootstrap.min.css" rel="stylesheet">
<link href="./assets/docs.css" rel="stylesheet">
<link href="./css/country-flag-icons.css" rel="stylesheet">
<style>
h1, h2, h3, h4, h5, h6 {
font-weight: 300;
}
#examples *{
white-space: nowrap;
margin-bottom: 8px;
}
#examples {
overflow: hidden;
}
</style>
</head>

<body>
Expand All @@ -30,25 +19,21 @@ <h1>country-flag-icons</h1>
<p class="lead">
250+ svg based country flags!
</p>
<p class="lead">
<a class="btn btn-primary btn-lg">GitHub project</a>
</p>
<p>
<iframe src="http://ghbtns.com/github-btn.html?user=lipis&type=follow"
allowtransparency="true" frameborder="0" scrolling="0" width="100" height="20"></iframe>
<iframe src="http://ghbtns.com/github-btn.html?user=lipis&repo=country-flag-icons&type=watch&count=true"
allowtransparency="true" frameborder="0" scrolling="0" width="100" height="20"></iframe>
</p>
</div>
</div>
<div class="container">
<section id="usage">
<div class="page-header">
<h1>Usage</h1>
</div>
<pre>
Normal (4x3) &lt;span class="flag-icon flag-icon-gr"&gt;&lt;/span&gt;
Normal 2x &lt;span class="flag-icon flag-icon-gr flag-icon-2x"&gt;&lt;/span&gt;
Normal 3x &lt;span class="flag-icon flag-icon-gr flag-icon-3x"&gt;&lt;/span&gt;

Squared (1x1) &lt;span class="flag-icon flag-icon-gr flag-icon-squared"&gt;&lt;/span&gt;
Squared 2x &lt;span class="flag-icon flag-icon-gr flag-icon-squared flag-icon-2x"&gt;&lt;/span&gt;
Squared 3x &lt;span class="flag-icon flag-icon-gr flag-icon-squared flag-icon-3x"&gt;&lt;/span&gt;</pre>
</section>
<section id="examples">
<div class="page-header">
<h1>Examples</h1>
<h1>Examples (inline with text)</h1>
</div>
<h1>
h1
Expand Down Expand Up @@ -131,7 +116,99 @@ <h6>
<span class="label label-danger"><span class="flag-icon flag-icon-gr"></span> GR</span>
</p>
</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="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="flag-wrapper">
<div class="img-thumbnail flag flag-icon-background flag-icon-es"></div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-4 col-xs-3">
<div class="flag-wrapper">
<div class="img-thumbnail flag flag-icon-background flag-icon-gb"></div>
</div>
</div>
<div class="col-lg-3 col-sm-2 col-xs-3">
<div class="flag-wrapper">
<div class="img-thumbnail flag flag-icon-background flag-icon-dk"></div>
</div>
</div>
<div class="col-sm-2 col-xs-3">
<div class="flag-wrapper">
<div class="img-thumbnail flag flag-icon-background flag-icon-de"></div>
</div>
</div>
<div class="col-sm-2 col-xs-3">
<div class="flag-wrapper">
<div class="img-thumbnail flag flag-icon-background flag-icon-ru"></div>
</div>
</div>
<div class="col-sm-2 col-xs-3">
<div class="flag-wrapper">
<div class="img-thumbnail flag flag-icon-background flag-icon-is"></div>
</div>
</div>
<div class="col-sm-2 col-xs-3">
<div class="flag-wrapper">
<div class="img-thumbnail flag flag-icon-background flag-icon-fr"></div>
</div>
</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>
</div>
<div class="col-sm-2 col-xs-3">
<div class="flag-wrapper">
<div class="img-thumbnail flag flag-icon-background flag-icon-ar"></div>
</div>
</div>
<div class="col-sm-2 col-xs-3">
<div class="flag-wrapper">
<div class="img-thumbnail flag flag-icon-background flag-icon-br"></div>
</div>
</div>
<div class="col-sm-2 col-xs-3">
<div class="flag-wrapper">
<div class="img-thumbnail flag flag-icon-background flag-icon-jp"></div>
</div>
</div>
<div class="col-sm-2 col-xs-3">
<div class="flag-wrapper">
<div class="img-thumbnail flag flag-icon-background flag-icon-in"></div>
</div>
</div>
<div class="col-sm-2 col-xs-3">
<div class="flag-wrapper">
<div class="img-thumbnail flag flag-icon-background flag-icon-sa"></div>
</div>
</div>
<div class="col-sm-2 col-xs-3">
<div class="flag-wrapper">
<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="flag-wrapper">
<div class="img-thumbnail flag flag-icon-background flag-icon-ca"></div>
</div>
</div>
</div>
</section>
</div>
<footer class="text-muted text-center">
<div class="container">
&copy; - country-flag-icons
</div>
</footer>
<script src="http://localhost:35729/livereload.js"></script>
</body>
</html>
28 changes: 28 additions & 0 deletions less/country-flag-icons-base.less
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
.flag-icon {
position: relative;
display: inline-block;
width: unit(4 / 3, em);
line-height: 1em;
.flag-icon-background;
&:before {
content: "\00a0";
}
&.flag-icon-squared {
width: 1em;
}
}

.flag-icon-background {
background-size: contain;
background-position: 50%;
background-repeat: no-repeat;
}

.flag-icon(@country) {
.flag-icon-@{country} {
background-image: ~"url(@{country-flag-icons-path}/4x3/@{country}.svg)";
&.flag-icon-squared {
background-image: ~"url(@{country-flag-icons-path}/1x1/@{country}.svg)";
}
}
}
Loading

0 comments on commit 46d97fa

Please sign in to comment.