jhilden / jquery-ui-sass-rails Goto Github PK
View Code? Open in Web Editor NEWThis project forked from jquery-ui-rails/jquery-ui-rails
jQuery UI stylesheets packed as Sass files for the Rails 3.1+ asset pipeline
License: Other
This project forked from jquery-ui-rails/jquery-ui-rails
jQuery UI stylesheets packed as Sass files for the Rails 3.1+ asset pipeline
License: Other
Do you have any plans for making this repository slightly less rails specific?
You have one of the most active repositories with a jquery-ui css -> scss conversion and your single file of scss variables is extremely useful.
I'm currently attempting to use your repository with with bower as thus:
"jquery": "~1.10.2",
"jquery-ui": "~1.10.3",
"jquery-ui-sass": "git://github.com/jhilden/jquery-ui-sass-rails#master",
and adding these import statements
@import "variables" // custom override for jquery ui theme variables
@import "jquery-ui-sass/app/assets/stylesheets/jquery.ui.core.css.scss";
@import "jquery-ui-sass/app/assets/stylesheets/jquery.ui.accordion.css.scss";
@import "jquery-ui-sass/app/assets/stylesheets/jquery.ui.autocomplete.css.scss";
@import "jquery-ui-sass/app/assets/stylesheets/jquery.ui.button.css.scss";
@import "jquery-ui-sass/app/assets/stylesheets/jquery.ui.datepicker.css.scss";
@import "jquery-ui-sass/app/assets/stylesheets/jquery.ui.dialog.css.scss";
@import "jquery-ui-sass/app/assets/stylesheets/jquery.ui.menu.css.scss";
@import "jquery-ui-sass/app/assets/stylesheets/jquery.ui.progressbar.css.scss";
@import "jquery-ui-sass/app/assets/stylesheets/jquery.ui.resizable.css.scss";
@import "jquery-ui-sass/app/assets/stylesheets/jquery.ui.selectable.css.scss";
@import "jquery-ui-sass/app/assets/stylesheets/jquery.ui.slider.css.scss";
@import "jquery-ui-sass/app/assets/stylesheets/jquery.ui.spinner.css.scss";
@import "jquery-ui-sass/app/assets/stylesheets/jquery.ui.tabs.css.scss";
@import "jquery-ui-sass/app/assets/stylesheets/jquery.ui.tooltip.css.scss";
However:
I can't import any files with relative imports such as jquery.ui.all because the relative imports within the directory don't work without the ".css.scss" extension.
I also can't use the "image-path" rails specific function.
It might be a good idea to have a central jquery-ui-sass repository which is git submoduled and your rake tasks to convert the image-path etc. can be run there?
One tangentially similar project is https://github.com/jquery-ui-bootstrap/jquery-ui-bootstrap which converted the base theme to LESS and modified variables and themes etc. to provide a bootstrap compatible theme.
If you're familiar with bootstrap, you might be aware that they now support both SCSS and LESS using a completely automated conversion rake task.
https://github.com/twbs/bootstrap-sass/blob/master/tasks/converter.rb
It might be easy to build a jquery-ui sass bootstrap theme built off of this repository.
jquery, from what I've read, wants to stick to only web standards so this repository can easily become the defacto jquery-ui-sass repository for all web frameworks instead of just rails.
Just some food for thought and I'd love to help!
Or are there any other options?
I'm a bit confused how you're supposed to use this using the @import methodology you mention. Can you clarify with a full example?
Does application.css.sass replace application.css entirely? Does it complement it? I would think that they would collide having the same name, but then again I've not ever done anything but the vanilla asset pipeline stuff with the manifest files.
Thanks,
Jon
One important caveat when working with jquery-ui-sass-rails
is that you can't change a theme's background images. You might be able to change a variable like the $bgColorActive
to a different color, but this won't have any effect on the background-image set in $bgImgUrlActive
. The same is true for the color of icons.
Conclusion (for now): If you need to change background or icon colors you probably also need to set the corresponding $bgImgUrl
variables to none
.
Thanks to @rxaviers for pointing this out in jquery/download.jqueryui.com#36 (comment)
This is a continuation of an issue I initially brought up at jquery-ui-rails#58 (comment).
In my local dev environment, this gem (as well as jquery-ui-rails) correctly produces image paths starting with /assets. In production, however, the images start with /images, and aren't being displayed (404s).
Here are some details about my setup.
I'm deploying with AWS' Elastic Beanstalk (Ruby 1.9.3, Rails 3.2.15).
EB precompiles assets automatically after pushing changes via Git.
I'm only interested in including jquery ui for the datepicker.
My current work around for fixing the bad image paths in production is to override SASS variables (see https://github.com/jhilden/jquery-ui-sass-rails/blob/master/app/assets/stylesheets/themes/_jquery.ui.base.css.scss). Here's what my jquery.ui.custom.css.scss looks like that I'm importing.
$bgImgUrlContent: url("/assets/jquery-ui/ui-bg_flat_75_ffffff_40x100.png") !default;
$bgImgUrlHeader: url("/assets/jquery-ui/ui-bg_highlight-soft_75_cccccc_1x100.png") !default;
$bgImgUrlDefault: url("/assets/jquery-ui/ui-bg_glass_75_e6e6e6_1x400.png") !default;
$bgImgUrlHover: url("/assets/jquery-ui/ui-bg_glass_75_dadada_1x400.png") !default;
$bgImgUrlActive: url("/assets/jquery-ui/ui-bg_glass_65_ffffff_1x400.png") !default;
$bgImgUrlHighlight: url("/assets/jquery-ui/ui-bg_glass_55_fbf9ee_1x400.png") !default;
$bgImgUrlError: url("/assets/jquery-ui/ui-bg_glass_95_fef1ec_1x400.png") !default;
$iconsContent: url("/assets/jquery-ui/ui-icons_222222_256x240.png") !default;
$iconsHeader: url("/assets/jquery-ui/ui-icons_222222_256x240.png") !default;
$iconsDefault: url("/assets/jquery-ui/ui-icons_888888_256x240.png") !default;
$iconsHover: url("/assets/jquery-ui/ui-icons_454545_256x240.png") !default;
$iconsActive: url("/assets/jquery-ui/ui-icons_454545_256x240.png") !default;
$iconsHighlight: url("/assets/jquery-ui/ui-icons_2e83ff_256x240.png") !default;
$iconsError: url("/assets/jquery-ui/ui-icons_cd0a0a_256x240.png") !default;
$bgImgUrlOverlay: url("/assets/jquery-ui/ui-bg_flat_0_aaaaaa_40x100.png") !default;
$bgImgUrlShadow: url("/assets/jquery-ui/ui-bg_flat_0_aaaaaa_40x100.png") !default;
@import "jquery.ui.core";
@import "jquery.ui.theme";
@import "jquery.ui.datepicker";
I think it might beneficial to change the git submodule to track the branch as opposed to tracking a specific commit so you can always be up to do date with a recent yet stable version.
http://stackoverflow.com/questions/1777854/git-submodules-specify-a-branch-tag/18799234#18799234
May I only change the files as requested by Rails and submit a PR?
DEPRECATION WARNING: Extra .css in SCSS file is unnecessary. Rename (...)/gems/jquery-ui-sass-rails-4.0.3.0/app/assets/stylesheets/jquery.ui.core.css.scss to (...)/gems/jquery-ui-sass-rails-4.0.3.0/app/assets/stylesheets/jquery.ui.core.scss
Installation
$ bower install jquery-ui-sass -S
bower jquery-ui-sass#* not-cached https://github.com/jhilden/jquery-ui-sass-rails.git#*
bower jquery-ui-sass#* resolve https://github.com/jhilden/jquery-ui-sass-rails.git#*
bower jquery-ui-sass#* download https://github.com/jhilden/jquery-ui-sass-rails/archive/v5.0.5.tar.gz
bower jquery-ui-sass#* extract archive.tar.gz
bower jquery-ui-sass#* resolved https://github.com/jhilden/jquery-ui-sass-rails.git#5.0.5
bower jquery-ui-sass#^5.0.5 install jquery-ui-sass#5.0.5
jquery-ui-sass#5.0.5 bower_components/jquery-ui-sass
Result
$ ls -al bower_components/jquery-ui-sass/app/assets/stylesheets/jquery-ui | grep scss
$
Question
Why there is no *.scss stylesheets while I'm using bower to install? In repo the *.scss stylesheets are available: https://github.com/jhilden/jquery-ui-sass-rails/tree/master/app/assets/stylesheets.
In my Rails 4 application.scss I'm doing this...
@import 'themes/jquery.ui.smoothness';
And Rails pukes, giving me this:
File to import not found or unreadable: themes/jquery.ui.smoothness.
Help, kind sirs?
FYI:
Resolving dependencies...
Bundler could not find compatible versions for gem "jquery-ui-rails":
In Gemfile:
jquery-ui-sass-rails (~> 4.0.3.0) ruby depends on
jquery-ui-rails (= 4.0.3) ruby
jquery-ui-rails (4.0.4)
Is this =
dependency intentional?
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.