reinvanoyen / typex

Typography web export (css, sass, html, json, ..) plugin for Sketch

Export your text styles to CSS, SASS mixins, JSON, HTML, ...

Highly configurable (Including rem, em units, etc)

Installation

1. Download the plugin.
2. Unzip the downloaded file.
3. Double click on typex.sketchplugin

Typex?

Typex is a Sketch plugin which provides you with all the tools you need to export your text styles to the web platform, ready for your developer to put them to use. Instead of just giving you the typical simplistic copy-pastable CSS snippet for your text styles, you can now actually configure how to export them to CSS, SASS mixins and JSON.

typex's Issues

Make sure font weights are translated well

For example, ExtraBold should be translated into font-weight: 900;

[Request] Specify license

Include name in JSON

Hi, sorry for this abuse of gh-issues. This is a fantastic plugin but I am having to do some extensive processing to get it into something I can really use. I'd love to be able to use our existing JSON > SCSS gulp task, but this JSON just has the rules, not the names of each style (unlike the mixins and css options). My issue is I need SOMETHING to loop over to create utility classes where I can use the same .class-name and nest in the media queries (thinking of something similar to Sarah Dayan's Modifiers: https://gist.github.com/sarahdayan/4d2cc04a636e8039f10a889a0e29fbd9)

Anyway right now I can get mixins
Input:
@mixin type-heading-4-tablet-regular-white-left
{
font-family: Helvetica;
font-weight: 400;
text-transform: uppercase;
font-size: 25px;
letter-spacing: 0px;
line-height: 0.86;
}
@mixin type-heading-4-mobile-regular-white-left
{
font-family: Helvetica;
font-weight: 400;
text-transform: uppercase;
font-size: 20px;
letter-spacing: 0px;
line-height: 0.96;
}

etc

Which are great once I've converted them to:

.h-text--heading-4-regular {
@include media($phone) {
@include heading-4-mobile-regular;
}
@include media($tablet) {
@include heading-4-tablet-regular;
}
@include media($desktop) {
@include heading-4-desktop-regular;
}
}

But otherwise are not mega useful. Or there's JSON but the name is nested in so I have to write a ton more processing rules to grab that, I guess? Unless I'm missing something. If I could nominate/group by keyword in the GUI it would be incredible. But that might be hard. I'm doing a bazillion regExp in gulp-replace at the moment and it's still not reeeeeally that useful. I'm wondering if we could get the JSON to format a bit differently, say, by pulling up the name and then doing something like the JSON-SASS colour swatches: https://gist.github.com/KatieMFritz/1fa770a5dee59de8a12d796165f855d9
?

Only for export or can you also import stuff?

Is this only for exports or could you also import?