The goal of this styleguide is to document all the Semantic UI components as a Sketch symbol library to make the prototyping of SUI projects easier. The mission is to strive to follow the same standards Semantic UI sets forth with it's semantic and atomic basis for it's design system.

Inside you'll find a components that are made up of several different symbols. The different symbols allow for the same flexibility you receive from the semantic orientated structure of the CSS framework. Need a different background color? Maybe your button needs to change state? Simply click your component and customize it in Sketch's righthand panel.

This file is also capable of generating a complete style guide for you, based on the way you customize your symbols. All your colors, text style, buttons, inputs, etc can be exported as PDFs, SVGs, or more from the Styleguide pages.

Instructions

Using the Sketch File

1. Make a new page
2. Click Insert on the top bar,
3. Then hover over Symbols
4. Find whichever component you need.

It's recommended you play with combining symbols to create components. Some symbols, like Cards or even Buttons, are comprised of many symbols that make up the final product. For example, the conditional button is simply a left only and right only button, with the conditional shape and text in the middle. Components like labeled buttons are achieved in this same way, with one labeled button and another regular one stacked underneath.

Customizing the Styleguide

1. Open file
2. Go to Symbols page
3. Follow instructions there to customize

Since Semantic does some interesting things Sketch doesn't like, we have a few containers/borders that are specialized for Semantic. You can find special instruction for those on bottom of the last step.

You'll also find that Sketch doesn't allow you to change things such as text color or justification from the side panel. This is why I've created (in some cases), extra buttons that have font color and weight variations.

Contributing

Feel free to fork this and add your own components. I'll try my best to merge them all into this master file.

You can check the CHANGELOG to get an idea of what's been worked on. Whatever hasn't been converted to a symbol yet on the "Old Semantic Converted" page is a priority.

Download

Download the Sketch file here on Github

Hope that helps!
Stay regular,
Oscar