IBM / css-gridish

Automatically build your grid design’s CSS Grid code, CSS Flexbox fallback code, Sketch artboards, and Chrome extension.

Home Page:https://ibm.github.io/css-gridish/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

[docs] Improve class name readability and add common definitions to help first-time users

jendowns opened this issue · comments

After talking to some first-time users, there are two small things we can change to make this documentation more readable and more easy to digest.

1. Split up the "Classes" table by "parent" and "child" classes

The class name table in the Grid'sREADME.md was a lot for a new user to take in. One user wanted to know, at a glance, which classes were suited for parent elements and which were for children.

2. Define common terms

The following terms sparked some confusion, so it might help to have a section of definitions to make sure everyone is one the same page:

  • Breakpoint -- One first-time user didn't realize that this was the same thing as the values in an @media query, so they kept thinking it was a new concept/vocab unique to Gridish that they needed to understand.

  • Artboards -- One first-time user was a developer who didn't seem familiar with Sketch or terminology used by designers.

Note: while these are the only 2 terms that came up, we can be on the lookout for other terms that are worth defining explicitly.

@seejamescode I'm happy to work on this, if you'd like to assign it to me. 👍

Implemented in future’s v2.1.0 branch