Assets In Rails

mgr inż. Adam Mazur

Where to place assets?

app/assets

Files specific to the current,

 

vendor/assets

external libraries

 

lib/assets

assets for your own libraries

Assets Pipeline

Manifest file(s)

/*
 *= require_self                     # don't use that
 *= require fancybox                 # only once
 *= include jquery.fileupload-ui     # force require
 *= require_directory /privates      # alphabetical order, will skip duplicates
 *= require_tree /other              # recursive
 *= depend_on some_asset             # recompile
*/

CSS

JUST ANOTHER FUNNY MEME

ABOUT CSS 

  • Weight
  • Load time
  • Managable

The Rails Way

application.css with Manifest

stylesheet/controller

/ STYLES
= stylesheet_link_tag "privates/general"               
= stylesheet_link_tag "privates/" + params[:controller]   
= stylesheet_link_tag "header"                            
= stylesheet_link_tag "bottom"                            
background-image: image-url("header-photo-vert.jpg");
asset_path("header-photo-vert.jpg")

helpers

The NonRails Way

Using SCSS @include instead of Manifest

/general.css.scss
@import "font-awesome-sprockets";
@import "font-awesome";
@import "../variables";
@import "modules/file-upload";
@import "modules/steps";
@import "modules/forms";
@import "modules/tables";
@import "../skeuocard";
@import "../skeuocard.reset";

The NonRails Way

SMACSS (Scalable and Modular Architecture for CSS)

/application.css.scss
@import "base/normalize";
@import "layout/global";
---+ stylesheets
   |-------+ modules
   |       |--- forms.scss
   |       |--- alerts.scss
   |       |--- tables.scss
   |-------+ layout
   |       |--- global.scss
   |       |--- _variables.scss
   |       |--- _mixins.scss            
   |-------+ base
   |       |--- normalize.scss (can be in vendor/assets)
   |  
   |------- application.scss
   |-------+ pitches
   |       |--- application.scss
   |       |--- compose.scss
           |--- show.scss
/compose.css.scss
@import "forms";
@import "tables";

.compose-class{......}

CSS Tips

Avoid IDs in CSS !!!

 

 

 

 

 

Minimize the depth of CSS selectors 

div.header .nav ul li a:first-of-type
.nav-link:first-of-type
.first-nav-link

Utility (global) classes (no inline css)

 .width-100, .display-none, .text-align-left

 

Prefixes (namespaces)

  .pc-public_view .summary, 
  .pc-public_view-summary .entry

my empirical findings have been that more CSS bloat accumulates due to author deletion fear (“I don’t know what that’s for so just leave it in”) than duplicated styles.

One of the CSS blogger

JAVASCRIPT

JUST ANOTHER FUNNY MEME

ABOUT HOW JS IS STUPID 

---+ javascripts
   |-------+ modules
   |       |--- forms.js
   |       |--- alerts.js
   |-------+ global
   |       |--- global.js
   |       |--- functions.js         
   |  
   |------- application.js
   |-------+ pitches
   |-------|--- pitches-global.js
   |       |--- application.js
   |       |--- compose.js
           |--- show.js

Structure

What about view specific js?

https://github.com/kbparagua/paloma

What about partial specific js?

Rails Assets
https://rails-assets.org/

THANKS

JUST ANOTHER FUNNY MEME

ABOUT LAST SLIDE

http://benfrain.com/enduring-css-writing-style-sheets-rapidly-changing-long-lived-projects/

Made with Slides.com