Learn CSS Grid - A Guide to Learning CSS Grid | Jonathan Suh
A quick visual guide to CSS Grid properties and values.
Tags: guide
91
Style Guide Guide | Style Guide Guide
If you want to understand the thinking behind this style guide guide, be sure to read Brad’s style guide guide guide.
Codebar Coach Guide
It’s a short list, but this brief guide for coaches at Codebar is packed with excellent advice for anybody getting into teaching or training:
- Do not take over the keyboard! This can be off-putting and scary.
- Encourage the students to type and not copy paste.
- Assume that anyone you’re teaching has no knowledge but infinite intelligence.
Springer Nature frontend playbook: house style guide
I like it when organisations share their in-house coding styles. This one from Springer Nature not only has guides for HTML, CSS, and JavaScript, but it also has a good primer on progressive enhancement.
Patterns Beyond Context · Matthias Ott – User Experience Designer
If we describe patterns also in terms of content, context, and contrast, we are able to define more precisely what a specific pattern is all about, what its role within a design system is, and how it is defined and shaped by its environment.
Evaluating Tools For Building a Component Library | Chromatic
A comparison of a few different tools for generating pattern libraries.
Spoiler…
In this particular case, Fractal comes out on top:
It has the features we need, and I’m happier than I should be with how simple the directory and file structure is. The documentation has also been super helpful thus far. We’ve customized it with our client’s branding and are ready to roll.
Designing inspired style guides presentation slides and transcript | Stuff & Nonsense
Having spent half a decade encouraging people to make their pattern libraries public and doing my best to encourage openness and sharing, I find this kind of styleguide-shaming quite disheartening:
These all offer something different but more often than not they have something in common. They look ugly enough to have been designed by someone who enjoys configuring a router.
If a pattern library is intended to inspire, then make it inspiring. But if it’s intended to be an ever-changing codebase (made for and by the kind of people who enjoy configuring a router), then that’s where the effort and time should be concentrated.
But before designing anything—whether it’s a website or a pattern library—figure out who the audience is first.
Indivisible Guide
A resource for American citizens put together by former congressional staffers. If you’re a US citizen wondering how you can resist Trump’s agenda, this should provide solid advice on what action you can take.
Front-end Style Guides by Anna Debenham
Anna has just published a lovely new version of her excellent little book on pattern libraries. EPUB, MOBI, and PDF versions are yours for a mere $8.
BAgel
The styleguide, design principles, and pattern library for British Airways. It’s the “global experience language” for BA …so it’s called BAgel.
Document your design systems with Fractal | Creative Bloq
This quick dip into Fractal was in last month’s Net magazine.
It’s very gratifying to see how much Fractal is resonating with people—Mark has put so much hard work into it.
Overview | Atlassian Design Guidelines
A nicely-documented styleguide from Atlassian. It’s not a component library, though—there’s no code here.
Maintaining and organising a pattern library - FutureLearn
Alla looks at a few different ways of organising the contents of a pattern library, based on her experience with the FutureLearn team.
Taking Pattern Libraries To The Next Level – Smashing Magazine
Here’s an epic brain dump by Vitaly on the challenges of putting together a pattern library and then maintaining it.
Sacrificing consistency for usability is fine. A slightly open-ended, inconsistent but heavily used pattern library is better than a perfectly consistent pattern library that is never used.
Style Guides, Pattern Libraries, Design Systems and other amenities. // Speaker Deck
This slide deck is a whistle-stop tour of all things styleguide and pattern-library related. Nice to see Charlotte’s excellent exercise get a shout-out.
Create awesome styles- Nucleus - Living style guide generator
Another style guide generator that parses comments in CSS.
Join Fractal on Slack!
If you’re planning on giving Fractal a test drive, jump into this Slack channel. Mark and others will be able to help you out with any questions that aren’t covered in the docs.
Fractal v1.0 | Clearleft
Mark sets the scene for Fractal, the fantastic tool he’s built for generating pattern libraries.
This 1.0 release is just a start; it hopefully provides a solid foundation on which we (and anyone else who wants to contribute) can build and expand on in the future.
Exciting!
Fractal Documentation
This is the tool that we use at Clearleft to generate pattern libraries. It’s pretty damn cool. Mark built it. It’s pretty damn cool.