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: about 1 month 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.*