Skip to content
This repository has been archived by the owner on Apr 2, 2020. It is now read-only.

Commit

Permalink
Finishing up README text
Browse files Browse the repository at this point in the history
Still need images
  • Loading branch information
Drew Vosburg committed Sep 22, 2018
1 parent fb38c7d commit 06fac7d
Showing 1 changed file with 38 additions and 6 deletions.
44 changes: 38 additions & 6 deletions README.md
Expand Up @@ -20,7 +20,7 @@ Here's an example of a type style tag:
```
[D4L] Subheader
```
There are three components within that one tag, each one character long. Let's break them down:
There are several components within that one tag, followed by the name. Let's break them down:

##### Ramp
The first character after the opening bracket is the ramp. There are two options here: "D" for "desktop" and "M" for "mobile." This lets the plugin know at what scale the style should be applied.
Expand All @@ -30,11 +30,14 @@ The second character after the opening bracket of a type style tag is the select

DP gives you the styles for a `<p>` tag at desktop size, etc.

#### Sub-selectors
##### Sub-selectors
If you need more than one style at a given size, you can use sub-selectors! You can add a decimal point and any number of decimal places.

#### Variant
Need still further differentiation, such as color variants? You can add ANYTHING after the selector inside of the tag. It will be ignored, but you can add it.
##### Variant
Need still further differentiation, such as color variants? You can add ANYTHING after the selector inside of the tag. It will be ignored in the output, but you can add it to help with organization within Sketch

##### Name
The name of the style will be included as a comment in the SCSS file. For elements with a CSS selector (h1-h5 and p), the variables will be named with the selector and NOT the name.

### Colors
The plugin can export colors as an SCSS variable. In order to indicate that a color should be exported, create a Layer Style with a color fill and no shadows. Only the fill color will be exported. You may name your layer style whatever you want. Variables are exported in alphabetical order, which is how they appear in Sketch.
Expand Down Expand Up @@ -90,7 +93,36 @@ Radial gradients ignore the careful scale, rotation, and positioning of your ell
You can't position conical gradients in Sketch, so the output SCSS is centered, like it is in Sketch. Currently, only Google Chrome supports rendering conical gradients, but there are handy polyfills for other browsers.

## Scale Type Ramp
Ever heard of a [modular type ramp](http://gridlover.net/try)? This lets you make and adjust them in a hurry, provided you use a type style naming convention.
If you want to use a [modular type ramp](http://gridlover.net/try), this action allows you to make and adjust one in a hurry. In order to do this, you will need to use type style tags.

#### Type Style Tags

Tags are a relatively simple construct specific to this plugin. A "tag" generally appears at the beginning of a style name and is contained within square brackets like [this]. Tags are optional, but they can contain lots of helpful context when designing in Sketch and for the plugin when exporting.

Here's an example of a type style tag:
```
[D4L] Subheader
```
There are several components within that one tag, followed by the name. Let's break them down:

##### Ramp
The first character after the opening bracket is the ramp. There are two options here: "D" for "desktop" and "M" for "mobile." This lets the plugin know at what scale the style should be applied.

##### Selector
The second character after the opening bracket of a type style tag is the selector. A selector can be a number 1-6 or the character "P." Numbers correspond to different header styles. D1 is the `<h1>` header at the desktop size, M1 is the `<h1>` header at mobile sizes.

DP gives you the styles for a `<p>` tag at desktop size, etc.

##### Sub-selectors
If you need more than one style at a given size, you can use sub-selectors! You can add a decimal point and any number of decimal places.

##### Variant
Need still further differentiation, such as color variants? You can add ANYTHING after the selector inside of the tag. It will be ignored in the output, but you can add it to help with organization within Sketch.

##### Name
The name of the style, which follows the tag will be included as a comment in the SCSS file. For elements with a CSS selector (h1-h5 and p), the variables will be named with the selector and NOT the name.

## Align Text
Stop the ever-frustrating alignment problems with type styles overriding your text alignment. Requires specific symbols with specific naming conventions.
Stop the ever-frustrating alignment problems with type styles overriding your text alignment. Requires specific symbols with specific naming conventions.

Symbols must start with "Text Style" and end with "Centered" to be centered. To be right aligned, the symbol name must start with "Text Style" and end with "Right."

0 comments on commit 06fac7d

Please sign in to comment.