semantic-ant

semantic-ant copied to clipboard

                                                        ---.
                                                        -..  \
                                                          _|_|_
                             __________________________ /  O    \
                            |░░░░░░░░░░░░░░░░░░░░░░░░░░|\_______/
                            |░░░░░░░░░░░░░░░░░░░░░░░░░░|   /   \
                            |░░░░░░░░░|`     ,|░░░░░░░░|   \/   \
                            |░░░░░░░|          |░░░░░░░|   /'---'\
                            |░░░░░░░|   |░░░░░░░░░░░░░____/  |     \_____
                            |░░░░░░░|      `|░░░░░░░░░░|  __/\____/      \_
                            |░░░░░░░░░░|       |░░░░░░░|       |            \
                            |░░░░░░░░░░░░░░|    |░░░░░░|      / \__  /\      '_
                            |░░░░░░░|   `.,.   .|░░░░░░|     /     \__ \        \
                            |░░░░░░░░|        |░░░░░░░░|     \        \_\_________\
                            |░░░░░░░░░░░░░░░░░░░░░░░░░░|      \          \     \
                            |░░░░░░░░░░░░░░░░░░░░░░░░░░|       \          \     

                    ____  ____  _  _  ____  _  _  ___  _  ____        ____  _  _  ___
                    [__   |___  |\/|  |__|  |\ |   |   |  |      __   |__|  |\ |   |  
                    ___]  |___  |  |  |  |  | \|   |   |  |___        |  |  | \|   |  
                    
                              
                              
         ░░░░░░░░░░▒▒▒▒▒▒▒▓▓▓▓▓███  W O R K   I N   P R O G R E S S  ███▓▓▓▓▓▒▒▒▒▒▒░░░░░░░░░░░
                              
                              

Ant Design inspired theme for Semantic-UI

Semantic Ant is a custom theme for building beautiful modern Web apps with the combined awesomeness of Semantic-UI framework and the elegant minimal styles of Ant Design for beautiful and responsive layouts

Live demo

Install

Firs install all npm modules

npm i

To build

npm run build

This will compile two themes, the default Semantic-UI theme default and Semantic-Ant theme antd. The generated styles are stored at assets/css/ui/antd and assets/css/ui/default.

To achieve this double (or more) builds, the build script in package.json works behind–the–scenes to generate two distinct theme.config & semantic.json copies per build. The template for these are stored in templates folder

If you'd like to make changes in development mode, run the watch Gulp task for css,

npm run watch

For Javascript development,

npm run watch:js

Finally, if you make changes to Javascript code, here's how to build js files,

npm run build:js

Theming

The official documentation of Semantic-UI is a great resource that explains with examples how to work with themes. More information about the Semantic-Ant framework and its components can be found in the documentation section.

Progress

• [ ] Reset
• [x] Site
• [x] Button
• [ ] Container
• [ ] Divider
• [ ] Flag
• [ ] Header
• [x] Icon
• [ ] Image
• [ ] Input
• [ ] Label
• [ ] List
• [ ] Loader
• [ ] Rail
• [ ] Reveal
• [x] Segment
• [x] Code Segment :new:
• [ ] Step
• [ ] Breadcrumb
• [ ] Form
• [ ] Grid
• [ ] Menu
• [ ] Message
• [ ] Table
• [ ] Ad
• [ ] Card
• [ ] Comment
• [ ] Feed
• [ ] Item
• [ ] Statistic
• [ ] Accordion
• [ ] Checkbox
• [ ] Dimmer
• [ ] Dropdown
• [ ] Embed
• [ ] Modal
• [ ] Nag
• [ ] Popup
• [ ] Progress
• [ ] Search
• [ ] Shape
• [ ] Sidebar
• [ ] Sticky
• [ ] Tab
• [ ] Transition
• [ ] Api
• [ ] Form
• [ ] State
• [ ] Visibility

Support

Need help or have a question? post a questions at StackOverflow

Please don't use the issue trackers for support/questions.

Contributions

This project is in development but we are more than happy to accept external contributions to the project in the form of feedback, bug reports and even better - pull requests :)

Related

Awesome Ant Design, a list of resources for Ant Design.

Semantic-UI: a development framework that helps create beautiful, responsive layouts using human-friendly HTML.

Credits

This project uses and is heavily inspired by the following projects

Ant Design, an enterprise-class UI design language and React-based implementation.

Recreating GitHub, A Semantic UI project designed to showcase theming with examples to create a packaged theme, using component CSS overrides, and managing themes with theme.config.

License

MIT license Copyright (c) Web Semantics, Inc.