How do I quickly get started with Stackswell?
Great question! We created some Stackswell example Sketch files to download for a quick start.
Home
Great question! We created some Stackswell example Sketch files to download for a quick start.
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.
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
XL/Helvetica/P/Gold/Center
MD/P/Gold/Center Style
.XL/Plex Mono/P/Gold/Center Style
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.
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.
No. Stackswell will only update type that has been given a text style with the proper syntax.
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.
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 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.
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:
Components/Sliders/SM
Components/Sliders/LG
Example/XS
Example/MD
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.
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:
Yes, please email: hi[at]stackswell.io
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.
All artboard sizes and grids are based off of Bootstrap v4.0.0.
Breakpoints:
XS - Extra Small - <576px
SM - Small - ≥576px
MD - Medium - ≥768px
LG - Large - ≥992px
XL - Extra Large ≥1200px
Yes we do, please email: hi[at]stackswell.io
Please email feedback to: support[at]stackswell.io
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.