Responsive Type

How do I quickly get started with Stackswell?

Great question! We created some Stackswell example Sketch files to download for a quick start.

How does responsive type work?

Responsive type works by checking all type styles (outside of symbols) on a page and making sure they have the correct style for the page’s breakpoint. If the style doesn't match the page's breakpoint Stackswell will automatically update the type style.

How do I set up my type systems?

Stackswell can support just about any syntax you want with two small rules:
1. Breakpoint designations comes first in the path
2. Make sure your paths are consistent

Suggested Syntax:
Breakpoint/Typeface/Header Tag/Color/Alignment

Working Syntax Examples:
SM/Helvetica/H1/Black/Left Style
MD/P/Gold/Center Style
.XL/Plex Mono/P/Gold/Center Style

Why is there a period before XL type style in the Stackswell UI Kit?

For the Extra Large breakpoint we used .XL to bring it to the top of Sketch's Text Style panel. This hack orders the type from the largest breakpoint to smallest breakpoint. With Stackswell XL and .XL are both interchangeable and will work, so you can use your preference.

How do I know if my styles are named correctly?

There is actually a very easy visual way to check and make sure your text styles are set up correctly. Go over to the styles tab and click the drop down menu. There you can check to make sure your naming paths are consistent.

If type doesn't have a text style assigned to it will Stackswell update it?

No. Stackswell will only update type that has been given a text style with the proper syntax.

Will Stackswell update type within a symbol?

No. Stackswell will not enter symbols to change type. It will only update type that is outside of a symbol. If you run Stackswell on the symbols page Stackswell will update all type on the page just like any other page so be careful.

Does Stackswell take a mobile first approach to type?

Yes. We took a mobile first approach to building Stackswell. This means if you don't specify a larger breakpoint then Stackswell will use the next smallest breakpoint down in the type system. If you only designate an extra small text style then the extra small style will show on every breakpoint. Smart? We think so. The thought is to save you work and allow more flexibility.

Smart Symbols

How do Smart Symbols work?

Smart Symbols works by checking all symbols on a page and making sure they have the assigned symbol for it's breakpoint. If the symbol doesn't match its designated breakpoint Stackswell will automatically update the symbol.

How do I name my symbols to work with Stackswell?

Stackwell can support just about any naming convention because it follows Sketch's folder naming structure. We have a suggested syntax below but you can tweak it to your suit your own needs. A good way to test to make sure you naming convention is workign correct is to go to "Insert > Symbols" then follow the path you set up.

Suggested Syntax:
Component Group/Component Name/Breakpoint

Example Stackswell Syntax:

What’s the difference between “Do Not Resize” and “Fit To Original Symbol”?

Do Not Resize will update all symbols in a page for each breakpoint. It won’t update the frame’s width and height when the symbol is updated. This is good so if you’ve changed frame sizes on a page and have added more symbols that need to be updated but you don’t want to lose the changes you’ve already made.

Fit to Original will update all the symbols in a page for each breakpoint. It will also resize every symbol’s frame to fit the updated symbol. This is great for when you’ve just resized an artboard and want to quickly update your symbols without having to waste time resizing them as well.

How do I know if my Symbols are named correctly?

A quick way to check if your symbols are named correctly. Goto Insert > Symbols and check your naming path. If you see a symbol that is out of place there is likely an error. If done correctly it should look something like this:

Miscellaneous FAQs

Will you set up my type system for me?

Yes, please email: hi[at]stackswell.io

Why is Stackswell not working?

For the most part Stackswell is working correctly. The problem is usually created by a naming syntax issue.

Troubleshooting syntax tips:
• Sketch has a character limit for text styles when you automatically create a new text style.
• Sketch adds the word "style" to the end of your new text style.
• Text names and symbols are case sensitive.

If you check these and Stackswell is still not working feel free to email us at support[at]stackswell.io. Please include your license key and what version of Stackswell you are using.

What are the artboard breakpoints?

All artboard sizes and grids are based off of Bootstrap v4.0.0.

XS - Extra Small - <576px
SM - Small - ≥576px
MD - Medium - ≥768px
LG - Large - ≥992px
XL - Extra Large ≥1200px

Do you offer enterprise pricing?

Yes we do, please email: hi[at]stackswell.io

Where do I send feedback?

Please email feedback to: support[at]stackswell.io

Why did you build Stackswell?

We built Stackswell to help Designers create responsive designs more efficiently and consistently in Sketch. We wrote a post explaining our thoughts more in depth here.