Committing initial version of project

.editorconfig

@@ -0,0 +1,21 @@
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# editorconfig.org
+
+root = true
+
+
+[*]
+
+# Change these settings to your own preference
+indent_style = space
+indent_size = 2
+
+# We recommend you to keep these unchanged
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.github/CONTRIBUTING.md

@@ -0,0 +1,17 @@
+# Thank you for Contributing !
+
+We want to keep it as easy as possible to contribute changes. Just follow these requirements for Creating Issues and Pull Requests, and everything will be super simple for everyong :)
+
+## Creating an Issue:
+
+Use the Template that we provide.  Issues reported that do not use the template will closed.
+
+## Creating a Pull Request:
+
+Before you can submit a PR, you will need to:
+
+1. Clone this repo
+2. Make a New Branch ( ideally you will name your branch for the issue you are fixing, e,g, `issue-3-updating-docs` )
+3. Commit & Push the New Branch
+
+Now you can submit a new PR using the Template that we provide.  PR's submitted that do not use the template will closed.

.github/ISSUE_TEMPLATE.md

@@ -0,0 +1,19 @@
+#### Overview:
+
+_( a detailed overview of the problem this ticket will solve and the targeted audience )_
+
+#### Acceptance Criteria:
+
+_( issue will not be considered complete unless this list of criteria is met, e.g. intended usage, expected functionality, specific metrics met, etc. )_
+
+#### Steps to Duplicate _( required for bug reports )_:
+
+_( a step by step guide written for a person who might be looking at this for the first time )_
+
+#### System Info _( required for bug reports )_:
+
+_( e.g. "iPhone 6 iOS 8.3" or "OSX 10.10 and Google Chrome Version 44.0.2403.89 (64-bit)" )_
+
+#### Relevant Documentation _( optional )_
+
+_( e.g. Screenshots, Github Issues, etc )_

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,33 @@
+#### What's this PR do?
+
+_[write_something]_
+
+#### Where should the reviewer start?
+
+_[write_something]_
+
+#### How should this be manually tested?
+
+_[write_something]_
+
+#### Any background context you want to provide?
+
+_[write_something]_
+
+#### What are the relevant github issue?
+
+_[write_something]_
+
+#### Screenshots (if appropriate)
+
+_[drag_and_drop_here]_
+
+#### What gif best describes this PR or how it makes you feel?
+
+_[drag_and_drop_something_fun_here]_
+
+#### Definition of Done:
+
+- [ ] You have actually run this locally and can verify it works
+- [ ] You have added code comments to all code being submitted
+- [ ] You have updated the README file (if appropriate)

LICENSE

@@ -0,0 +1,43 @@
+All code in this Github Repository are available under both the MIT and GPL license.
+
+MIT License
+
+Copyright (c) 2016
+
+Permission is hereby granted, free of charge, to any person
+obtaining a copy of this software and associated documentation
+files (the "Software"), to deal in the Software without
+restriction, including without limitation the rights to use,
+copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the
+Software is furnished to do so, subject to the following
+conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
+OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+OTHER DEALINGS IN THE SOFTWARE.
+
+GPL License
+
+Copyright (c) 2016
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.

README.md

@@ -1,2 +1,129 @@
-# weather-underground-icons
+![Weather Underground](https://icons.wxug.com/logos/JPG/wundergroundLogo_4c_horz.jpg "Weather Underground")
-Weather Underground Icons ( PNG & SVG )
+
+Weather Underground Icons
+======
+
+These icons were designed by the Graphic Designer [Ashley Jager](http://www.ajager.com/#/weather-underground/).  She created a beautiful [Adobe Illustrator](https://dribbble.com/shots/1879422-Weather-Underground-Icons) file. This project simply breaks that file up into web icon that can be used in your projects.
+
+Demo Website
+---
+
+[http://peter.build/weather-underground-icons/](http://peter.build/weather-underground-icons/)
+
+Usage Instructions
+---
+
+[Weather Underground](https://www.wunderground.com/) has an [API](https://www.wunderground.com/weather/api/d/docs) where you can fetch data remotely.  The API returns an `icon` parameter as part of their JSON response that you can use to load custom icons.
+
+Image Usage Instructions
+---
+
+If you just want to use the image files directly, and not use the CSS file you can just copy over the images directly from the `dist/icons` folder.  See the *Icon Key* below to see which icons will be used.
+
+CSS Usage Instructions
+---
+
+If you wish to use the use the CSS version of this project, you just need to copy this `dist` folder into your project.
+
+Then you can use the icon keys with a `wu-` prefix to load whichever icon you want:
+
+```html
+<i class="wu wu-white wu-64 wu-chanceflurries"></i>
+```
+
+All CSS Icons will default to using SVG files.  However, you can use PNG sprites by adding a `no-svg` class to the parent element that contains the weather icons.  `no-svg` classnames will be added to your HTML tag automatically if you are using [Modernizr](https://modernizr.com/) and the browser does not support SVG.
+
+### Icon Class Colors:
+
+* `wu-black` icons with `black` lines
+
+```html
+<i class="wu wu-black wu-32 wu-chanceflurries"></i>
+```
+
+![tstorms](dist/icons/black/png/32x32/tstorms.png "tstorms")
+
+* `wu-white` icons with `white` lines
+
+```html
+<i class="wu wu-white wu-32 wu-chancerain"></i>
+```
+
+![tstorms](dist/icons/white/png/32x32/tstorms.png "tstorms")
+
+### Icon Class Sizes:
+
+* `wu-16` 16x16px icons
+
+```html
+<i class="wu wu-black wu-16 wu-chancesnow"></i>
+```
+
+![chancesnow](dist/icons/black/png/16x16/chancesnow.png "chancesnow")
+
+* `wu-32` 32x32px icons
+
+```html
+<i class="wu wu-black wu-32 wu-chancetstorms"></i>
+```
+
+![chancetstorms](dist/icons/black/png/32x32/chancetstorms.png "chancetstorms")
+
+* `wu-64` 64x64px icons
+
+```html
+<i class="wu wu-black wu-64 wu-clear"></i>
+```
+
+![clear](dist/icons/black/png/64x64/clear.png "clear")
+
+* `wu-128` 128x128px icons
+
+```html
+<i class="wu wu-black wu-128 wu-cloudy"></i>
+```
+
+![cloudy](dist/icons/black/png/128x128/cloudy.png "cloudy")
+
+* `wu-256` 256x256px icons
+
+```html
+<i class="wu wu-black wu-256 wu-flurries"></i>
+```
+
+![flurries](dist/icons/black/png/256x256/flurries.png "flurries")
+
+Icon Key
+---
+
+Here are the `icon` options for each weather option:
+
+ICON | KEY | DESCRIPTION
+---- | --- | -----------
+![chanceflurries](dist/icons/black/png/32x32/chanceflurries.png "chanceflurries") | chanceflurries | label
+![chancerain](dist/icons/black/png/32x32/chancerain.png "chancerain") | chancerain | label
+![chancesleet](dist/icons/black/png/32x32/chancesleet.png "chancesleet") | chancesleet | label
+![chancesnow](dist/icons/black/png/32x32/chancesnow.png "chancesnow") | chancesnow | label
+![chancetstorms](dist/icons/black/png/32x32/chancetstorms.png "chancetstorms") | chancetstorms | label
+![clear](dist/icons/black/png/32x32/clear.png "clear") | clear | label
+![cloudy](dist/icons/black/png/32x32/cloudy.png "cloudy") | cloudy | label
+![flurries](dist/icons/black/png/32x32/flurries.png "flurries") | flurries | label
+![fog](dist/icons/black/png/32x32/fog.png "fog") | fog | label
+![hazy](dist/icons/black/png/32x32/hazy.png "hazy") | hazy | label
+![mostlycloudy](dist/icons/black/png/32x32/mostlycloudy.png "mostlycloudy") | mostlycloudy | label
+![mostlysunny](dist/icons/black/png/32x32/mostlysunny.png "mostlysunny") | mostlysunny | label
+![partlycloudy](dist/icons/black/png/32x32/partlycloudy.png "partlycloudy") | partlycloudy | label
+![partlysunny](dist/icons/black/png/32x32/partlysunny.png "partlysunny") | partlysunny | label
+![rain](dist/icons/black/png/32x32/rain.png "rain") | rain | label
+![sleet](dist/icons/black/png/32x32/sleet.png "sleet") | sleet | label
+![snow](dist/icons/black/png/32x32/snow.png "snow") | snow | label
+![sunny](dist/icons/black/png/32x32/sunny.png "sunny") | sunny | label
+![tstorms](dist/icons/black/png/32x32/tstorms.png "tstorms") | tstorms | label
+![unknown](dist/icons/black/png/32x32/unknown.png "unknown") | unknown | label
+
+Icon Preview
+---
+
+![White Icons](dist/icons/white/icon-preview.png "White Icons")
+
+![Black Icons](dist/icons/black/icon-preview.png "Black Icons")

bower.json

@@ -0,0 +1,23 @@
+{
+  "name": "weather-underground-icons",
+  "version": "1.0.0",
+  "homepage": "https://github.com/manifestinteractive/weather-underground-icons",
+  "authors": [
+    "Ashley Jager",
+    "Peter Schmalfeldt"
+  ],
+  "license": "(MIT OR GPL-3.0)",
+  "description": "Weather Underground Icons",
+  "main": "dist/wu-icons-style.css",
+  "keywords": [
+    "weather underground",
+    "weather",
+    "icons",
+    "png",
+    "svg"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/manifestinteractive/weather-underground-icons.git"
+  }
+}

css/demo.css

@@ -0,0 +1,277 @@
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+  display: block;
+}
+body {
+  line-height: 1;
+}
+ol, ul {
+  list-style: none;
+}
+blockquote, q {
+  quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content: '';
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+
+body {
+  transition: background-color 0.1s linear;
+  font-family: 'Ubuntu', sans-serif;
+}
+
+body.demo-white {
+  color: #fff;
+}
+
+body.demo-black {
+  color: #000;
+}
+
+body.demo-white *::-moz-selection {
+  background:  rgba(0, 0, 0, 0.5);
+}
+
+body.demo-white *::selection {
+  background: rgba(0, 0, 0, 0.5);
+}
+
+body.demo-black *::-moz-selection {
+  background: rgba(0, 0, 0, 0.05);
+}
+
+body.demo-black *::selection {
+  background: #FFF;
+}
+
+select {
+  font-size: 14px;
+  font-weight: 300;
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+  -webkit-appearance: none;
+  text-align: center;
+  margin: 0 6px;
+  color: #f6a71c;
+  cursor: pointer;
+}
+
+select:active, select:focus {
+  outline: none;
+}
+
+.author-info {
+  margin: 20px 0;
+  font-weight: 300;
+}
+.author-info a {
+  text-decoration: none;
+}
+
+body.demo-white .author-info a {
+  color: rgba(255, 255, 255, 0.5);
+}
+body.demo-black .author-info a {
+  color: rgba(0, 0, 0, 0.5);
+}
+
+body.demo-white .author-info a:hover {
+  color: #FFF;
+}
+body.demo-black .author-info a:hover {
+  color: #000;
+}
+
+.demo {
+  transition: background-color 0.1s linear;
+  margin: 0 auto;
+  margin-bottom: 40px;
+}
+
+.demo-white {
+  background: #262a33;
+}
+
+.demo-black {
+  background: #f3f7f9;
+}
+
+.demo i {
+  border-radius: 10%;
+  transition: background-color 0.25s linear;
+}
+
+.demo-white i:hover, .demo-white i.active {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.demo-black i:hover, .demo-black i.active {
+  background-color: #FFF;
+}
+
+.demo-16 {
+  width: 96px;
+}
+
+.demo-32 {
+  width: 176px;
+}
+
+.demo-64 {
+  width: 336px;
+}
+
+.demo-128 {
+  width: 656px;
+}
+
+.demo-256 {
+  width: 1036px;
+}
+
+.header {
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+.header h1 {
+  font-weight: 300;
+  margin-bottom: 0;
+  font-size: 30px;
+  margin-top: 30px;
+}
+
+.header div.options {
+  display: block;
+  font-weight: 300;
+}
+
+body.demo-white .header div.options span {
+  margin-right: 10px;
+  color: rgba(255, 255, 255, 0.25);
+}
+body.demo-black .header div.options span {
+  margin-right: 10px;
+  color: rgba(0, 0, 0, 0.25);
+}
+
+.header #iconSource {
+  font-weight: 300;
+  margin-top: 20px;
+  font-size: 30px;
+  color: #f6a71c;
+  white-space: pre;
+}
+
+.header #iconSource.hljs {
+  padding: 0;
+  background: transparent;
+  color: inherit;
+  font-size: 16px;
+  line-height: 19px;
+  margin: 28px 0;
+}
+
+.hljs-string {
+  color: #f6a71c;
+}
+.github-corner svg {
+  position: absolute;
+  top: 0;
+  border: 0;
+  right: 0;
+}
+body.demo-black .github-corner svg {
+  fill: #262a33;
+  color: #f3f7f9;
+}
+body.demo-white .github-corner svg {
+  fill: #f3f7f9;
+  color: #262a33;
+}
+.github-corner:hover .octo-arm {
+  animation: octocat-wave 560ms ease-in-out
+}
+
+@keyframes octocat-wave {
+  0%, 100% {
+    transform: rotate(0)
+  }
+  20%, 60% {
+    transform: rotate(-25deg)
+  }
+  40%, 80% {
+    transform: rotate(10deg)
+  }
+}
+@media (max-width: 375px) {
+  .header {
+    margin-top: 50px;
+  }
+  .header h1 {
+    max-width: 80%;
+    margin: 0 auto;
+    margin-bottom: 20px;
+  }
+  .demo-64 {
+    width: 270px;
+  }
+  .demo-128 {
+    width: 260px;
+  }
+  .demo-256 {
+    width: 260px;
+  }
+}
+@media (max-width: 320px) {
+  .header h1 {
+    max-width: 90%;
+    margin: 0 auto;
+    margin-bottom: 20px;
+  }
+}
+@media (max-width: 500px) {
+  .github-corner:hover .octo-arm {
+    animation: none
+  }
+
+  .github-corner .octo-arm {
+    animation: octocat-wave 560ms ease-in-out
+  }
+}