No matter we like it or not the world is changing and so does the technology and the way information gets stored, handled and accessed – by us, by our customers, family, and friends, and generally – by anyone around. Maybe it's right to say that the advance of the technology is actually driving this changes around.
In the past few years, the web design society gradually embraced the idea of creating pages best fitting on any screen size – small or extra wide – adjusting the showcased content in order to obtain the best appearance regarding the space provided. We started thinking even of the plain HTML pages not as static documents appearing on the screen but as living mechanisms with clean and straightforward rules telling them what to do if the screen is xxx px wide.
And this way the responsive frameworks came around – libraries of predefined rules, layout and behavior classes which we could just take and after a short getting around with the framework itself – just go on with giving a shape to our important content. It is most likely, that we would all agree that one of the most prominent and popular ones is the Bootstrap framework which in time came to shape the new way pages are now built. Even one of the internet giants – Google – announced that they will be favoring pages which are mobile friendly placing them above the ones that are not in the results.
And now, a new announcement by Google came around. As you already guessed we are talking about the Accelerated Mobile Pages. To remind you - they propose to use promising caching of the AMP pages on their servers for even better speed of accessing - it is the so called AMP approach which pretty much narrows down to removing all the scripts, stylesheets and some tags out of the markup and replacing them with either AMP components (which should be doing most of the common tasks a script has to take on a web page) for the scripts and inline custom styling up to 50K in which the publishers to define the way they would want their pages built with AMP portfolio template, for example, to appear.
A question immediately arises – in a case of the static HTML page which using the Bootstrap framework what should one do in case an AMP mirror is needed for such page? Should the entire code be rewritten and is there a way making an HTML document both utilize the Bootstrap approach and get verified as AMP?
Maybe the most correct answer is – "It might – sort of" since we enter the give-and-take zone with this and here is why:
The Bootstrap framework consists of both CSS and JS files which being referenced in a page together, making the appearance and responsive behavior of the page available. These both get referenced as external assets with a <link type="stylesheet"> or a <script> tag. These are not allowed by the AMP strict validation policy – if you reference such in your pages the validation will fail – you can only reference scripts from the AMP library of elements and NO external stylesheets are allowed.
In this line of thoughts – if we want to transform a Bootstrap page into AMP we'll have to figure out a way going on without the bootstrap.js - somehow. We guess some of the content might fall down as a collateral damage in the process and some of the markup – get rewritten in order some of the AMP alternatives to the native Bootstrap components to step in – like the amp-carousel instead of the regular one and so on. Next challenge – the CSS rules themselves. We can't just copy/paste the contents of the bootstrap.css file into the <style amp-custom> tag for two reasons:
The bootstrap CSS code is a bit than twice bigger than the allowed limit of 50K, which an AMP web builder custom style tag can handle and to make the things even more interesting:
The native Bootstrap framework styling code has some !important declarations which are not allowed by the strict AMP restrictive validation policy. The solution is – altering the code and getting rid of them – again – somehow. But let's leave that aside for now and focus on the styling size – how to make it twice smaller so we can insert it in the amp-custom tag? How we can guess what parts we can safely cut off and which are actually needed – obviously there will be some kind of trial and error routines but just they alone will get us nowhere since the process might turn out endless.
The key is that practically not a Bootstrap page utilizes all the rules defined in the framework's stylesheet – some of the rules are just getting a free ride being loaded each time the page gets loaded but not actually used on this particular one. These we can safely cut off. But how to find them? – here is a simple and easy way.
Aside from the automated solutions which you could use with node.js and grunt for example there is this cool online solution called uncss-online which can be found over here- https://uncss-online.com
What you need to do there is paste the markup of your page in the left field, the code from the bootstrap.css stylesheet – in the right and hit the UNCSS MY STYLES button underneath. In theory, this should produce a clean snippet of all the rules and declarations actually used in your page's markup which you could place in the amp-custom style tag.
This, however, won't be just enough since it's very probable some of the rules to be still having some !important statements. You will also need to revise your code and styling figuring out the way getting around without them. There is no specific formula for doing this here – in some cases reversing the order of the rules might help, in others – just removing the !important will work as well.
This way you could make the copy of the Bootstrap page you've already created and get it along with AMP but the chances it gets verified at this point are relatively small. In order to make this work, you'll also need to do some not Bootstrap specific revisions like:
Make sure you don't have any inline styling in your markup and if you have any – place it in the above style tag targeting the specific element's id
And also, make sure you don't have one of the disallowed HTML tags in your markup and replace the ones the AMP has alternatives for – the most obvious example – each <div class="img"><img></div> tag should become <amp-img> and making sure you added a closing </amp-img> tag to them as well!
And probably a few others adjustments you would need to make to your code.
That's why we initially told you there is a way making an AMP Basic Template web page you've already created with the Bootstrap framework also comply with this AMP verification standard but it's a bit too far from a one click process.
So, in case you were wondering if it's possible to make The Bootstrap Framework get along with the Google's AMP validation system – now you have a few hints how to. We guess in time if this frankly spoken odd approach gain enough popularity there will also be some online generators like the above offering you to just transform the markup for you, but no matter what automated solutions emerge in time, there will always be the need of you as the designer as the one who making the final cut.