• Stars
    star
    50,753
  • Rank 208 (Top 0.01 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created about 11 years ago
  • Updated 7 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Semantic is a UI component framework based around useful principles from natural language.

Semantic

Semantic UI

Join the chat at https://gitter.im/Semantic-Org/Semantic-UI

CDNJS

Semantic is a UI framework designed for theming.

Key Features

  • 50+ UI elements
  • 3000 + CSS variables
  • 3 Levels of variable inheritance (similar to SublimeText)
  • Built with EM values for responsive design
  • Flexbox friendly

Semantic allows developers to build beautiful websites fast, with concise HTML, intuitive javascript, and simplified debugging, helping make front-end development a delightful experience. Semantic is responsively designed allowing your website to scale on multiple devices. Semantic is production ready and partnered with frameworks such as React, Angular, Meteor, and Ember, which means you can integrate it with any of these frameworks to organize your UI layer alongside your application logic.

2.5.0 Release (Oct 6, 2022)

Semantic UI is now compatible with Node 18 and Gulp 4.

User Support

Please help us keep the issue tracker organized. For technical questions that do not include a specific JSFiddle test case (bug reports), or feature request please use StackOverflow to find a solution.

Visit our contributing guide for more on what should be posted to GitHub Issues.

Install

Recommended Install

npm install semantic-ui  # Use themes, import build/watch tasks into your own gulpfile.

Semantic UI includes an interactive installer to help setup your project.

Additional Versions

Environment Install Script Repo
CSS Only npm install semantic-ui-css CSS Repo
LESS Only npm install semantic-ui-less LESS Repo
LESS plugin npm install less-plugin-semantic-ui LESS Plugin Repo
EmberJS ember install:addon semantic-ui-ember Ember Repo
Meteor - LESS meteor add semantic:ui Meteor Repo
Meteor - CSS meteor add semantic:ui-css CSS Repo
Bower bower install semantic-ui

Check out our integration wiki for more options.

Browser Support

  • Last 2 Versions FF, Chrome, Safari Mac
  • IE 11+
  • Android 4.4+, Chrome for Android 44+
  • iOS Safari 7+
  • Microsoft Edge 12+

Although some components will work in IE9, grids and other flexbox components are not supported by IE9 and may not appear correctly.

Community

Getting Help

Please do not post usage questions to GitHub Issues. For these types of questions use our Gitter chatroom or StackOverflow.

Submitting Bugs and Enhancements

GitHub Issues is for suggesting enhancements and reporting bugs. Before submiting a bug make sure you do the following:

  • Check out our contributing guide for info on our release cycle.
  • Fork this boilerplate JSFiddle to create a test case for your bug. If a bug is apparent in the docs, that's ok as a test case, just make it clear exactly how to reproduce the issue. Only bugs that include a test case can be triaged.

Pull Requests

When adding pull requests, be sure to merge into the next branch. If you need to demonstrate a fix in next release, you can use this JSFiddle

International

  • Chinese A Chinese mirror site is available at http://www.semantic-ui.cn.
  • Right-to-Left (RTL) An RTL version can be created using our build tools by selecting rtl from the install script.
  • Translation To help translate see the Wiki Guide for translations.

Resources

Resource Description
Bugs & Feature Requests All bug submission require a link to a test case, and a set of steps to reproduce the issue. You can make a test case by forking this JSFiddle, then submit your bug report on GitHub Issues
Live Chat Join our Gitter.im Room
Newsletter Updates Sign up for updates at semantic-ui.com
Additional Resources Submit a question on StackOverflow or ask our Google Group

Places to Help

Project How To Help Next Step
Localization Help us translate Semantic UI into your language Join our Translation Community
SCSS SASS needs PR to support variables inside @import Add Pull Request for #739
Angular Help develop angular bindings Reach Out on GitHub Issues
Guides & Tutorials Help write guides and tutorials Join the discussion

Reaching Out

If you'd like to start a conversation about Semantic feel free to e-mail me at [email protected]

More Repositories

1

Semantic-UI-React

The official Semantic-UI-React integration
JavaScript
13,117
star
2

Semantic-UI-Angular

Semantic UI Angular Integrations
TypeScript
561
star
3

Semantic-UI-CSS

CSS Only distribution
JavaScript
478
star
4

Semantic-UI-Ember

Official Semantic UI Integration for Ember
JavaScript
333
star
5

Semantic-UI-Docs

Official Documentation for Semantic UI
JavaScript
301
star
6

Semantic-UI-Meteor

Official Semantic UI Integration for Meteor
JavaScript
224
star
7

Semantic-UI-LESS

LESS only distribution
JavaScript
201
star
8

example-github

Example repo using Semantic UI to replicate GitHub Project Home
CSS
149
star
9

Semantic-UI-Rails-LESS

This is a gem for Rails with Semantic UI (http://semantic-ui.com) assets inside.
JavaScript
123
star
10

Semantic-UI-ar

سيمانتك يو آي تزيد فاعلية العمل بين المصممين و المطورين من خلال مفردات ذات دلالة لفظية مشتركة لبناء واجهة المستخدم
JavaScript
42
star
11

Example-External-Gulpfile

Example of importing gulp tasks into your gulpfile
JavaScript
27
star
12

UI-Dropdown

A dropdown allows a user to select a value from a series of options
JavaScript
24
star
13

Learn-Semantic

Official repo of learnsemantic.com
JavaScript
24
star
14

Semantic-UI-Angular2

20
star
15

UI-Icon

An icon is a glyph used to represent a concept
CSS
14
star
16

Semantic-UI-SASS

Semantic UI SASS Port
13
star
17

UI-Modal

A modal displays content that temporarily blocks interactions with the main view of a site
JavaScript
13
star
18

UI-Sidebar

A sidebar hides additional content beside a page.
JavaScript
13
star
19

UI-Transition

A transition is an animation usually used to move content in or out of view
JavaScript
12
star
20

UI-Card

A card displays site content in a manner similar to a playing card
CSS
10
star
21

UI-Button

A button indicates a possible user action
CSS
9
star
22

UI-Search

A search element allows a user to query for results from a selection of data
JavaScript
9
star
23

UI-Flag

A flag is is used to represent a political state
CSS
8
star
24

UI-Loader

A loader alerts a user to wait for an activity to complete
CSS
8
star
25

UI-Menu

A menu displays grouped navigation actions
CSS
8
star
26

UI-Popup

A popup displays additional information on top of a page
JavaScript
8
star
27

Module-Examples

Annotated source of Semantic UI Module Format
JavaScript
7
star
28

UI-Form

A form displays a set of related user input fields in a structured way
JavaScript
7
star
29

UI-Table

A table displays a collections of data grouped into rows
CSS
7
star
30

UI-Visibility

Visibility provides a set of callbacks for when a content appears in the viewport
JavaScript
6
star
31

Semantic-UI-Meteor-Data

Data package for Semantic UI Meteor
JavaScript
6
star
32

UI-Progress

A progress bar shows the progression of a task
JavaScript
5
star
33

UI-Checkbox

A checkbox allows a user to select a value from a small set of options, often binary
JavaScript
5
star
34

UI-Site

A site is a set of global constraints that define the basic parameters of all UI elements
JavaScript
5
star
35

UI-Embed

An embed displays content from other websites like YouTube videos or Google Maps
JavaScript
5
star
36

UI-Grid

A grid is used to harmonize negative space in a layout
CSS
5
star
37

UI-Placeholder

Semantic UI placeholder component
CSS
4
star
38

UI-Rating

A rating indicates user interest in content
JavaScript
4
star
39

UI-Step

A step shows the completion status of an activity in a series of activities
CSS
4
star
40

UI-Tab

A tab is a hidden section of content activated by a menu
JavaScript
4
star
41

UI-Item

An item view presents large collections of general site content for display
CSS
4
star
42

UI-Reset

A reset is a set of normalized values for CSS properties that correct for abberations in browser defaults
CSS
4
star
43

UI-Label

A label is used to display content classification
CSS
4
star
44

UI-Sticky

Sticky content fixes itself to the browser viewport as content is scrolled
JavaScript
4
star
45

UI-Api

API allows elements to trigger actions on a server
JavaScript
4
star
46

UI-Container

CSS
3
star
47

UI-Statistic

A statistic displays the current value of an attribute
CSS
3
star
48

UI-Accordion

An accordion allows users to toggle the display of sections of content
JavaScript
3
star
49

UI-Video

This is a legacy component and is no longer maintained
JavaScript
3
star
50

UI-Reveal

A reveal displays additional content in place of previous content when activated
CSS
3
star
51

UI-Divider

A divider visually segments content into groups
CSS
3
star
52

UI-Nag

A nag is an important message that persists until dismissed by a user
JavaScript
3
star
53

UI-Message

A message displays information that explains nearby content
CSS
3
star
54

UI-Segment

A segment is used to create a grouping of related content
CSS
3
star
55

UI-Breadcrumb

A breadcrumb is used to show heirarchy between content
CSS
2
star
56

Semantic-UI-Docs-Api

Sequelize / Express Server For API Demos
JavaScript
2
star
57

UI-Feed

A feed presents user activity chronologically
CSS
2
star
58

Semantic-UI-Legacy

Hosts pre-release version of library and documentation
JavaScript
2
star
59

UI-List

A list is used to group related content
CSS
2
star
60

UI-Ad

CSS
2
star
61

UI-Comment

A comment displays user feedback to site content
CSS
2
star
62

UI-Shape

A shape is a three dimensional object displayed on a two dimensional plane
JavaScript
2
star
63

UI-Image

An image is a graphic representation of something
CSS
2
star
64

UI-Dimmer

A dimmer hides distractions to focus attention on particular content
JavaScript
2
star
65

Semantic-UI-1.0-Docs

This repository hosts deployed files for 1.x Semantic UI Docs
JavaScript
2
star
66

UI-Header

A header provides a short summary of content
CSS
1
star
67

Semantic-UI-Beta-Docs

Docs for beta version of Semantic UI
JavaScript
1
star
68

UI-Input

An input is a field used to elicit a response from a user
CSS
1
star
69

UI-Rail

A rail is used to show accompanying content outside the boundaries of the main view of a site
CSS
1
star