Menu
I'm fairly new to Rails (and web development in general) and I'm trying to add the Get Shit Done UI Kit (GSD) to my existing Rails-Bootstrap app (with Bootstrap already installed using the bootstrap-rails gem).
These are the files that come with this particular kit:
x_get_shit_done
--assets
---css
-----demo.css
-----get-shit-done.css
-----gsdk-base.css
-----gsdk-checkbox-radio-switch.css
-----gsdk-sliders.css
---img
---js
-----custom.js
-----get-shit-done.js
-----gsdk-bootstrapswitch.js
-----gsdk-checkbox.js
-----gsdk-radio.js
-----jquery-ui-1.10.4.custom.min.js
--bootstrap3
--index.html
This is how the stylesheets are called in the example template:
<link href="bootstrap3/css/bootstrap.css" rel="stylesheet" />
<link href="assets/css/get-shit-done.css" rel="stylesheet" />
<link href="assets/css/demo.css" rel="stylesheet" />
But in my Rails apps, stylesheets/JS are called like so:
<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
I understand that there is some magic that Rails provides for adding stylesheets to projects this way, but I don't quite understand how that magic applies to adding new custom stylesheets.
And additionally, all CSS files in my app (following a tutorial) are Sass (.css.scss), all HTML files are embedded Ruby (.html.erb), and Bootstrap is already installed using the bootstrap-rails gem.
Do I need to somehow convert the CSS files with UI kit to Sass? There's no gem for GSD so it seems necessary to add all of the styles manually, which is what I think is throwing me off here.
Thanks for your patience with this nooby's question :)
206
First of all read about Rails' Asset Pipeline and you find the answers for all your questions.
In your case, you need to put css files to vendor/asssets/stylesheets and js files to vendor/assets/javascripts. Then add them with require to application.css and application.js.
application.css:
*= require_directory get_shit_done # this is vendor/assets/stylesheets/get_shit_done
*= require_tree .
*= require_self
application.js:
//= require_directory get_shit_done
//= require_tree .
After this all css and js files will be loaded to <head> automatically.
Then, you check index.html and change your application.html.erb according to it: add <meta>'s, some basic div's, such as div.container in Bootstrap and so on. You don't need to add css and js files to layout, cause you've already done it with Asset Pipeline.
But I strongly recommend you to read about Asset Pipeline, .erb format and some other rails basics. It's better to start from them, not from implementing css framework to the project.
162
@Allen I'm part of Creative Tim, we made the Get Shit Done UI Kit and I would like to tell you that we've got a collaboration with a Ruby on Rails professional and we created a Get Shit Done UI Kit Rails Gem
Please check it, it is hosted on the official rubygems.org and let us know if everything is working as expected.
Best, Alex
2
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
