• Stars
    star
    123
  • Rank 290,145 (Top 6 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created almost 10 years ago
  • Updated over 3 years ago

Reviews

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

Repository Details

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

No Longer Maintained

Please consider this project abandoned. There are many roadblocks that prevent upgrading this to the latest Semantic-UI and now there's Fomantic-UI. #53. I suggest you look at bundling Fomantic-UI in with webpacker instead. It is possible though not completely straightforward. This project is starting to get security tickets around dependencies (that I won't fix), so user beware.

less-rails-semantic_ui Gem Version Build Status

This is a gem for Rails with Semantic UI assets inside. It provides the ability to customize component themes and variables on the fly in your application.

Features

  • LESS based (meaning that it doesn't contains hacks usually used to convert LESS to SASS)
  • Semantic UI configs integrated in your application (you can customize and change component styles on the fly)

Installation

Add this block to your application's Gemfile:

# Semantic UI assets

gem 'less-rails-semantic_ui'
gem 'autoprefixer-rails'
gem 'therubyracer'

Semantic UI is using autoprefixer (in our case autoprefixer-rails) to appending additional CSS vendor-prefixes for improve compatibility with different browsers. Without it some parts of Semantic UI (i.e. transitions or modal dialogs because they depends to transitions) won't works in some browsers. You can remove this gem if you don't use such functionality of Semantic UI.

P.S. I hope in the future this hack will be unnecessary.

And then execute:

$ bundle install

After that, install configuration files inside your application in the vendor/assets directory with:

$ rails generate semantic_ui:install

Require semantic_ui/semantic_ui.js in app/assets/application.js:

...
//= require semantic_ui/semantic_ui
...

Require semantic_ui/semantic_ui.css in app/assets/application.css:

...
*= require semantic_ui/semantic_ui
...

Upgrade to new version

Execute command below and merge your custom and new changes in config files:

$ rails generate semantic_ui:install

Customization

You can modify any Semantic UI configs and files placed to vendor/assets/javascripts/semantic_ui and vendor/assets/stylesheets/semantic_ui directories. For example:

  • if you wish to remove unused components you can just remove corresponding lines from semantic_ui.js and semantic_ui.css files.
  • if you wish to change components themes you can just configure them in theme.config.
  • if you wish to change component variables or extend components you can just configure corresponding config/{collections,elements, globals,modules,views}/*.{overrides,variables} files.

Versioning

This gem will directly track the semantic versioning of the Semantic UI project. Major and minor versions will always match to theirs, though we may have tiny patch level releases specific to this gem.

Contributing

  1. Fork it ( https://github.com/maxd/less-rails-semantic_ui )
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Commit your changes (git commit -am 'Add some feature')
  4. Push to the branch (git push origin my-new-feature)
  5. Create a new Pull Request

More Repositories

1

Semantic-UI

Semantic is a UI component framework based around useful principles from natural language.
JavaScript
50,753
star
2

Semantic-UI-React

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

Semantic-UI-Angular

Semantic UI Angular Integrations
TypeScript
561
star
4

Semantic-UI-CSS

CSS Only distribution
JavaScript
478
star
5

Semantic-UI-Ember

Official Semantic UI Integration for Ember
JavaScript
330
star
6

Semantic-UI-Docs

Official Documentation for Semantic UI
JavaScript
301
star
7

Semantic-UI-Meteor

Official Semantic UI Integration for Meteor
JavaScript
224
star
8

Semantic-UI-LESS

LESS only distribution
JavaScript
201
star
9

example-github

Example repo using Semantic UI to replicate GitHub Project Home
CSS
149
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-Site

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

UI-Checkbox

A checkbox allows a user to select a value from a small set of options, often binary
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-Rating

A rating indicates user interest in content
JavaScript
4
star
38

UI-Placeholder

Semantic UI placeholder component
CSS
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

Semantic-UI-Legacy

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

UI-List

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

UI-Breadcrumb

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

UI-Image

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

Semantic-UI-Docs-Api

Sequelize / Express Server For API Demos
JavaScript
2
star
60

UI-Ad

CSS
2
star
61

UI-Feed

A feed presents user activity chronologically
CSS
2
star
62

UI-Comment

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

UI-Dimmer

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

UI-Shape

A shape is a three dimensional object displayed on a two dimensional plane
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