Asset pipeline
The asset pipeline constitutes the app/assets directory.
The configuration file can be found at config/assets.rb.
The asset pipeline creates an organized structure for any static assets used in your application. Additionally, it makes it more simple to access these assets.
By default, the assets sub-directories: stylesheets, scripts, images and fonts are included in the asset pipeline.
If setting up a blog environment for your application, then the blog sub-directory is also included in the asset pipeline.
You can add a new directory by changing the configuration file.
The stylesheets sub-directory of the asset pipeline contains all of the stylesheets of the application.
The template comes with a
partialsfolder within this sub-directory that should contain all of the partial stylesheets used in your application.Examples of styling that should be in partial stylesheets are colors, breakpoints, mix-ins and fonts (these partials are already included in Simplatra).
NOTE: Stylesheet partials follow the same convention as view partials - that is, file names should be preceded by an underscore. e.g.
_breakpoints.scss
The template also comes with a
__partials__.scssfile, which simply acts as a single file that imports all of the partial files. This makes it easier to include all of the partials into a stylesheet by doing the following, rather than including each partial individually:
app/assets/pages.scss@import '__partials__';
The default stylesheet compressor is scss and the default script compressor/minifier is uglify.
These can be changed in the configuration file.
Absolute path reference | Asset pipeline reference |
|
|
|
|
|
|
|
|
|
|
NOTE: Always reference the compiled stylesheet or script files.
For example, this means do:
/assets/application.cssinstead of/assets/application.scss/assets/application.jsinstead of/assets/application.coffee
app/views/index.erb<html><head><link rel="icon" href="/assets/favicon.png" sizes="16x16 32x32" type="image/png"><link rel="stylesheet" href="/assets/index.css"></head><body><img src="/assets/simplatra.png"></body></html>
index.scssbody { background-image: url('/assets/bg.gif'); }
