y7usuf / Sky Design

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

• Free Images & Assets

• Fonts & Typography

• Design Blogs

• Style Guide

• CSS Code Snippets

• CSS Frameworks

  • Base / Reset / Normalize

  • Very Lightweight

  • General Purpose

  • Material Design

Tutorials 📖

Color Picker Tools

1. Flat UI Color: Simple color picker

2. Color Library

Free Images & Assets

1. Unsplash

2. Stocksnap

3. Pattern Library (Background)

Fonts & Typography

1. Grid Education Tool

2. 5 Minutes Guide to Better Typography

3. Beautiful Web Type

4. Typewolf: A collection of inspirational sites with fonts listed

5. Google Web Fonts Helper: Lets you download the fonts you like, so you can host your fonts.

Design Blogs

• Increment by Stripe

Style Guide

• Design Elements by lonely planet.

• Dropbox (S)CSS Style Guide by Dropbox.

• Fabric by Microsoft.

• GitHub CSS Style Guide by Github.

• Official Trello CSS Guide by Bobby Grace.

• Solid by BuzzFeed.

• Patterns by MailChimp.

• Lighting Design System by Salesforce.

• Walmart Web Style Guide by Walmartlabs.

• SASS Style Guide by Sass team.

• Style Guide by Starbucks.

• Website Style Guide Resources by Awesome people.

Code Snippets

• Code My UI

CSS Frameworks

Base / Reset / Normalize

1. normalize.css - Modern, HTML5-ready alternative to CSS resets.

2. sanitize.css - The best-practices CSS foundation.

3. inuitcss - Extensible, scalable, Sass-based, OOCSS framework for large and long-lasting UI projects.

4. minireset.css - Tiny modern CSS reset.

Very Lightweight

Frameworks that are smaller than ~5KB.

1. Pure - Set of small, responsive CSS modules that you can use in every web project.

2. Milligram - Minimalist CSS framework.

3. Picnic CSS - Lightweight and beautiful library.

4. Mobi.css - Lightweight, scalable, mobile-first CSS framework.

5. mini.css - Minimal, responsive, style-agnostic CSS framework.

6. Wing - Beautiful CSS framework designed for minimalists.

7. sakura - Minimal classless CSS framework/theme.

General Purpose

1. Bootstrap - The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.

2. Semantic UI - User Interface is the language of the web.

3. Foundation - The most advanced responsive front-end framework in the world.

4. Bulma - Modern CSS framework based on Flexbox.

5. UIkit - Lightweight and modular front-end framework for developing fast and powerful web interfaces.

6. Primer - CSS framework that powers GitHub's front-end design.

7. Tachyons - Quickly build and design new UI without writing CSS.

8. Spectre.css - Lightweight, responsive and modern CSS framework.

Material Design

1. Material Components Web - Modular and customizable Material Design UI components for the web.

2. Materialize - CSS Framework based on material design.

3. MUI - Lightweight CSS framework that follows Google's Material Design guidelines.