Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/josephgoksu/sky-design

🌃 A design reference for developers who prioritize good design.
https://github.com/josephgoksu/sky-design

art css css-framework design reference typography

Last synced: 17 days ago
JSON representation

🌃 A design reference for developers who prioritize good design.

Awesome Lists containing this project

README 

        
![](https://raw.githubusercontent.com/y7usuf/sky-design/master/skydesign.png)



Hey! It's Sky-Design, the CSS & Design Reference for developers who care about good design.



> “Design is a solution to a problem. Art is a question to a problem.” – **John Maeda**



## Table Of Contents



- [Color Picker Tools](#color-picker-tools)



- [Free Images & Assets](#free-images--assets)



- [Fonts & Typography](#fonts--typography)



- [Design Blogs](#design-blogs)



- [Style Guide](#style-guide)



- [CSS Code Snippets](#code-snippets)



- [CSS Frameworks](#css-frameworks)



  - Base / Reset / Normalize



  - Very Lightweight



  - General Purpose



  - Material Design



## Tutorials :book:



### Color Picker Tools



1. [Flat UI Color](http://flatuicolors.com/): Simple color picker



2. [Color Library](http://colorlibrary.ch/)



### Free Images & Assets



1. [Unsplash](https://unsplash.com/)



2. [Stocksnap](https://stocksnap.io/)



3. [Pattern Library (Background)](http://thepatternlibrary.com/)



### Fonts & Typography



1. [Grid Education Tool](http://griddy.io/)



2. [5 Minutes Guide to Better Typography](http://pierrickcalvez.com/journal/a-five-minutes-guide-to-better-typography)



3. [Beautiful Web Type](https://beautifulwebtype.com)



4. [Typewolf](https://www.typewolf.com/): A collection of inspirational sites with fonts listed



5. [Google Web Fonts Helper](http://google-webfonts-helper.herokuapp.com/fonts): Lets you download the fonts you like, so you can host your fonts.



### Design Blogs



- [Increment](https://increment.com/) by Stripe



### Style Guide



- [Design Elements](http://rizzo.lonelyplanet.com/styleguide/design-elements/colours) by lonely planet.



- [Dropbox (S)CSS Style Guide](https://github.com/dropbox/css-style-guide) by Dropbox.



- [Fabric](https://dev.office.com/fabric#/) by Microsoft.



- [GitHub CSS Style Guide](https://primer.github.io/) by Github.



- [Official Trello CSS Guide](https://gist.github.com/bobbygrace/9e961e8982f42eb91b80) by Bobby Grace.



- [Solid](http://solid.buzzfeed.com/) by BuzzFeed.



- [Patterns](http://ux.mailchimp.com/patterns) by MailChimp.



- [Lighting Design System](https://www.lightningdesignsystem.com/) by Salesforce.



- [Walmart Web Style Guide](http://walmartlabs.github.io/web-style-guide/) by Walmartlabs.



- [SASS Style Guide](http://sass-lang.com/styleguide) by Sass team.



- [Style Guide](http://www.starbucks.com/static/reference/styleguide/) by Starbucks.



- [Website Style Guide Resources](http://styleguides.io/examples.html) by Awesome people.



### Code Snippets



- [Code My UI](https://codemyui.com)



### CSS Frameworks



**Base / Reset / Normalize**



1. [normalize.css](http://necolas.github.io/normalize.css/) - *Modern, HTML5-ready alternative to CSS resets.*



2. [sanitize.css](https://jonathantneal.github.io/sanitize.css/) - *The best-practices CSS foundation.*



3. [inuitcss](https://github.com/inuitcss/inuitcss) - E*xtensible, scalable, Sass-based, OOCSS framework for large and long-lasting UI projects.*



4. [minireset.css](http://jgthms.com/minireset.css/) - *Tiny modern CSS reset.*



**Very Lightweight**



*Frameworks that are smaller than ~5KB.*



1. [Pure](Pure) - *Set of small, responsive CSS modules that you can use in every web project.*



2. [Milligram](http://milligram.io/) - *Minimalist CSS framework.*



3. [Picnic CSS](https://picnicss.com/) - *Lightweight and beautiful library.*



4. [Mobi.css](http://getmobicss.com/) - *Lightweight, scalable, mobile-first CSS framework.*



5. [mini.css](http://minicss.org/) - *Minimal, responsive, style-agnostic CSS framework.*



6. [Wing](http://usewing.ml/) - *Beautiful CSS framework designed for minimalists.*



7. [sakura](https://oxal.org/projects/sakura/) - *Minimal classless CSS framework/theme.*



**General Purpose**



1. [Bootstrap](http://getbootstrap.com/) - *The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.*



2. [Semantic UI](https://semantic-ui.com/) - *User Interface is the language of the web.*



3. [Foundation](http://foundation.zurb.com/) - *The most advanced responsive front-end framework in the world.*



4. [Bulma](http://bulma.io/) - *Modern CSS framework based on Flexbox.*



5. [UIkit](https://getuikit.com/) - *Lightweight and modular front-end framework for developing fast and powerful web interfaces.*



6. [Primer](http://primercss.io/) - *CSS framework that powers GitHub's front-end design.*



7. [Tachyons](http://tachyons.io/) - *Quickly build and design new UI without writing CSS.*



8. [Spectre.css](https://picturepan2.github.io/spectre/) - *Lightweight, responsive and modern CSS framework.*



**Material Design**



1. [Material Components Web](https://material.io/components/web/) - *Modular and customizable Material Design UI components for the web.*



2. [Materialize](http://materializecss.com/) - *CSS Framework based on material design.*



3. [MUI](https://www.muicss.com/) - *Lightweight CSS framework that follows Google's Material Design guidelines.*