On my laravel app, I'm using a forum package called "chatter".
This forum is injected into my master layout, so it looks like this:
nav bar
chatter package
footer
It's injected into a container called <div id="chatter">, and its styles are found in the style sheet chatter.css, which is separate from my main sheet.
The problem is, some of the styles in this sheet are conflicting with my nav and footer. Furthermore, some of the styles in my main sheet are affecting the forum (albeit minimally, so I don't mind making the changes manually).
I can't change the markup, but I can edit the styles.
So how could I make it so that all the styles found in chatter.css ONLY apply to what's inside of <div id="chatter">?
Add #chatter to every style in chatter.css like this
#chatter table{...}
#chatter tr{...}
#chatter td{...}
etc.
If style is for level above the chatter div then add after like this:
html #chatter{..}
body #chatter div{...}
You will have to namespace your CSS as user Nawed Khan pointed out but there is a much simpler way to do that than changing each of your styles manually. This method uses less to handle it for you.
Drop this in a file called chatter.less.
#chatter {
#import (less) 'chatter.css';
}
Then you need to include it on your page...
<link rel="stylesheet/less" type="text/css" href="chatter.less" >
Then you need to include less.js AFTER you've included your .less file.
<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>
In your .less file you might have to mess with the path to chatter.css, I believe it's going to be relative to whatever file you are including the .less file on.
I have come across this bootstrap theme and just wondering what tools are they using to simplify / shorten the class selector name?
Instead of something like:
<div class="row">
<div class="col-md-6"></div>
</div>
It's using:
<div class="qx">
<div class="qv"></div>
</div>
Thank you
Google's Closure Stylesheets can rename your class names. It work
in conjunction with Closure Template for the HTML and Closure
Compiler for the JavaScript.
Closure Stylesheets makes it possible to rename CSS class names in the generated stylesheet, which helps reduce the size of the CSS that
is sent down to your users. Of course, this is not particularly useful
unless the class names are renamed consistently in the HTML and
JavaScript files that use the CSS. Fortunately, you can use the
Closure Compiler to update the class names in your JavaScript and
Closure Templates to update the class names in your HTML.
SOURCE: HTML/CSS Obfuscation Compiling
I used http://www.gotealeaf.com/blog/integrating-rails-and-bootstrap-part-1 to install Bootstrap on my Rails 4 website.
Basically, I installed the gems:
gem 'bootstrap-sass', '~> 3.2.0'
gem 'autoprefixer-rails'
And then in my application.css.scss I have:
...* defined in the other CSS/SCSS files in this directory. It is
generally better to create a new
* file per style scope.
*
*= require_tree .
*= require_self
*/
#import "bootstrap-sprockets";
#import "bootstrap";
/*some css code that does work.*/
It's working perfectly, aside from one snag. In my css file for my
/*
Filters
*/
#filters{
position: relative;
}
.searchbox{
width:100px;
}
.filter{
display: inline-block;
}
and then in my view, I have
<div id="filters">
<input type="text" class="form-control filter"/>
<input type="text" class="form-control filter"/>
</div>
However, the inputs are not displayed side by side. If I remove form-control in the inputs class, it does work. I checked in chrome, and basically the filter class's display:inline-block was being crossed out by the bootstrap form-control.
I'm not very good at css, but as far as I can tell, rails is putting bootstrap's css file after mine, which is causing bootstrap to be more "important".
I looked and looked, but I couldn't find a way to have my css loaded AFTER the bootstrap css (if I'm even right over the source of this confusion)
Hope you can help. Thanks in advance!
In css, rules that appear later in the same stylesheet or in a different stylesheet which loads later in the html will override similar ones already defined. For example
p { color: blue; }
p { color: red; }
will produce red text.
Your #import statements for bootstrap are referenced by the require_self line which appears after the require_tree . line. As a result, the bootstrap css will appear at the end of your compiled stylesheet and override any rules with the same selectors.
With sass, you are recommended not to use sprockets as you can't really control the source order but rather use #import for each of your sass partial files.
Reversing the two require lines might work well enough for you. Otherwise I would suggest you remove all the sprockets directives and comments above your #imports, move any code below into its own partial and explicitly #import each partial in the exact order you want.
Make sure your custom CSS in linked to from your HTML after the bootstrap links.
HTML head
link bootstrap
link custom CSS
First:
Follow Bootstrap application.css.scss order.
Second:
Run these command in console in order:
rake assets:clobber (Remove all compiled assets)
RAILS_ENV=production bin/rake assets:precompile
Third:
Restart server with production mode.
When we change an icon foundry, it causes a minor snafu in that a lot of code needs to be revisited because icon names change. Some automated translation might be possible using text utils, but not when icon names are generated in a structured way (e.g., i-star-filled v/s i-star-empty based on a boolean).
What I want instead is to use functional names for my icons (such as xyz-search, xyz-cancel, xyz-filterable, etc.) and then map them to the actual icon name provided by the foundry. For example, glyphicon names might be different from those used by font awesome. How can I provide some kind of indirection (the same kind of liberation that HTML tags strong and em provide)?
Our first thought was to use a lookup table in javascript to translate from one namespace into another. But that works only when the HTML is being generated (we use angularjs); not helpful for static code, nor in those few cases where the icon name is generated computationally, as in the example in the first para.
So now we are toying with SASS (I have googled a fair bit but all in vain, nor is my CSS very shiny). Is there a SASS idiom that fits here, to translate something like
<i class="xyz-filterable ...">
to
<i class="i-funnel ...">
for the same visual and interaction outcome. (I understand the actual CSS will look quite different)
I do not want to use any foo.addClass().
Thanks
Use #extend:
Sass:
.xyz-filterable {
background-image: url(foo.png);
}
.i-funnel {
#extend .xyz-filterable;
}
Compiled CSS:
.xyz-filterable, .i-funnel {
background-image: url(foo.png);
}
I'm using the premailer-rails3 gem which pulls styles inline for html emails, and I'm trying to get it working with Twitter bootstrap.
https://github.com/fphilipe/premailer-rails3
It looks like some styles come in correctly, but not all of them. I'm wondering if anyone has a nice working example of getting their Twitter Bootstrap css (modified or not) into an html email.
Thanks!
If you mean "Can I use the stylistic presentation of Bootstrap in an email?" then you can, though I don't know anybody that has done it yet. You'll need to recode everything in tables though.
If you are after functionality, it depends on where your emails are viewed. If a significant proportion of your users are on Outlook, Gmail, Yahoo or Hotmail (and these typically add up to around 75% of email clients) then a lot of Bootstrap's goodness is not possible. Mac Mail, iOS Mail and Gmail on Android are much better at rendering CSS, so if you are targeting mostly mobile devices it's not quite so bad.
JavaScript - completely off limits. If you try, you'll probably go straight to email hell (a.k.a. spam folder). This means that LESS is also out of bounds, although you can obviously use the resulting CSS styles if you want to.
Inline CSS is much safer to use than any other type of CSS (embedded is possible, linked is a definite no). Media queries are possible, so you can have some kind of responsive design. However, there is a long list of CSS attributes that don't work - essentially, the box model is largely unsupported in email clients. You need to structure everything with tables.
font-face - you can only use external images. All other external resources (CSS files, fonts) are excluded.
glyphs and sprites - because of Outlook 2007's weird implementation of background-images (VML), you cant use background-repeat or position.
pseudo-selectors are not possible - e.g. :hover, :active states cannot be styled separately
There are loads of answers on SO, and lots of other links on the internet at large.
http://www.email-standards.org/
http://htmlemailboilerplate.com/
http://www.campaignmonitor.com/css/
I apologize for resurecting this old thread, but I just wanted to let everyone know there is a very close Bootstrap like CSS framework specifically created for email styling, here is the link: http://zurb.com/ink/
Hope it helps someone.
Ninja edit: It has since been renamed to Foundation for Emails and the new link is: https://foundation.zurb.com/emails.html
Silent but deadly edit: New link https://get.foundation/emails.html
Here are a few things you cant do with email:
Include a section with styles. Apple Mail.app supports it, but Gmail and Hotmail do not, so it's a no-no. Hotmail will support
a style section in the body but Gmail still doesn't.
Link to an external stylesheet. Not many email clients support this, best to just forget it.
Background-image / Background-position. Gmail is also the culprit on this one.
Clear your floats. Gmail again.
Margin. Yep, seriously, Hotmail ignores margins. Basically any CSS positioning at all doesn't work.
Font-anything. Chances are Eudora will ignore anything you try to declare with fonts.
Source: http://css-tricks.com/using-css-in-html-emails-the-real-story/
Mailchimp has email templates you can use - here
A few more resources that should help you
Best practices for styling HTML emails
Styling html in email
Styling HTML email for Gmail
You can use this https://github.com/advancedrei/BootstrapForEmail for b-strapping your email.
What about Bootstrap Email? This seems to really nice and compatible with bootstrap 4.
I spent some time recently looking into building html email templates, the best solution I found was to use this http://htmlemailboilerplate.com/. I have since built 3 quite complex templates and they have worked well in the various email clients.
Hi Brian Armstrong， visit this link.
This blog tells you how to integrate Rails with Bootstrap less (using premailer-rails).
If you're using bootstrap sass, you could do the same:
start by importing some Bootstrap sass files into email.css.scss
#import "bootstrap-sprockets";
#import "bootstrap/variables";
#import "bootstrap/mixins";
#import "bootstrap/scaffolding";
#import "bootstrap/type";
#import "bootstrap/buttons";
#import "bootstrap/alerts";
#import 'bootstrap/normalize';
#import 'bootstrap/tables';
#import 'bootstrap/progress-bars';
and then in your view <head> section add
<%= stylesheet_link_tag "email" %>
The best approach I've come up with is to use Sass imports on a selected basis to pull in your bootstrap (or any other) styles into emails as might be needed.
First, create a new scss parent file something like email.scss for your email style. This could look like this:
// Core variables and mixins
#import "css/main/ezdia-variables";
#import "css/bootstrap/mixins";
#import "css/main/ezdia-mixins";
// Import base classes
#import "css/bootstrap/scaffolding";
#import "css/bootstrap/type";
#import "css/bootstrap/buttons";
#import "css/bootstrap/alerts";
// nest conflicting bootstrap styles
.bootstrap-style {
//use single quotes for nested imports
#import 'css/bootstrap/normalize';
#import 'css/bootstrap/tables';
}
#import "css/main/main";
// Main email classes
#import "css/email/zurb";
#import "css/email/main";
Then in your email templates, only reference your compiled email.css file, which only contains the selected bootstrap styles referenced and nested properly in your email.scss.
For example, certain bootstrap styles will conflict with Zurb's responsive table style. To fix that, you can nest bootstrap's styles within a parent class or other selector in order to call bootstrap's table styles only when needed.
This way, you have the flexibility to pull in classes only when needed. You'll see that I use http://zurb.com/ which is a great responsive email library to use. See also http://zurb.com/ink/
Lastly, use a premailer like https://github.com/fphilipe/premailer-rails3 mentioned above to process the style into inline css, compiling inline styles to only what is used in that particular email template. For instance, for premailer, your ruby file could look something like this to compile an email into inline style.
require 'rubygems' # optional for Ruby 1.9 or above.
require 'premailer'
premailer = Premailer.new('http://www.yourdomain.com/TestSnap/view/emailTemplates/DeliveryReport.jsp', :warn_level => Premailer::Warnings::SAFE)
# Write the HTML output
File.open("delivery_report.html", "w") do |fout|
fout.puts premailer.to_inline_css
end
# Write the plain-text output
File.open("output.txt", "w") do |fout|
fout.puts premailer.to_plain_text
end
# Output any CSS warnings
premailer.warnings.each do |w|
puts "#{w[:message]} (#{w[:level]}) may not render properly in #{w[:clients]}"
end
Hope this helps! Been struggling to find a flexible email templating framework across Pardot, Salesforce, and our product's built-in auto-response and daily emails.
The trick here is that you don't want to include the whole bootstrap. The issue is that email clients will ignore the media queries and process all the print styles which have a lot of !important statements.
Instead, you need to only include the specific parts of bootstrap that you need. My email.css.scss file looks like this:
#import "bootstrap-sprockets";
#import "bootstrap/variables";
#import "bootstrap/mixins";
#import "bootstrap/scaffolding";
#import "bootstrap/type";
#import "bootstrap/buttons";
#import "bootstrap/alerts";
#import 'bootstrap/normalize';
#import 'bootstrap/tables';
Emails require tables in order to work properly.
Inky (by foundation for emails) is a templating language that converts simple HTML tags into the complex table HTML required for emails.
Example
<html>
<head></head>
<body>
<table align="center" class="container">
<tbody>
<tr>
<td>
<table class="row">
<tbody>
<tr>
<th class="small-12 large-12 columns first last">
<table>
<tbody>
<tr>
<th>Put content in me!</th>
<th class="expander"></th>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Will produce this: