awesome-semantic-ui

awesome-semantic-ui copied to clipboard

 __________________________    
|░░░░░░░░░░░░░░░░░░░░░░░░░░| 
|░░░░░░░░░|`     ,|░░░░░░░░| 
|░░░░░░░|          |░░░░░░░| A W E S O M E
|░░░░░░░|   |░░░░░░░░░░░░░░|  _______ .___  ___.   ___   .__   __._______. __  ____        __   __   __  
|░░░░░░░|      `|░░░░░░░░░░| |   ____||   \/   |  /   \  |  \ |  |        |  |/    |      |  | |  | |  | 
|░░░░░░░░░░|       |░░░░░░░| |  |__   |  \  /  | /  ^  \ |   \|  `--|  |-`|  |  ,--' ___  |  | |  | |  | 
|░░░░░░░░░░░░░░|    |░░░░░░| |   __|  |  |\/|  |/  /_\  \|  . `  |  |  |  |  |  |   |___| |  | |  | |  | 
|░░░░░░░|   `.,.   .|░░░░░░| |  |____ |  |  |  /  _____  |  |\   |  |  |  |  |  `--.      |  `-'  | |  | 
|░░░░░░░░|        |░░░░░░░░| |_______||__|  |__|_/     \_|__| \__|  |__|  |__|\____|       \_____/  |__| 
|░░░░░░░░░░░░░░░░░░░░░░░░░░| 
|░░░░░░░░░░░░░░░░░░░░░░░░░░| 

A curated list of Semantic-UI and Fomantic-UI themes, resources and related projects. The main idea is that everyone can contribute here, so we can have a central repository of informations related to Semantic/Fomantic.

Inspired by the awesome list thing.

Table of Contents

• Resources
• Themes
• Backend
• Frontend
• Examples
• Widgets
• Related
• Fomantic?

Resources

Fomantic UI

• Fomantic-UI: A community fork of the ever loved Semantic-UI.

• Fomantic-UI-LESS: LESS only distribution of Fomantic UI

• Fomantic-UI-SASS: Fomantic UI, converted to SASS and ready to drop into Rails & Compass.

Semantic UI

• Semantic-UI: An enterprise-class UI design language and React-based implementation.

• Semantic-UI-LESS: LESS only distribution of Semantic UI

• Semantic-UI-SASS: Semantic UI, converted to SASS and ready to drop into Rails & Compass.

Community

• Fomantic-UI Discord: Official Discord server for Fomantic-UI discussion

Themes

• Open Theme: Powerful new theme featuring Semantic-UI for speedily creating amazing websites and mobile-hybrid apps on GitHub Pages.

• 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.

• Semantic Ant: An Ant Design inspired theme for building beautiful modern Web apps.

• Semantic Strap: A beautiful CSS toolkit inspired by Semantic-UI and built with Bootstrap 4.

• Semantic Dojo: A responsive theme that harnesses the style awesomeness of Semantic-UI framework with Dojo toolkit powerful UI widgets, for modern and elegant web apps.

Backend

• phpMv-UI toolkit: A collection of php visual components for Semantic-UI, usable with php and MVC frameworks (Phalcon, Laravel, Yii, Symfony, CodeIgniter, CakePhp).

• Yii2 Semantic UI extension: A Yii2 extension for Semantic-UI.

Frontend

VueJS

• Semantic-UI-Vue: A Semantic-UI-React inspired Vue integration of Semantic-UI

• Transitions: Use Semantic-UI transitions as v-transition in Vue.js.

• Vue UI: This is a port of the Semantic-UI modules as Vue.js components.

• Vue Semantic: A collection of vue components for integrating the semantic ui library.

React

• React Semantic-UI: The official Semantic-UI-React library.

• React Semantic-UI Components: A collection of React components for Semantic-UI.

• React Semantify: Integrate Semantic-ui with react components.

Angular

• Ng2-Semantic-UI: jQueryless Semantic UI Angular Integrations

AngularJS

• Angular Semantic: AngularJS directives for Semantic-UI.

• Angular Semantic-UI: AngularJS native directives for Semantic UI.

Others

• Semantic UI Ember: Official Semantic UI Integration for Ember.

• Semantic-UI Meteor: Official Semantic UI Integration for Meteor.

• October CMS: Semantic UI - Boilerplate for October CMS.

• SM Calendar: Mithril Semantic-UI calendar widget.

Examples

Repositories

• Ting: A music social networking project written in Ruby on Rails and Semantic-UI.

• Strong Together: A starter project to build single page Vue.js apps as stand-alone or for Laravel / Laravel Spark projects; based on Browserify and Semantic-UI.

• RemoteRetro: A real-time application for conducting Agile retrospectives at remoteretro.org written in Elixir/Phoenix/React/Semantic-UI.

• PyroCMS Cheatsheet: A list of commands and features for PyroCMS 3 using Semantic-UI.

• Be Awesome: Single page template with Semantic-UI and jquery.

• Semantic Admin Template: An Admin template with Semantic-UI.

• React-Semantic.UI-Starter: Production-ready, performance-first, starter built with React/Redux/React-Semantic-UI/Webpack/Jest and Service Workers.

Functioning Websites

• Agile Toolkit: UI and Data Framework for Web Apps
• Elux: Estonian top home appliances e-shop
• Polipart: French political site that lets people find and contact their representatives.

Widgets

• Weather-Widget: A weather widget which can be dropped in with a single <script> tag to any website, built with Fomantic UI.
• Semantic-UI Range: Add-on range slider for Semantic UI.
• Semanti-UI Hamburger Menu: Add-on responsive menu + hamburger trigger.
• Fomantic-UI-Examples: A collection of FUI examples such as a password strength box during user account signup

Related

• Bragit: Show off your Github repository buttons with elegance using Semantic-ui labeled buttons.

Fomantic?

What is Fomantic-UI?

Fomantic-UI (also known as FUI) is a community fork of Semantic-UI. coo

Why was it made?

Fomantic-UI (FUI) was created to continue active development of Semantic-UI and has the intent to be merged back into the master repository once active development can restart. For more info please read the following issues Semantic-Org/Semantic-UI/issues/6109 Semantic-Org/Semantic-UI/issues/6413. With that said FUI is currently in the planning stage of a rewrite known as v3. You can find out more about the v3 plans here.

Should I use FUI instead of SUI?

Currently FUI is a drop in replacement of SUI with lots of bug fixes and new features and also has some new components including a calendar and slider module 😍. If you want a more updated framework then yes you should definitely switch to FUI.

Contributing

Your contributions are always welcome! Click Here to read the guidelines.

Other Awesome Lists

• Awesome

• Awesome-awesome

• Awesome-awesomeness

License

This work is licensed under a Creative Commons Attribution 4.0 International License.