semantic-ui-sketch

KO | EN

Minimalist Open Source Repository Search Engine

gitlite — search

#typescript #ai-agents #deepseek-harness #dsh-plugin #open-source #ai #cli #claude-code #windows #codex #developer-tools #dsh

semantic-ui-sketch

★ 100 Open GitHub ↗

Sketch Prototyping Kit and Style Guide Generator for Semantic UI

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

![Semantic UI Sketch Styleguide thumbnail](https://github.com/stoneddesigner/semantic-ui-sketch/raw/master/thumb.png)

# Semantic UI Sketch Styleguide v0.5

The goal of this styleguide is to document all the [**Semantic UI**](http://semantic-ui.com) 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.

## Credits

Shoutout to [**Jan Losert**](http://janlosert.com/), he created the base styleguide that I've adapted. Much love to the [**Semantic UI**](https://semantic-ui.com/) crew for creating this amazing design system and many of the assets used. And special thanks to [**Font Awesome**](https://fontawesome.com/), they created the icon library Semantic UI uses.

semantic-ui-sketch

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README