search

erikflowers / weather-icons

215 Weather Themed Icons and CSS
https://github.com/erikflowers/weather-icons
6.91k stars 851 forks source link

Refactor LessCSS, add SASS support, add condition code mappings, add some FontAwesome functionality #82

Closed zakmac closed 9 years ago

zakmac commented 9 years ago

This PR rectifies the following:

This PR contains the following changes:

Craytor commented 9 years ago

+1

erikflowers commented 9 years ago

I am making a 2.0 WIP because the whole project is overdue for a major overhaul in how it's built on my end, and all the features like the things in this PR. The problem is this Repo is just the public one, I have a private one that all the work takes place in and then I copy it here. The private repo is a mess, I need to get rid of it and do it all in the public.

So likely these changes will all be included, but not pull right into Master, I might have to piece it together and start in the WIP branch the way it needs to be for 1 repo.

zakmac commented 9 years ago

@erikflowers I'm not sure what changes you've already made for v2.0.0 but this PR would likely merge without conflict –since every minor change has been tracked seperately– and now has integrated build tools. It may be able to serve as your development repo as well, assuming the delta of features is not too great.

Let me know if there's anything I can do to assist.

erikflowers commented 9 years ago

My biggest challenge with this project is that I am really not familiar with build tools, bower, gulpfiles, etc etc. I use Codekit to compile my Less into the final CSS, and that's it. Even adding bower support to this has been a headache since I don't know how it works, and someone asked I add it to CDNJS and I am pretty sure every update breaks that. But due to the popularity, I guess I will have to modernize my approach. If you feel qualified to help with that, that would be great.

zakmac commented 9 years ago

Assuming you already have Node installed: it's as simple as pulling this repository and running npm install, which will install all dependencies.

These steps could be consolidated so that you didn't need to run gulp mini anymore, but I was lazy and did not set things up that way.

If you do not have Node installed, it's (almost) as easy as visiting https://nodejs.org/ and clicking the big, green "Install" button. Note: Node comes bundled with npm.

johnnyshields commented 9 years ago

Recommend to keep consistent with Bootstrap-esque naming conventions.

.wi-xlg --> .wi-xl .wi-xsm --> .wi-xs

zakmac commented 9 years ago
erikflowers commented 9 years ago

I downloaded your fork and will be including this in the 2.0. I have decided to refactor the project to be a lot better in 2.0 instead of improve 1.3. I am starting the 2.0 refactor now and hope to push it out in the very near future, within the next month.

martinlindhe commented 9 years ago

@erikflowers great news! thanks for your efforts

erikflowers commented 9 years ago

@zakmac Hey I am using your Sass code, and I am wondering if you know how to write the same loop that takes the variables of the icon names, and loops over that array to output the classes.

It is this that you wrote below. I'd like that in Less, since I am planning on maintaining both for now, it would make the Less half of the project so much easier.

@each $wi-glyph-name, $wi-glyph-content in $wi-icon-glyphs { .#{$wi-css-prefix}-#{$wi-glyph-name}:before { content: $wi-glyph-content; } }

zakmac commented 9 years ago

@erikflowers any file in /scss/ should have a file mirroring its functionality in /less/. For example:

erikflowers commented 9 years ago

Oh I hadn't looked that close yet. That's great.

Just having that automated loop for the class names energizes me. Not having to update things in 4 places is a huge time saver.

I'm recomposing everything in the 2.0-wip right now. You did a ton of work I am realizing. I'll be layer it in to the WIP as I go, so everything should make it in in one form or another. Some of what you've done is outside my real technical understanding, so I might have to study it a bit. The key value pairs in less and sass is new to me and such a huge improvement.

I will be exploring a way to do that for the HTML as well, since that is updated manually each time for the GH-Pages html, and also the cheatsheet. Really they should all just use the same array instead of having me do this total manual process to update it. I do it in Jade right now, not sure if Jade can build it dynamically or if another language could be used to compile to HTML so I don't have to manually update every page every time.

erikflowers commented 9 years ago

I've taken almost all of this in and included it in 2.0 somewhere, so I am going to close this request. Tons of thanks, this was a huge help!!!