jhilden / jquery-ui-sass-rails Goto Github PK

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?

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.

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!

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

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?

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

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)

Or are there any other options?