paoda
/
polyglot
mirror of https://github.com/beatriceo/polyglot.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
polyglot/app/assets/stylesheets
History
Beatrice Olivera e7b4b74c00
Merge branch 'master' into front-end 		2018-08-28 17:21:12 +01:00
..
components done landing_page 2018-08-28 15:00:54 +01:00
config finished basic contacts page 2018-08-28 17:18:58 +01:00
devise done with login signup 2018-08-28 15:34:52 +02:00
layouts finished basic contacts page 2018-08-28 17:18:58 +01:00
pages finished basic contacts page 2018-08-28 17:18:58 +01:00
README.md Initial commit with devise template from https://github.com/lewagon/rails-templates 2018-08-27 15:37:06 +01:00
application.scss Merge branch 'master' into front-end 2018-08-28 17:21:12 +01:00

README.md

Setup

Ensure you have the following gems in your Rails Gemfile

# Gemfile
gem 'bootstrap-sass'
gem 'font-awesome-sass', '~> 5.0.9'
gem 'simple_form'
gem 'autoprefixer-rails'
gem 'jquery-rails' # Add this line if you use Rails 5.1 or higher

In your terminal, generate SimpleForm Bootstrap config.

bundle install
rails generate simple_form:install --bootstrap

Then replace Rails' stylesheets by Le Wagon's stylesheets:

rm -rf app/assets/stylesheets
curl -L https://github.com/lewagon/stylesheets/archive/master.zip > stylesheets.zip
unzip 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

// app/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 -->
<head>
  <!-- Add these line for detecting device width -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <!-- [...] -->
</head>

Adding new .scss files

Look at your main application.scss file to see how SCSS files are imported. There should not be a *= require_tree . line in the file.

// app/assets/stylesheets/application.scss

// Graphical variables
@import "config/fonts";
@import "config/colors";
@import "config/bootstrap_variables";

// External libraries
@import "bootstrap-sprockets";
@import "bootstrap";
@import "font-awesome-sprockets";
@import "font-awesome";

// Your CSS partials
@import "layouts/index";
@import "components/index";
@import "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:

// pages/_index.scss
@import "home";
@import "contact";

Example 2: Let's say you add a new _sidebar.scss file in layouts then modify layouts/_index.scss as:

// layouts/_index.scss
@import "sidebar";

Navbar template

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.