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.
Related
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 web application which uses Foundation.
I am not good at foundation and i have to develop few pages where i want to use Bootstrap but i dont want to mix with other company css.
SO i was looking if i can wrap all bootsrap inside some class like bootstrap. so that if i want to use bootsrap . i can use like
<div class="bootstrap"> <table class="table">
</div>
I don't know sass and all that.
is it possible to download some bootstrap css from online with some pre defined prefix
If you don't use SASS or LESS, you can use http://www.css-prefix.com/
Make a short prefix (my recommendation)
If you use a space, then it will be a parent class.
Paste in the compiled version of the CSS file
Click the run button
Result snippet:
.tb.col-xs-1, .tb.col-sm-1, .tb.col-md-1, ...
Indeed you could use namespaces, see: How to namespace Twitter Bootstrap so styles don't conflict, http://lesscss.org/features/#features-overview-feature-namespaces-and-accessors and
In the case you need Bootstrap's CSS for tables only, you can compile the following Less / SASS code, after downloading the source code at http://getbootstrap.com/getting-started/#download:
**less / SASS **
.bootstrap {
#import "variables";
#import "mixins/table-row";
#import "tables";
}
As you see you can use the same code for Less and SASS, notice that the order of the imports does matter when compiling the SASS version.
update
The accepted solution only prefix classes (or selector having a class). In the case that you want to use Bootstrap's CSS to style your HTML tables. Your prefixed don't have bootstrap's styles for the table, th and caption selectors.
Even when you have never used Less / CSS before you can do the prefixing with Less (or SASS) easily leveraging an online compiler. A list of online Less compilers can be found at: http://lesscss.org/usage/#online-less-compilers. Also codepen has an online LESS and SASS compiler.
The only thing you have to know is what files to import. Bootstrap's Less files are well organized. You should always import variables.less and mixins.less. The mixins.less imports all other mixins. Mixins do not output, so importing all of them will slow down the compilation, but do not appear in the compiled CSS code.
In the case you want a prefixed version of the table CSS you can run the following code in one of the online compilers:
.bootstrap {
#import url("https://raw.githubusercontent.com/twbs/bootstrap/master/less/variables.less");
#import url("https://raw.githubusercontent.com/twbs/bootstrap/master/less/mixins.less");
#import url("https://raw.githubusercontent.com/twbs/bootstrap/master/less/tables.less");
}
An demo can be found at: http://codepen.io/bassjobsen/pen/PwPNBP
It sounds like you want to namespace Bootstrap, which is pretty easy to do using SASS (which Foundation uses, I believe). So in your SASS file (should have a .scss extension) you can import Bootstrap within a class name like this:
.bootstrap {
#import 'bootstrap';
}
And then you can reference Bootstrap in your HTML like this:
<body class="bootstrap">
<div class="col-xs-12 col-sm-6">
<table class="table"></table>
</div>
</body>
You can download SASS version of Bootstrap here: https://github.com/twbs/bootstrap-sass. Drop that SCSS file into the same directory as your main SCSS file and then you can import.
Imo the answers to this question are problematic. If you introduce a generic class to namespace everything, such as this...
.bootstrap {
#import 'bootstrap';
}
You are effectively increasing the CSS specificity.
What you really need is a tool that migrates Bootstrap to change the class names themselves.
For example,
E.g.
<div class="alert">
<div class="something alert">
<div class="something alert alert-danger">
Should become
<div class="bs-alert">
<div class="something bs-alert">
<div class="something bs-alert bs-alert-danger">
It should leave "something" alone because this class does not occur in Bootstrap.
To my knowledge such a tool does not exist (open source).
#Wolfr's answer has described the problem pretty well - in 2019 http://www.css-prefix.com/ doesn't work anymore, and all the other solutions that are in google top10 only increase css specificity by wrapping all bootstrap classes with the parent class.
That approach isn't bullet-proof:
e.g. if you make
.custom_namespace .col-3 {
width: 25%;
}
this won't protect you from someone using !important to bootstrap class for whatever reason some would do it.
.col-3 {
width: 99% !important;
}
Instead, there is actually one work I found through npm, where developer has indeed implemented that custom prefix AND even made it work with bootstrap's JS file. But it's only for Bootstrap 3: https://www.npmjs.com/package/bootstrap-sass-namespace
This will generate all bootstrap classes in form of e.g. .custom_prefix_col-3 {}
One more option if you need truly namespaced Bootstrap 4 css:
In my case I needed Bootstrap 4, so I opened bootstrap css file, ran search and replace in Sublime Text with Regular Expression, using this value for search:
\.(?<TAG>[a-z]{1,3}) - this captures all the beginnings of the classes by using period and first one to three letter characters as opposed to just searching for period (.) and risking to mess up float values for CSS properties.
and for replace I used .the_prefix_I_need\1
This allowed me to produce truly isolated bootstrap 4 css file that for sure won't be messed up if someone somewhere at the websites where my app is included will decide to redefine some bootstrap classes with !important.
I’m working on a CSS file that is quite long. I know that the client could ask for changes to the color scheme, and was wondering: is it possible to assign colors to variables, so that I can just change a variable to have the new color applied to all elements that use it?
Please note that I can’t use PHP to dynamically change the CSS file.
CSS supports this natively with CSS Variables.
Example CSS file
:root {
--main-color:#06c;
}
#foo {
color: var(--main-color);
}
For a working example, please see this JSFiddle (the example shows one of the CSS selectors in the fiddle has the color hard coded to blue, the other CSS selector uses CSS variables, both original and current syntax, to set the color to blue).
Manipulating a CSS variable in JavaScript/client side
document.body.style.setProperty('--main-color',"#6c0")
Support is in all the modern browsers
Firefox 31+, Chrome 49+, Safari 9.1+, Microsoft Edge 15+ and Opera 36+ ship with native support for CSS variables.
People keep upvoting my answer, but it's a terrible solution compared to the joy of sass or less, particularly given the number of easy to use gui's for both these days. If you have any sense ignore everything I suggest below.
You could put a comment in the css before each colour in order to serve as a sort of variable, which you can change the value of using find/replace, so...
At the top of the css file
/********************* Colour reference chart****************
*************************** comment ********* colour ********
box background colour bbg #567890
box border colour bb #abcdef
box text colour bt #123456
*/
Later in the CSS file
.contentBox {background: /*bbg*/#567890; border: 2px solid /*bb*/#abcdef; color:/*bt*/#123456}
Then to, for example, change the colour scheme for the box text you do a find/replace on
/*bt*/#123456
Yeeeaaahhh.... you can now use var() function in CSS.....
The good news is you can change it using JavaScript access, which will change globally as well...
But how to declare them...
It's quite simple:
For example, you wanna assign a #ff0000 to a var(), just simply assign it in :root, also pay attention to --:
:root {
--red: #ff0000;
}
html, body {
background-color: var(--red);
}
The good things are the browser support is not bad, also don't need to be compiled to be used in the browser like LESS or SASS...
Also, here is a simple JavaScript script, which changes the red value to blue:
const rootEl = document.querySelector(':root');
root.style.setProperty('--red', 'blue');
CSS itself doesn't use variables. However, you can use another language like SASS to define your styling using variables, and automatically produce CSS files, which you can then put up on the web. Note that you would have to re-run the generator every time you made a change to your CSS, but that isn't so hard.
You can try CSS3 variables:
body {
--fontColor: red;
color: var(--fontColor);
}
There's no easy CSS only solution. You could do this:
Find all instances of background-color and color in your CSS file and create a class name for each unique color.
.top-header { color: #fff; }
.content-text { color: #f00; }
.bg-leftnav { background-color: #fff; }
.bg-column { background-color: #f00; }
Next go through every single page on your site where color was involved and add the appropriate classes for both color and background color.
Last, remove any references of colors in your CSS other than your newly created color classes.
The 'Less' Ruby Gem for CSS looks awesome.
http://lesscss.org/
Yes, in near future (i write this in june 2012) you can define native css variables, without using less/sass etc ! The Webkit engine just implemented first css variable rules, so cutting edge versions of Chrome and Safari are already to work with them. See the Official Webkit (Chrome/Safari) development log with a onsite css browser demo.
Hopefully we can expect widespread browser support of native css variables in the next few months.
Do not use css3 variables due to support.
I would do the following if you want a pure css solution.
Use color classes with semenatic names.
.bg-primary { background: #880000; }
.bg-secondary { background: #008800; }
.bg-accent { background: #F5F5F5; }
Separate the structure from the skin (OOCSS)
/* Instead of */
h1 {
font-size: 2rem;
line-height: 1.5rem;
color: #8000;
}
/* use this */
h1 {
font-size: 2rem;
line-height: 1.5rem;
}
.bg-primary {
background: #880000;
}
/* This will allow you to reuse colors in your design */
Put these inside a separate css file to change as needed.
Sure can, sort of, thanks to the wonderful world of multiple classes, can do this:
.red {color:red}
.blackBack {background-color: black}
but I often end up combining them anyway like this:
.highlight {color:red, background-color: black}
I know the semantic police will be all over you, but it works.
I'm not clear on why you can't use PHP. You could then simply add and use variables as you wish, save the file as a PHP file and link to that .php file as the style sheet instead of the .css file.
It doesn't have to be PHP, but you get what I mean.
When we want programming stuff, why not use a programming language until CSS (maybe) supports things like variables?
Also, check out Nicole Sullivan's Object-oriented CSS.
You can group selectors:
#selector1, #selector2, #selector3 { color: black; }
You could pass the CSS through javascript and replace all instances of COLOUR1 with a certain color (basically regex it) and provide a backup stylesheet incase the end user has JS turned off
dicejs.com (formally cssobjs) is a client-side version of SASS. You can set variables in your CSS (stored in json formatted CSS) and re-use your color variables.
//create the CSS JSON object with variables and styles
var myCSSObjs = {
cssVariables : {
primaryColor:'#FF0000',
padSmall:'5px',
padLarge:'$expr($padSmall * 2)'
}
'body' : {padding:'$padLarge'},
'h1' : {margin:'0', padding:'0 0 $padSmall 0'},
'.pretty' : {padding:'$padSmall', margin:'$padSmall', color:'$primaryColor'}
};
//give your css objects a name and inject them
$.cssObjs('myStyles',myCSSObjs).injectStyles();
And here is a link to a complete downloadable demo which is a little more helpful then their documentation : dicejs demo
EDIT: This answer is no longer current. You should use CSS variables now.
Consider using SCSS. It's full compatible with CSS syntax, so a valid CSS file is also a valid SCSS file. This makes migration easy, just change the suffix. It has numerous enhancements, the most useful being variables and nested selectors.
You need to run it through a pre-processor to convert it to CSS before shipping it to the client.
I've been a hardcore CSS developer for many years now, but since forcing myself to do a project in SCSS, I now won't use anything else.
If you have Ruby on your system you can do this:
http://unixgods.org/~tilo/Ruby/Using_Variables_in_CSS_Files_with_Ruby_on_Rails.html
This was made for Rails, but see below for how to modify it to run it stand alone.
You could use this method independently from Rails, by writing a small Ruby wrapper script
which works in conjunction with site_settings.rb and takes your CSS-paths into account, and
which you can call every time you want to re-generate your CSS (e.g. during site startup)
You can run Ruby on pretty much any operating system, so this should be fairly platform independent.
e.g. wrapper: generate_CSS.rb (run this script whenever you need to generate your CSS)
#/usr/bin/ruby # preferably Ruby 1.9.2 or higher
require './site_settings.rb' # assuming your site_settings file is on the same level
CSS_IN_PATH = File.join( PATH-TO-YOUR-PROJECT, 'css-input-files')
CSS_OUT_PATH = File.join( PATH-TO-YOUR-PROJECT, 'static' , 'stylesheets' )
Site.generate_CSS_files( CSS_IN_PATH , CSS_OUT_PATH )
the generate_CSS_files method in site_settings.rb then needs to be modified like this:
module Site
# ... see above link for complete contents
# Module Method which generates an OUTPUT CSS file *.css for each INPUT CSS file *.css.in we find in our CSS directory
# replacing any mention of Color Constants , e.g. #SomeColor# , with the corresponding color code defined in Site::Color
#
# We will only generate CSS files if they are deleted or the input file is newer / modified
#
def self.generate_CSS_files(input_path = File.join( Rails.root.to_s , 'public' ,'stylesheets') ,
output_path = File.join( Rails.root.to_s , 'public' ,'stylesheets'))
# assuming all your CSS files live under "./public/stylesheets"
Dir.glob( File.join( input_path, '*.css.in') ).each do |filename_in|
filename_out = File.join( output_path , File.basename( filename_in.sub(/.in$/, '') ))
# if the output CSS file doesn't exist, or the the input CSS file is newer than the output CSS file:
if (! File.exists?(filename_out)) || (File.stat( filename_in ).mtime > File.stat( filename_out ).mtime)
# in this case, we'll need to create the output CSS file fresh:
puts " processing #{filename_in}\n --> generating #{filename_out}"
out_file = File.open( filename_out, 'w' )
File.open( filename_in , 'r' ).each do |line|
if line =~ /^\s*\/\*/ || line =~ /^\s+$/ # ignore empty lines, and lines starting with a comment
out_file.print(line)
next
end
while line =~ /#(\w+)#/ do # substitute all the constants in each line
line.sub!( /#\w+#/ , Site::Color.const_get( $1 ) ) # with the color the constant defines
end
out_file.print(line)
end
out_file.close
end # if ..
end
end # def self.generate_CSS_files
end # module Site
Not PHP I'm afraid, but Zope and Plone use something similar to SASS called DTML to achieve this. It's incredibly useful in CMS's.
Upfront Systems has a good example of its use in Plone.
If you write the css file as an xsl template, you could read color values from a simple xml file. Then create the css with an xslt processor.
colors.xml:
<?xml version="1.0"?>
<colors>
<background>#ccc</background>
</colors>
styles.xsl:
<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="text" version="1.0" encoding="iso-8859-1"/>
<xsl:template match="/">body {
background-color: <xsl:value-of select="/colors/background" />;
}
</xsl:template>
</xsl:stylesheet>
Command to render css: xsltproc -o styles.css styles.xsl colors.xml
styles.css:
body {
background-color: #ccc;
}
It’s not possible with CSS alone.
You can do it with JavaScript and LESS using less.js, which will render LESS variables into CSS live, but it’s for development only and adds too much overhead for real-life use.
The closest you can come with CSS is to use an attribute substring selector like this:
[id*="colvar-"] {
color: #f0c69b;
}
and set the ids of all your elements that you want to be adjusted to names starting with colvar-, such as colvar-header. Then when you change the color, all the ID styles are updated. That’s as close as you can get with CSS alone.
I want Bootstrap styling to always supersede Rails native styling.
The example that's driving this is the following code:
link_to "Delete all CIDNE reports", :class => "btn btn-info"
Does not style the link in the button fashion you would expect from Bootstrap. It remains looking like an ordinary generic blue link. How do I ensure Bootstrap styles take precedence?
Styles are included in order which they're are listed in application.css(sass/scss etc) in your assets folder. By defaults the whole directory required using require_tree . Which means an alphabetical order.
And rails only provides you with styles when you do the scaffolding and it gives you scaffold.css. So if you're including file called bootstrap.css, it should go before that file.
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: