https://github.com/adrienpoly/stylesheets
https://github.com/adrienpoly/stylesheets
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/adrienpoly/stylesheets
- Owner: adrienpoly
- Created: 2017-09-15T23:08:24.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2017-09-15T23:18:01.000Z (over 7 years ago)
- Last Synced: 2025-02-09T22:31:06.374Z (3 months ago)
- Language: CSS
- Size: 52.7 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
These stylesheets are based on [Le Wagon's Rails StyleSheets](https://github.com/lewagon/rails-stylesheets)
## Setup
Ensure you have the following gems in your Rails `Gemfile`
```ruby
# Gemfile
gem 'bootstrap-sass'
gem 'font-awesome-sass'
gem 'simple_form'
gem 'autoprefixer-rails'
```
In your terminal, generate SimpleForm Bootstrap config.
```bash
$ 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`
```javascript
// app/assets/javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
//= require_tree .
```
And the viewport in the layout
```html
```
## Adding new `.scss` files
Look at your main `application.scss` file to see how SCSS files are imported.
```scss
// Graphical variables
@import "config/variables";
@import "config/bootstrap_variables";
@import "config/mixins";
// External libraries
@import "bootstrap";
@import "font-awesome-sprockets";
@import "font-awesome";
@import "vendor/index";
// Your CSS
@import "layout/index";
@import "components/index";
@import "pages/index";
```
For every folder (**`components`**, **`layout`**, **`pages`**, **`vendor`**), 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:
```scss
// pages/_index.scss
@import "home";
@import "contact";
```
**Example 2**: Let's say you add a new `_sidebar.scss` file in **`layout`** then modify `layout/_index.scss` as:
```scss
// layout/_index.scss
@import "base";
@import "utilities";
@import "footer";
@import "navbar";
@import "sidebar";
```
## Navbar template
Our `layout/_navbar.scss` code works well with our home-made ERB template which you can find
- [version without login](https://github.com/lewagon/awesome-navbars/blob/master/templates/_navbar_wagon_without_login.html.erb).
- [version with login](https://github.com/lewagon/awesome-navbars/blob/master/templates/_navbar_wagon.html.erb).