Name: rails-stylesheets
Owner: Le Wagon
Description: Stylesheets starting kit @LeWagon
Created: 2015-02-08 12:33:01.0
Updated: 2018-05-17 10:28:50.0
Pushed: 2018-05-17 10:28:49.0
Homepage: null
Size: 35
Language: CSS
GitHub Committers
| User | Most Recent Commit | # Commits |
|---|
Other Committers
| User | Most Recent Commit | # Commits |
|---|
Ensure you have the following gems in your Rails Gemfile
mfile
'bootstrap-sass'
'font-awesome-sass', '~> 5.0.9'
'simple_form'
'autoprefixer-rails'
'jquery-rails' # Add this line if you use Rails 5.1
In your terminal, generate SimpleForm Bootstrap config.
le install
s generate simple_form:install --bootstrap
Then replace Rails' stylesheets by Le Wagon's stylesheets:
rf app/assets/stylesheets
-L https://github.com/lewagon/stylesheets/archive/master.zip > stylesheets.zip
p stylesheets.zip -d app/assets && rm stylesheets.zip && mv app/assets/rails-stylesheets-master app/assets/stylesheets
Don't forget the sprockets directives in assets/javascripts/application.js
pp/assets/javascripts/application.js
require jquery
require jquery_ujs
require bootstrap-sprockets
require_tree .
And the viewport in the layout
app/views/layouts/application.html.erb -->
d>
-- Add these line for detecting device width -->
eta name="viewport" content="width=device-width, initial-scale=1">
eta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-- [...] -->
ad>
.scss filesLook at your main application.scss file to see how SCSS files are imported. There should not be a *= require_tree . line in the file.
pp/assets/stylesheets/application.scss
raphical variables
ort "config/fonts";
ort "config/colors";
ort "config/bootstrap_variables";
xternal libraries
ort "bootstrap-sprockets";
ort "bootstrap";
ort "font-awesome-sprockets";
ort "font-awesome";
our CSS partials
ort "layouts/index";
ort "components/index";
ort "pages/index";
For every folder (components, layouts, pages), there is one _index.scss partial which is responsible for importing all the other partials of its folder.
Example 1: Let's say you add a new _contact.scss file in pages then modify pages/_index.scss as:
ages/_index.scss
ort "home";
ort "contact";
Example 2: Let's say you add a new _sidebar.scss file in layouts then modify layouts/_index.scss as:
ayouts/_index.scss
ort "sidebar";
Our layouts/_navbar.scss code works well with our home-made ERB template which you can find here:
Don't forget that *.html.erb files go in the app/views folder, and *.scss files go in the app/assets/stylesheets folder. Also, our navbar have a link to the root_path, so make sure that you have a root to: "controller#action" route in your config/routes.rb file.