doabit / semantic-ui-sass Goto Github PK
View Code? Open in Web Editor NEWSemantic UI, converted to Sass and ready to drop into Rails & Compass.
License: MIT License
Semantic UI, converted to Sass and ready to drop into Rails & Compass.
License: MIT License
Wondering what your thoughts are on using Sass encapsulation, and Compass Mixins (on things like repetitive browser-specific definitions) to shrink down the line counts, and increase readability?
BTW Great Work ๐
None of the UI js is working despite when view source all of it is included. I get no errors in console either. All of the CSS works just fine.
I'm trying the example for tabbed menu found here
http://semantic-ui.com/introduction/overview.html
<div class="ui pointing secondary demo menu">
<a class="active red item" data-tab="first">First</a>
<a class="blue item" data-tab="second">Second</a>
<a class="green item" data-tab="third">Third</a>
</div>
<div class="ui active tab segment" data-tab="first">First</div>
<div class="ui tab segment" data-tab="second">Second</div>
<div class="ui tab segment" data-tab="third">Third</div>
Here's my gemfile:
gem 'rails', '4.1.1'
gem 'pg'
gem 'sass-rails', '~> 4.0.3'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.0.0'
gem 'therubyracer', platforms: :ruby
gem 'jquery-rails'
gem 'turbolinks'
gem 'jbuilder', '~> 2.0'
gem 'sdoc', '~> 0.4.0', group: :doc
gem 'state_machine'
gem 'semantic-ui-sass', '~> 0.16.1.0'
gem 'google-webfonts-rails'
gem 'unicorn'
application.js:
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
// Loads all Semantic javascripts
//= require semantic-ui
application.css.scss:
@import "semantic-ui";
I'm guessing I'm just doing something stupidly wrong.
I don't know how this did happen but the semantic-ui require
was appended between compass & rails, therefore semantic-ui did not load with the following error-message:
~/.rvm/gems/ruby-1.9.3-p194@global/gems/semantic-ui-sass-0.10.2.0/lib/semantic/ui/sass/engine.rb:6:in `<module:Rails>': uninitialized constant Rails::Engine (NameError)
This error is surely caused by my inexperience. It might be advisable to point the behaviour in the readme out, for other users like me.. ;)
Seems the fonts URL not translated to assets pipeline in 0.19.3.0
About my application's environment
Ruby version 2.1.1-p76 (x86_64-linux)
RubyGems version 2.2.2
Rack version 1.5
Rails version 4.1.0
JavaScript Runtime Node.js (V8)
semantic-ui-sass gem version: 0.15.4.2
application.js file:
//= require semantic-ui
//= require jquery
//= require_tree .
//= require jquery_ujs
application.css.scss file:
/*
*= require_tree .
*= require_self
*/
application.html.erb file:
<title>Newstore</title> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> <%= csrf_meta_tags %> <%= render_breadcrumbs %>blah blah
Hi Guys
I am getting the error
No such framework: "semantic-ui"
When I run
bundle exec compass install semantic-ui
I am using
Rails 4.2.4
and my Gemfile has
gem "compass-rails"
gem "sass-rails"
gem 'semantic-ui-sass', github: 'doabit/semantic-ui-sass'
What am I missing ? I have put
require 'semantic-ui-sass'
In application.rb
(No config.rb
)
Using
<div class="ui two column doubling grid container">
<div class="column">Column 1</div>
<div class="column">Column 2</div>
</div>
The columns should obviously sit next to each other, but instead they sit underneath.
Switching to the official release works fine. It looks like it's to do with the load order. A .ui.container
rule is overwriting a .ui.grid
rule, forcing display: block;
instead of the required display: flex;
.
Propose to either include 'collections' after 'elements', or simply do not categorise them and load in the order of the official build.
Hi,
The dropdown seems to be broken. I am using it a menu.
The dropdown box displays but it wont dropdown on click, showing it's children.
'simple dropdown' works fine.
Do you know if it is broken?
It appears that Semantic-UI 2.0 has just been release (today I think?). This gem should look at bumping the version
When I use "card", I found that dimmer is automatically enabled for any images in it. Can I disable this feature? I want use fade reveal for two images in the cards, and do not want it to be dimmed.
Thank you!
I need to use flag property of semantic-ui which seems to be unavailable in the present gem. Please update the gem to the current semantic-ui so that gems remain upto date
Just wondering if you guys are planning on publishing this package to NPM? Thanks.
Why are you not using any SCSS variables in this project?
I just found that Semantic UI just release its beta version.
Everything is flat and look cool beta.semantic-ui.com.
Dose Semantic UI Sass will release this version too?
Hi everyone,
The latest version of Semantic UI is 2.1.3, do you can update gem, please?
I've been attempting to get the toggle button to work and when nothing happened read up on the use a javascript functions to change the state of the class for the button. Creating a folder with compass did not create links for the javascripts in an index template nor hint how it could be done, and the javascripts used in the LESS form have different names. I'm probably missing some obvious step, but this version of semantic-ui seems incomplete/difficult to use. It looks like a wonderful project, but for javascript in SASS it has a difficult learning curve....
Hi, there are some problems, for example area chart icon
class gives nothing. It's just blank. Didn't try every icon, but as far as i know pie chart icon
is not working too.
Hi All
I'm currently using this gem in a Rails backed app that uses AngularJS for its front-end.
Does this gem support Semantic 2.0 and if so - what steps are necessary to configure an app ?
I tried updating my bower.json to pull the latest version of Semantic 2.0 and while that seemed to work - when I tried accessing Semantic 2.0 specific functionality (i.e. certain colored buttons that don't exist in Semantic 1.0) - it didn't work.
Thanks
Dave
When I run rspec
after cloning/bundling, I get: 12 examples, 12 failures
Am I doing something wrong here or does this need to be fixed up?
See more details at this link
EDIT: *Sorry for posting this here. I meant to post it on the Semantic-UI Github repo.
When having the following:
<div class="event">
<div class="label">
<i class="large icons">
<i class="comment icon"></i>
<i class="corner add icon"></i>
</i>
</div>
<div class="summary">
<div class="user">
Username
</div>
added a Comment to
<a href="/projects/2/tasks/9">Create Activities</a>
<div class="date">
2016-02-24 12:19:36 UTC
</div>
</div>
<div class="extra text">
<p>This is a test</p>
</div>
</div>
the icons in the label are not shown properly.
This is caused by line 72 in views/_feed.scss, which is, by default
.ui.feed > .event > .label .icon { .... }
This matches .icon
elements inside the .icons
element. When changing this to something like
.ui.feed > .event > .label > .icon, .ui.feed > .event > .label > .icons { .... }
the icons display fine.
Fields "url" is not working as expected. Please refer to Semantic-Org/Semantic-UI#3111 in order to fix this issue. Thanks.
Hi there, I just trapped into this and I am not confident that everything is as it should be?
gem 'semantic-ui-sass', github: 'doabit/semantic-ui-sass', branch: 'v1.0beta'
This basically result in a pretty outdated version.
remote: git://github.com/doabit/semantic-ui-sass.git
revision: 768abc6bc500125d75cb29b64282b120f13397bf
branch: master
specs:
semantic-ui-sass (1.11.5.0)
What am I doing wrong?
I am building a Rails application using this library, and I found that the compiled assets is bit too big (2MB). Is there anyway to minimize the complied asset size? Maybe only include components I am using? Thanks.
I would like instructions on updating to the new 18.1 and newer versions?
Just a suggestion for you. Keep this project a SASS/SCSS port of Semantic UI instead of a Rails thing. Or at least rename the repo to -rails instead of -sass. Sass started out as a Ruby/Rails thing a long time ago but the number of non-rails users that use it nowadays is extremely high.
Hey there, I have lately been going through your repository and have notice that your partials have to much code in them. For instance your buttons file alone has 1419 lines of code in it.I propose you break up the the scss partials into even smaller pieces like button types,groups, and states. This would certainly help out people like me who are wanting to use semantic ui, but are not willing to import a 28.4kb file that we will only use a small portion of. So here is what you could do: If you go to semantic ui's documentation you will see that each module,element,view,etc all have there own sub categories. We will look at the buttons elements for an example. Buttons have four sub sections (or categories). Types,Groups,States, and variations. Those for categories could each go in there own partial like so:
File: elements/button/
_types.scss
_groups.scss
_states.scss
_variations.scss
_buttonCore.scss
The last partial on the list (called bottonCore.scss) could be used to store all of the core styles that the other button partials rely on. If you can do this then I will be so thankful, you have no idea. Don't get me wrong, I'm already extremely pleased with this project. I just think that everyone would much rather only having to import styles they will actually be using. Less bloat = faster load times.
Tell me what you think,
Mooror
I've added scss version of semantic but my icons now dissapears.
I tried to use import statement in an css.css file. The file is located in a theming gem engine, outside of the main rails app engine. It works when i use it inside of the main app, but the import statement does not work when I extract the theming to its own gem.
Sass::SyntaxError: File to import not found or unreadable: semantic-ui.
semantic_flash helper does not properly catch flash['alert']
as it's only checking for the symbol version, flash[:alert]
This is problematic for me because Devise uses string keys.
Easy fix is to use to_sym
before the checks:
type = :success if type.to_sym == :notice
type = :error if type.to_sym == :alert
I was working on a pull request but went to write specs and ran into #12. Will submit PR including new specs once that ticket is resolved.
How an I use rtl option in this gem?
Because I can not find a way to use semantic.json
and build tools
I have worked on it last week, but thiere are a lot of problems, now, the biggest is
Incompatible units: '%' and 'em'.
Sass doesn't support like this
$largeMonitorWidth: 50%;
$largeMonitorMargin: 0em 0em 0em -($largeMonitorWidth / 2);
OR
$closeHitBoxOffset: 1.3em;
$closePadding: $closeHitBoxOffset 0em 0em 0em;
I have modified lots of files, but it would difficult to update if use this method, i haven't found a good method to solve the problem. If anybody have an idea, welcome PR, thanks.
Comments Outline icon is missing.
I am running into a really weird issue with form validations. The validation display perfectly in development but don't display at all in production. The really odd thing is that there are no console errors which makes you think it should be working.
Do you have any idea of what could be causing the problem? Or has anyone else ran into similar problems?
I wanted to talk with you about automating conversion of 1.0.
If you haven't seen the new version of the project I invite you to check it out
http://beta.semantic-ui.com
http://learnsemantic.com/guide/expert.html
Let me know if you have time to chat and are interested.
after i upgraded to rails 4.1, show error below:
Sprockets::Rails::Helper::DependencyError at /
Asset depends on 'semantic-ui/loader-large.gif' to generate properly but has not declared the dependency
Please add: `//= depend_on_asset "semantic-ui/loader-large.gif"` to 'app/assets/stylesheets/application.sass'
I cant seems to get the icons to load. Everything has installed and works, but no icons
First'y, I'm not using the Ruby build tool, but broccoli-sass which use libsass to build the sass file.
In assets/stylesheets/semantic-ui/elements/_icon.scss
and In assets/stylesheets/semantic-ui/elements/_basic.icon.scss
@font-face {
...
src:font-url("semantic-ui/basic.icons.eot");
src:font-url("semantic-ui/basic.icons.eot?#iefix") format('embedded-opentype'),
font-url("semantic-ui/basic.icons.svg#basic.icons") format('svg'),
font-url("semantic-ui/basic.icons.woff") format('woff'),
font-url("semantic-ui/basic.icons.ttf") format('truetype');
...
it's not valid syntax, I think it should be src: url('...')
and url('...')'
.
tested on project
I'm deploying a Rails App in server and using this gem. But every time I run "cap production deploy:initial" this error appearing. I have added in application.js and application.css.scss this codes
//=require semantic-ui
@import "semantic-ui";
Sprockets::FileNotFound: couldn't find file 'semantic_ui/definitions/modules/accordion.js'
Syntax issue in doabit/semantic-ui-sass/blob/v1.0beta/app/assets/stylesheets/semantic-ui/elements/_list.scss is causing the following error in rails.
Sass::SyntaxError - Invalid CSS after "...="top aligned"]": expected "{", was "i.icon,"
"i.icon" may only be used at the beginning of a compound selector
Example error: http://sassmeister.com/gist/031e6ce0028bc889799e
Example fix: http://sassmeister.com/gist/862ed18e776bf74df7c6
When will be?
The actual styling code inside .scss files is pure css code. So how is this a semantic-ui sass port if it is not even using sass?
Am I using wrong files?
Willing to use SUI in a fresh RAILS project, but I'm struggling to understand where or how to overload default theme with my very own custom one.
SUI's semantic.config and theme.config files are perfect. How to apply these to a SASS gem like semantic-ui-sass ?
I am trying to use this compass plugin with yeoman.io's default webapp generator, and I've added the require: 'semantic-ui-sass' option to the Gruntfile.js
When running grunt compass
I get this error:
Errno::ENOENT on line ["250"] of /Users/martin/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/compass-0.12.3/lib/compass/sass_extensions/functions/urls.rb: No such file or directory - /Volumes/IronMan/Dropbox/sites/timetraveler/www/app/images/semantic-ui/loader-large.gif
Any ideas why this might be?
https://github.com/doabit/semantic-ui-sass/blob/master/app/helpers/semantic_flash_helper.rb
ALERT_TYPES specifies :info but the semantic_flash method only recognized :notice
This causes flash[:notice] = 'blah' to fail silently.
I was not able to find the "card" style in semantic ui in this gem, any ideas? http://semantic-ui.com/views/card.html
For those who want to use it with grunt-contrib-sass or gulp-sass would be really nice =)
I'm considering using Semantic-UI instead of Foundation for my book for Rails beginners (here http://learn-rails.com/learn-ruby-on-rails.html).
I'm having trouble using Sass @extend with semantic-ui-sass. Perhaps it is my limited knowledge of Sass but I hope you can clarify.
In the book I show how to use @extend to apply a CSS class to an HTML element, like this:
#app/assets/stylesheets/framework_and_overrides.css.scss
@import "foundation";
section {
@extend .row;
}
I tried the same thing with semantic-ui-sass but it didn't work:
#app/assets/stylesheets/framework_and_overrides.css.scss
@import "semantic-ui";
section {
@extend .center;
@extend .aligned;
@extend .two;
@extend .column;
@extend .row;
@extend .stackable;
@extend .ui;
@extend .grid;
}
Here is the view file that uses the section
tag:
#app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Test</title>
<%= stylesheet_link_tag "application" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
</head>
<body>
<main role="main" class="ui one column page grid">
<section>
<div class="column">
<p>Some words.</p>
</div>
<div class="column">
<p>More words.</p>
</div>
</section>
</main>
</body>
</html>
If I replace
<section>
with
<section class="center aligned two column row stackable ui grid">
I get the results I want, which is two side-by-side columns.
What am I overlooking? Can you say why this doesn't work with semantic-ui-sass?
I want to add ID attr to semantic_icon
helper.
like below...
= semantic_icon :some, { id: 'some-id' }
# => <i class='some icon' id='some-id'>
How do u think?
thanks.
Installed semantic-ui-sass on Rails 5-rc1 and got this error:
undefined method
start_with?' for /semantic-ui/(basic.)*icons.(?:eot|svg|ttf|woff)$/:Regexp`
What could be the problem?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.