Sharing colors between SASS files and Rails erb templates - ruby-on-rails

I'm working on an email newsletter using ActionMailer that's associated to our Rails 3.0.7 application. So against all my instincts, I'm using inline styles like mad since that seems to be the only way to do things in html email. I'd also like to keep the color scheme consistent with the website in a DRY fashion.
Is there any way to share SASS color variables between a Rails application and its SCSS files for use in inline styling?

The only way I'm aware you can do this is to add .erb onto your sass files so that they're processed by Rails, then you can use application level constants:
<%= APP_CONFIG[:yourkey] %>
Similar question / more reading
Coding emails is such a heinous task that I try to turn off all the higher thinking regions of my brain that worry about good programming principles every time I have to do it. Unless email is the central part of this project I'd resist letting the constraints there affect the rest of your application design.

Best solution I've found so far is the premailer gem: https://github.com/alexdunae/premailer/
Post-processing your HTML with premailer inlines all the CSS defined in a separate stylesheet, letting you specify whatever you want in a SASS or CSS file.

Related

What are the reasons to use erb integration for webpacker in Rails 6?

I have surfed a couple of hours through the web but couldn't find any articles/walkthroughs/comparisons touching erb integration of webpacker. I've found 1 question, unfortunately, the author haven't read docs attentively and the answer was right there, so - no any additional info there.
I have seen plenty of articles about vue and react, but nobody says a word about erb. However, it's quite clear why using react/vue/else similiar, it is not with erb.
The theme is quite vast and I expect a little hate towards me, so I'd ask two related questions (but if you have something to tell more about it - that's appreciated).
As I understand - it's vanilla (plain) js (maybe with a flavour of jQuery) caring just about dom and styling, with all the preprocessing made by rails. If it is so why not just continue using sprockets?
And what are the reasons to choose it instead of some react/vue/else framework?
You may use both : a vanilla JS framework (React, Vue ...) and some erb files. I find it interesting to setup my constant and other configuration variables within a .js.erb file that is generated by my Rails app when building the js app.
Things I like to put in this erb files :
schemas of my api, generated by my serializers
constants, like enum
values to be used in forms
To generalize, you can put anything owned by the backend that will not change at run time
this save you a couple API calls to retrieve this data. However, I tend to stop doing this as your JS app and Rails become tightly coupled and you can't use the sources of your JS app outside the Rails app

Can an admin template be used in a Ruby on Rails web app?

I have been doing UI research and have come across admin templates at http://themeforest.net/. I was wondering how do you apply these onto a web app built on Rails. These templates look very similar to wordpress themes. Are they that easy to configure? Is it just as simple as setting up a link to the database to make the fields form capture data? I've been looking at this theme.
For admin templates I recommend using Active Admin. It's relatively easy to implement and gives you great admin screens with little effort.
Yes, You can. I'm trying to solve the same problem and so far I have a couple options:
1.) do it by hand, I've done this before, it works but takes a lot of time to truly understand how your theme is put together. First I would recommend using the included themes assets exactly as they are bundled with the theme. Don't assume that just because you have twitter-bootstrap-rails gem that the bootstrap classes in the theme will work. Link the assets statically and slowly extract out the static assets and replace them in the asset pipeline once you know they work.
2.) Use the strategy suggested in the install_theme gem (http://drnicwilliams.com/2009/10/06/install-any-html-themetemplate-into-your-rails-app/) the gem itself is not maintained any longer (i'm not sure about any forks), but the strategy is sound. Extract the core parts of the template into partials.
The short answer is yes, but there is no straight forward way to "import to rails"

Framework for CSS in Rails 3.1

Which framework do you use in Rails 3.1?
I basically want to have a standard set of mixins like gradient and rounded corner etc, but maybe there are other advantages of certain frameworks that I am not aware of.
Can you please recommend a framework to use with Rails 3.1 to cover most of what I will need to simplify and standardize my stylesheet development
Bourbon - a set of Sass mixins using SCSS syntax, is a popular (500+ watchers) tool made by thoughtbot.
The purpose of Bourbon Sass Mixins is to provide a comprehensive library of sass mixins that are designed to be as vanilla as possible, meaning they should not deter from the original CSS syntax. The mixins contain vendor specific prefixes for all CSS3 properties for support amongst modern browsers. The prefixes also ensure graceful degradation for older browsers that support only CSS3 prefixed properties. Bourbon uses SCSS syntax.
It can help with use:
Animation
Background-image
Border Radius
Box Shadow
Box Sizing
and other
See the readme on the official page on github
I think that any current CSS framework can accomplish what you want.
Have you give LESS a look? I believe it meets all your criteria.
I haven't personally tried out compass, but it's been generating alot of buzz, so it is certainly worth a look.
Twitter also released Bootstrap which I've been trying out and I've been fairly impressed so far!
For me, a framework doesn't seem to be to be considered here. You can easaly do it yourself.
For my part, I use sass and I write a _macros.scss with all the appropriate mixins and default variables, and I put an #import "macros" at the beginning of each main scss files.

Checking CSS within a rails controller or in plain ruby?

I need to take a database text field and parse it for
duplication and garbage
malice
whitelisted selectors
compress and output as a css file
Since there might be a rails way I'm unaware or something ready made I'm asking before I waste time trying to reinvent a wheel. My searching revealed nothing, mostly in rails seems aimed at view level, and css seems to be an unattended niche in this area (plenty of html though).
I'm aware of the sanitize gem (doesn't do css immediately, yet another thing I'd need to map out and code) and the built in rails stuff (not a lot of tutorial, aimed mostly at the view level). I need a gem, lib, module or something similar that I can work with in a controller or queue.
EDIT:
Without getting too deep into the specifics of the project: administrative users can add css for their portions of the site. As part of the flow I'm going to save the raw css and then process and save the processed css. The db stuff is archival mostly, the css file is output immediately. Because there is few places to add modified css and only admins have access to the css, it sort of works but I'm looking to make it more robust in the future where admins who may not be as conversant with the security needs or not as css aware can operate.
The most basic example is that it just a text field on an admin page. The admin cuts and pastes css there, submits, and the application turns it into a css file that gets included with the designated pages, which works because the current admins know the application, the css of the application, and what they can and cannot change. The goal is to make this more robust for future admins who might not be as savvy.
To simply sanitize CSS, you can use the SanitizeHelper built into Rails: http://api.rubyonrails.org/classes/ActionView/Helpers/SanitizeHelper.html#method-i-sanitize_css
Have you looked at Sass? It has all of the parsing logic built in, for a superset of CSS. You could add a feature (Sass support) and save yourself the need to parse/validate the CSS all in one go.
You can generate output CSS from Sass (or just plain CSS, since Sass [with the SCSS syntax] is a fully-backward-compatible superset of CSS) like this:
output_css = Sass::Engine.new(sass_content, :syntax => :scss).render
There are a bunch of options that you'll probably want to look into at http://sass-lang.com/
Another option is Less. The new Twitter Bootstrap framework uses Less, and Rails 3.1 uses Sass. The biggest difference is that the official Less parser/compiler is built in JavaScript, so you could actually validate and compile in the user's browser while they work and show them any errors before they save. Of course then you need to run a JavaScript engine (e.g. V8) in your Rails application if you want to use Less to validate the incoming CSS still.

Sass Compass multiple themes ruby on rails

I have a rails app that is a sort of CMS and i alow users to create their own version of the applicaton on a sub domain.
I also want to let them style their app version the way they want but changing a few fields or small config file.
I was hoping to be able to use sass and compass and be able to let users change varialbes for there own style.
How can i do this ? is it possible as saas needs to be compiled to css when varialbes are changed. i think?
Is there a better way ?
thanks alot
richard moss
It's possible to use Sass functions to access the outside environment; see the Sass documentation for details. Before you do this, make sure you'll be properly caching your stylesheets so that they don't need to be regenerated for every request.

Resources