---.
-.. \
_|_|_
__________________________ / 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
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
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.
- Reset
- Site
- Button
- Container
- Divider
- Flag
- Header
- Icon
- Image
- Input
- Label
- List
- Loader
- Rail
- Reveal
- Segment
- Code Segment 🆕
- 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
Need help or have a question? post a questions at StackOverflow
Please don't use the issue trackers for support/questions.
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 :)
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.
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
.
MIT license Copyright (c) Web Semantics, Inc.