mirror of
https://github.com/beatriceo/polyglot.git
synced 2025-10-22 17:52:10 +00:00
Initial commit with devise template from https://github.com/lewagon/rails-templates
This commit is contained in:
Beatrice Olivera
101
app/assets/stylesheets/README.md
Normal file
101
app/assets/stylesheets/README.md
Normal file
@@ -0,0 +1,101 @@
|
||||
## Setup
|
||||
|
||||
Ensure you have the following gems in your Rails `Gemfile`
|
||||
|
||||
```ruby
|
||||
# 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.
|
||||
|
||||
```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
|
||||
<!-- 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.
|
||||
|
||||
```scss
|
||||
// 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:
|
||||
|
||||
```scss
|
||||
// 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:
|
||||
|
||||
```scss
|
||||
// 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:
|
||||
|
||||
- [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).
|
||||
|
||||
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.
|
||||
15
app/assets/stylesheets/application.scss
Executable file
15
app/assets/stylesheets/application.scss
Executable file
@@ -0,0 +1,15 @@
|
||||
// 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";
|
||||
15
app/assets/stylesheets/components/_alert.scss
Normal file
15
app/assets/stylesheets/components/_alert.scss
Normal file
@@ -0,0 +1,15 @@
|
||||
/* -------------------------------------
|
||||
* Your CSS code for flash notices and alerts
|
||||
* ------------------------------------- */
|
||||
|
||||
.alert {
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
color: white;
|
||||
}
|
||||
.alert-info {
|
||||
background: $green;
|
||||
}
|
||||
.alert-warning {
|
||||
background: $red;
|
||||
}
|
||||
3
app/assets/stylesheets/components/_index.scss
Normal file
3
app/assets/stylesheets/components/_index.scss
Normal file
@@ -0,0 +1,3 @@
|
||||
// Import your components CSS files here.
|
||||
@import "alert";
|
||||
@import "navbar";
|
||||
77
app/assets/stylesheets/components/_navbar.scss
Normal file
77
app/assets/stylesheets/components/_navbar.scss
Normal file
@@ -0,0 +1,77 @@
|
||||
/* Main navbar */
|
||||
.navbar-wagon {
|
||||
box-shadow: 0 1px 5px 0 rgba(0,0,0,0.07),0 1px 0 0 rgba(0,0,0,0.03);
|
||||
background: white;
|
||||
transition: all 0.3s ease;
|
||||
height: 70px;
|
||||
padding: 0px 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/* Logo */
|
||||
.navbar-wagon-brand img {
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
/* User Avatar */
|
||||
.navbar-wagon .avatar {
|
||||
height: 35px;
|
||||
width: 35px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
/* Right section */
|
||||
.navbar-wagon-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/* Basic navbar item */
|
||||
.navbar-wagon-item {
|
||||
cursor: pointer;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
/* Navbar link */
|
||||
.navbar-wagon-link {
|
||||
color: #616668;
|
||||
font-size: 14px;
|
||||
}
|
||||
.navbar-wagon-link:hover {
|
||||
color: #da552f;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Dropdown menu */
|
||||
.navbar-wagon-dropdown-menu {
|
||||
margin-top: 15px;
|
||||
box-shadow: 1px 1px 4px #E6E6E6;
|
||||
border-color: #E6E6E6;
|
||||
}
|
||||
.navbar-wagon-dropdown-menu li > a {
|
||||
transition: color 0.3s ease;
|
||||
font-weight: lighter !important;
|
||||
color: #999999 !important;
|
||||
font-size: 15px !important;
|
||||
line-height: 22px !important;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
.navbar-wagon-dropdown-menu li > a:hover {
|
||||
background: transparent !important;
|
||||
color: black !important;
|
||||
}
|
||||
.navbar-wagon-dropdown-menu:before {
|
||||
content: ' ';
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: -6px;
|
||||
background-color: white;
|
||||
transform: rotate(45deg);
|
||||
border-left: 1px solid #E6E6E6;
|
||||
border-top: 1px solid #E6E6E6;
|
||||
}
|
||||
53
app/assets/stylesheets/config/_bootstrap_variables.scss
Executable file
53
app/assets/stylesheets/config/_bootstrap_variables.scss
Executable file
@@ -0,0 +1,53 @@
|
||||
// This is where you override default Bootstrap variables
|
||||
// 1. All Bootstrap variables are here => https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_variables.scss
|
||||
// 2. These variables are defined with default value (see https://robots.thoughtbot.com/sass-default)
|
||||
// 3. You can override them below!
|
||||
|
||||
// General style
|
||||
$font-family-sans-serif: $body-font;
|
||||
$headings-font-family: $headers-font;
|
||||
$body-bg: $light-gray;
|
||||
$font-size-base: 18px;
|
||||
|
||||
// Colors
|
||||
$gray-base: $gray;
|
||||
$brand-primary: $blue;
|
||||
$brand-success: $green;
|
||||
$brand-info: $yellow;
|
||||
$brand-danger: $red;
|
||||
$brand-warning: $orange;
|
||||
|
||||
// Buttons & inputs' radius
|
||||
$border-radius-base: 2px;
|
||||
$border-radius-large: 2px;
|
||||
$border-radius-small: 2px;
|
||||
|
||||
|
||||
// Patch to make simple_form compatible with bootstrap 3
|
||||
.invalid-feedback {
|
||||
display: none;
|
||||
width: 100%;
|
||||
margin-top: 0.25rem;
|
||||
font-size: 80%;
|
||||
color: $red;
|
||||
}
|
||||
|
||||
.was-validated .form-control:invalid,
|
||||
.form-control.is-invalid,
|
||||
.was-validated .custom-select:invalid,
|
||||
.custom-select.is-invalid {
|
||||
border-color: $red;
|
||||
}
|
||||
|
||||
.was-validated .form-control:invalid ~ .invalid-feedback,
|
||||
.was-validated .form-control:invalid ~ .invalid-tooltip,
|
||||
.form-control.is-invalid ~ .invalid-feedback,
|
||||
.form-control.is-invalid ~ .invalid-tooltip,
|
||||
.was-validated .custom-select:invalid ~ .invalid-feedback,
|
||||
.was-validated .custom-select:invalid ~ .invalid-tooltip,
|
||||
.custom-select.is-invalid ~ .invalid-feedback,
|
||||
.custom-select.is-invalid ~ .invalid-tooltip {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Override other variables below!
|
||||
10
app/assets/stylesheets/config/_colors.scss
Normal file
10
app/assets/stylesheets/config/_colors.scss
Normal file
@@ -0,0 +1,10 @@
|
||||
// Define variables for your color scheme
|
||||
|
||||
// For example:
|
||||
$red: #EE5F5B;
|
||||
$blue: #469AE0;
|
||||
$yellow: #FDB631;
|
||||
$orange: #E67E22;
|
||||
$green: #32B796;
|
||||
$gray: #000000;
|
||||
$light-gray: #F4F4F4;
|
||||
16
app/assets/stylesheets/config/_fonts.scss
Executable file
16
app/assets/stylesheets/config/_fonts.scss
Executable file
@@ -0,0 +1,16 @@
|
||||
// Import Google fonts
|
||||
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,300,700|Raleway:400,100,300,700,500");
|
||||
|
||||
// Define fonts for body and headers
|
||||
$body-font: "Open Sans", "Helvetica", "sans-serif";
|
||||
$headers-font: "Raleway", "Helvetica", "sans-serif";
|
||||
|
||||
// To use a font file (.woff) uncomment following lines
|
||||
// @font-face {
|
||||
// font-family: "Font Name";
|
||||
// src: font-url('FontFile.eot');
|
||||
// src: font-url('FontFile.eot?#iefix') format('embedded-opentype'),
|
||||
// font-url('FontFile.woff') format('woff'),
|
||||
// font-url('FontFile.ttf') format('truetype')
|
||||
// }
|
||||
// $my-font: "Font Name";
|
||||
5
app/assets/stylesheets/layouts/_index.scss
Normal file
5
app/assets/stylesheets/layouts/_index.scss
Normal file
@@ -0,0 +1,5 @@
|
||||
// Import your layouts CSS files here.
|
||||
// Examples:
|
||||
// @import "dashboard";
|
||||
// @import "profile";
|
||||
// @import "map";
|
||||
1
app/assets/stylesheets/pages/_home.scss
Executable file
1
app/assets/stylesheets/pages/_home.scss
Executable file
@@ -0,0 +1 @@
|
||||
// Specific CSS for your home-page
|
||||
2
app/assets/stylesheets/pages/_index.scss
Normal file
2
app/assets/stylesheets/pages/_index.scss
Normal file
@@ -0,0 +1,2 @@
|
||||
// Import page-specific CSS files here.
|
||||
@import "home";
|
||||
Reference in New Issue
Block a user