Bootstrap and Google AMP - how to start

author: Rafał Radziszewski / last edit: 12-12-2017

Initially I wanted to include my collection of Bootstrap-AMP ideas into the Google AMP introduction. But in the end I thought it might be really worth spending a whole article on it.

Bootstrap JavaScripts

I know. Bootstrap is mostly about CSS, ok. But I think we can start with JS here, just because it's not going to take much.

You can't use Bootstrap JS with AMP.

What's the reason of this? Actually, not only one:

Let's finish it here. Please forget about using Bootstrap JS in AMP, currently there is no way for doing that.

Bootstrap CSS

This one is going to be longer, but quite interesting.

You can't use full Bootstrap. You're limited to 50KB for styles, while Bootstrap itself takes two times more.

You can't just include the whole bootstrap.min.css like you did many times before.

But you can import things you need separately. You need LESS or SASS source files for that.

Example:

Do an npm install --save bootstrap-sass

and then in the imports:

@import '../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_variables';

@import '../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_mixins';

@import '../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_normalize';

@import '../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_scaffolding';

@import '../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_grid';

Too easy? Here comes another rule - you can't import just anything you find in bootstrap-sass.

AMP has restrictions about styles.

!important NOT ALLOWED

I imagine that can be surprising. Actually, the Bootstrap may contain A LOT of !importants.

A bootstrap-sass/assets/stylesheets/bootstrap/_responsive-utilities is a good example. This file delivers responsive classes like hidden-xs, visible-xs etc.

These classes contains CSS display property with !important flag, because they are supposed to always overwrite your styles.

So... since you can't import _responsive-utilities, what's the best workaround?

An option could be to create some overwrites for Bootstrap styles. That's a solution that one of my good colleagues implemented in one of our projects and it was okay and readable.

In case of rafalradziszewski-pl I've created a vendors-custom folder in SCSS.

Then inside it I partially recreated the folder structure of bootstrap-sass. And at the end of the tree I placed the copy of _responsive-utilities.scss file and did some customizations to make it fit well with AMP.

As you can notice I also added a _responsive-visibility.scss, because it's a dependency of _responsive-utilities.scss which also contains couple of !importants that need to be gone.

I removed all !important flags from both files.

A problem

However, this trick may not work well for you - it still depends on your styling and the CSS specificity. The !important flag isn't there without the reason.

Lack of !important flag may cause bugs and prevent the styles to be overwritten.

Just to show you:

// style.scss
.visible-xs-block {
   @media (max-width: $screen-xs-max) {
      display: block;
   }
}
.MyComponent {
   display: none;
}
// index.html
<div class="MyComponent visible-xs-block"></div>

The MyComponent will always stay hidden, because the rule without !important is not able to overwrite the style that was declared after it.

A fix - improve specificity

I did not test it, but a workaround could be to:

Voila. Use .bootstrap-overwrite class before every style rule to improve the specificity and overwrite the styles.

Summary

I think that's the most important things you should know about Bootstrap and AMP combo.

Keep in mind the 50KB limit and write clean, low-specificity styles (I can also recommend the SUIT conventions).

If you don't need Bootstrap, don't use it.

If you want to implement AMP into an existing system, but you don't want to lose your current functionalities, consider creating a separate, small AMP site.

Read more!