Daily Links

Category: CSS

Aug 18

CSS and JS code coverage in Google Chrome

Find unused CSS and JS code with the new Coverage tab. When you load or run a page, the tab tells you how much code was used, versus how much was loaded. You can reduce the size of your pages by only shipping the code that you need.   https://goo.gl/imxSqG

Jun 20

What Does a Well-Documented CSS Codebase Look Like?

In the front-end community, there is a lot of attention related to documenting JavaScript. That's not so much the case with CSS. Often times I feel like lost when I join a project with minimal or no CSS documentation.   https://css-tricks.com/well-documented-css-codebase-look-like/

Nov 11

Frontend Guidelines Questionnaire

A one-page questionnaire to help your team establish effective frontend guidelines, so that you can write consistent & cohesive code together by Brad Frost.   https://github.com/bradfrost/frontend-guidelines-questionnaire

Nov 11

CSS Architecture for Design Systems

CSS Architecture for Design Systems by Brad Frost - rules and tricks for large CSS projects   http://bradfrost.com/blog/post/css-architecture-for-design-systems/

Sep 07

Front-End Developer Handbook

A guide that anyone could use to learn about the practice of front-end development.   http://www.frontendhandbook.com/

Sep 06

Understanding CSS3 Flexbox for Responsive Design

The fundamentals of CSS flexbox usage   https://envato.com/blog/css3-flexbox/

Aug 30


A javascript that notifies when a DOM element enters or exits the viewport   https://camwiegert.github.io/in-view/

Aug 29

Cheatsheets, Guides & Docs for Web Designers

A collection of useful cheatsheets, references, guides, checklists and docs, covering almost all aspects of web design.   https://envato.com/blog/cheatsheets-web-designers/

Aug 20

Flexbox in 5 Minutes

Flexbox in 5 Minutes is a simple tour of what Flexbox is and does in just 5 minutes (comprised of 53 slides).   https://cvan.io/flexboxin5/

Apr 27

Optimizing SVGs

Tools And Resources For Editing, Converting And Optimizing SVGs, some quick tips   https://www.smashingmagazine.com/2016/04/tools-and-resources-for-editing-converting-and-optimizing-svgs/

Apr 24

Becoming a designer who codes: the making of a unicorn

Becoming a designer who codes: the making of a unicorn   http://blog.invisionapp.com/becoming-a-designer-who-codes/

Feb 08

Learning Sass with CodePen, Part Two: Nesting

Learning Sass with CodePen, Part Two: Nesting   http://demosthenes.info/blog/979/Learning-Sass-with-CodePen-Part-Two-Nesting

Feb 04

Starting a SASS workflow with Alfred

When you’re working with SASS (or Compass, or Bourbon, etc), and you want a simple way to compile your code, you might try a solution like CodeKit or Hammer.   https://medium.com/@clarklab/starting-a-sass-workflow-with-alfred-14f88903602a

Jan 14

9 basic principles of responsive web design

Some basic principles of responsive web design.   http://blog.froont.com/9-basic-principles-of-responsive-web-design/

Jan 11

Sass Basics: The Mixin Directive

Good write-up about how to use Sass mixins   http://www.sitepoint.com/sass-basics-the-mixin-directive/

Jan 10

Website Style Guide Resources

Nice collection of style guides.   http://styleguides.io

Jul 01

The magic of css

The magic of css - interesting online book by Adam Schwartz   http://adamschwartz.co/magic-of-css/

Apr 26

Learn Responsive Design

10 weeks of hands-on training by Zurb University   http://zurb.com/university/responsive-design?

Apr 25

Type Scale

Type scale is a handy online tool for Visual Type scale with a CSS generator - made by Jeremy Church   http://type-scale.com/

Apr 21

Snap SVG

Snap.svg is a brand new JavaScript library for working with SVG, for animating and manipulating both existing SVG content, and SVG content generated with Snap.   http://snapsvg.io/

Creative Market