style guides Archives

Article May 23, 2019

Front-End Documentation, Style Guides and the Rise of MDX

Author

2 Comments

You can have the best open source project in the world but, if it doesn’t have good documentation, chances are it’ll never take off. In the office, good documentation could save you having to repeatedly answer the same questions. Documentation ensures that people can figure out how things work if key employees decide to leave the company or change roles. Well documented coding guidelines help bring consistency to a codebase.

If you’re writing long-form text, Markdown is clearly a great … Read article

Link November 21, 2017

Styleable

Shared by
Chris Coyier

The Wix dev team throws their hat into the CSS preprocessor ring:

Stylable is a CSS preprocessor that enables you to write reusable, highly-performant, styled components. Each component exposes a style API that maps its internal parts so you can reuse components across teams without sacrificing stylability.

Scopes styles to components so they don’t “leak” and clash with other styles.

Enables custom pseudo-classes and pseudo-elements that abstract the internal structure of a component. These can then be styled externally.

Uses

… Read article

Our Notes / Read at stylable.io

css preprocessors style guides

Article July 6, 2017

The Options for Programmatically Documenting CSS

Author

Kaloyan Kosev

13 Comments

Go to Comments

I strongly believe that the documentation should be kept as close to the code as possible. Based on my experience, that's the only option that works well in the long term. External documents, notes, and wikis all eventually get outdated, forgotten, and lost.

Documentation is a topic that always bugs me. Working on poorly documented codebase is a ticking bomb. It makes the onboarding process a tedious experience. Another way to think of bad documentation is that it helps foster … Read article

CSS documentation kss mdcss nucleus style guides

Link April 12, 2016

Introducing iframify

Shared by
Robin Rendle

Hugo Giraudel writes up why he created iframify, a script which grabs a DOM node and wraps it in an <iframe>. It’s a nifty tool for displaying components in a style guide at a certain width and effectively faking element queries.

An iframe being an inner document, media queries fire based on the width of the iframe rather than on the actual screen size. Which is what we want. Yay!

… Read article

Our Notes / Read at dev.edenspiekermann.com

iframes media queries style guides

Link April 12, 2016

Clarity 2016 Wrapup

Shared by
Chris Coyier

My writeup of Clarity conference (the recent conference about style guides). Not comprehensive notes, just the things that resonated with me.… Read article

Our Notes / Read at codepen.io

clarity style guides