I have a dynamic blogging website built on NodeJS and Bootstrap 4. The website currently has about 8 JS files and 5 CSS files. It is responsive.
I'm trying to implement AMP but it's throwing all the AMP errors.
My question is:
I cannot remove those JS & CSS files because that's use for Desktop version. How then should I go ahead? Is there a way that I could ask AMP to ignore the desktop CSS and JS files?
You can't use your own JavaScript with AMP. You'll have to remove your JavaScript files and use the elements available within the AMP framework itself.
Here you can find a complete list of AMP components:
https://www.ampproject.org/docs/reference/components
And examples for some of them here:
https://ampbyexample.com/#components
About your CSS: You can't use external stylesheets, you'll have to include them inline. Also note that your CSS has to be smaller than 50kb.
Related
I have a website that uses Bootstrap. Technically, I'm using Bootstrap 4 at the moment. I want to leverage Accelerated Mobile Pages (AMP) in the publicly-facing parts of my page. However, I have several errors that I can't seem to shake. This has me wondering, can I even use Bootstrap with an Accelerated Mobile Page?
Am I even allowed to use JavaScript in Accelerated Mobile Pages? Bootstrap has JavaScript for the hamburger menu on mobile phones. Yet, when I run the validator, I see errors like:
The attribute 'href' in tag 'link rel=stylesheet for fonts' is set to the invalid value 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css'.
The attribute 'rel' in tag 'link rel=' is set to the invalid value
The tag 'script' is disallowed except in specific forms.
So, back to my question. Is it possible to have a Bootstrap 4 site that uses Accelerated Mobile Pages?
Thanks!
Right now you cannot use bootstrap with AMP because it inserts a lot of unnecessary CSS and AMP is optimized for performance, but you can use font-awesome in AMP HTML by including it like so:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
See the original issue on github: https://github.com/ampproject/amphtml/issues/2413
Try this bootstrap 4 CSS prepared for AMP project:
https://github.com/jupeter/bootstrap/blob/v4-dev/dist/css/bootstrap-amp.min.css
This project is based on orginal bootstrap 4 fork.
All components loaded in the CSS file are placed:
https://github.com/jupeter/bootstrap/blob/v4-dev/scss/bootstrap-amp.scss
If you need add custom components, you can add in the "scss/bootstrap-amp.scss" file and recompile using:
$ npm run amp-css
Disclosure: As #Filnor notice, it's forked and modified by me.
You can create a custom bootstrap version from: Customize Bootstrap
Uncheck unnecessary properties and export it. It must be less than 50kb. Remove every "!important" rule and put it in your site as inline css.
I was wondering this too. On the github page for the AMP project it states that
It achieves reliable performance by restricting some parts of HTML, CSS and JavaScript. These restrictions are enforced with a validator that ships with AMP HTML. To make up for those limitations AMP HTML defines a set of custom elements for rich content beyond basic HTML.
So you cannot use custom JS like you are used to doing. Instead you have to build out the pages the AMP way and use custom elements as specified by them.
To get rid of error with maximal size of author's CSS, you can also do following steps when you want to use AMP and Bootstrap together:
put your entire css and bootstraps' css into one css file, lets say entire.css
Download and install https://github.com/purifycss/purifycss
use purify: purifycss entire.css yourpage.html --min --info --out minified.css
if minified.css is smaller than 50k then you can put content of this file in <style amp-custom>
if not, you can use on of online css minifiers / compressors.
EDIT:
There is unfortunately one problem that is hard to workaround. Bootstrap uses in many places !important keyword, which is restricted by AMP. The AMP validator shows this errors first when you got with custom CSS below 50kb.
As per the AMP specification you can only use inline css with a total max size of 50kb. You can use bootstrap css and components with AMP if those components do not rely on bootstrap.js since AMP dosent allow 3rd party JS as of now.
Plus, you need to remove !important wherever it is used in bootstrap css as AMP restricts the use of !important in inline css.
I know this question is old but recently (in 2021), I've found BootAMP
https://www.jssaints.com/bootamp (Bootstrap like CSS framework for AMP HTML).
Using it, it is easy to add AMP HTML support by migrating from Bootstrap to BootAMP
https://www.jssaints.com/bootamp/docs/introduction
They also provide few ready-made AMP-HTML templates
https://www.jssaints.com/bootamp/boilerplate
I've just learned bootstrap and I'm excited to integrate bootstrap in my blogger. I'm using the free version of blogger, not using any custom domain. Then I realize that blogger is using xml with lots of tags, I'm confused to integrate the html I made with bootstrap, to that blogger version.
I've googled and read the article Using bootstrap twitter with google blogger, but it doesn't explain anything about the tags in blogger's xml body. Other google results are also not answering my confusion. How to build a blogger template and integrate it with bootstrap? Is it possible to have a sleek look of bootstrap without custom domain in blogger? Your answers, any tutorial link, tutorial video, and samples are highly appreciated :)
Better late than never, Yes, you can use bootstrap without custom domain in blogger. I'm using it in my blog and in building blogger templates. All you need to do is to use Bootstrap CDN links in the head then you can use bootstrap components and classes in the body and with divs. this is an example for using bootstrap with blogger templates.
Note : With XML you must close all HTML elements properly like this <meta charset="utf-8"/>
My friend has a GitHub repository dedicated to convert Bootstrap framework to Blogger template.
Demo: https://bootsblogger.github.io
I downloaded a template that i want to use on my new website.
I also want's to integrate it with WHMCS, but when i try to do it WHMCS get affected by my CSS code that my HTML website have.
Is there easy way to separate these 2 different CSS classes?
With as all being very careful about resources within web development I am looking for a tool that you can pass a url and it show what CSS is actually used on that page but more importantly have the ability to download or extract that CSS Selectors and the actual css to create a single css of only the css needed to render that page, I have tried DustMe and various plugins. I realized I am not using 89% of bootstrap for example but picking it apart is almost impossible on pre built sites.
thanks
There is a online tool which provides that service, its not free though, unused-css.com
I'd recommend using uncss (requires node).
It can be added to your grunt build scripts to remove the css your are not using and is easy to configure
uncss.io works pretty well. Just enter your page URL and it will give you the cleaned CSS. It works for me on some pages, but not other pages.
REF: unused-css - (Paid Service)
or CSS Trashman
EDIT:
Use uncss git which requires node.js. It can be added to your built-in scripts to remove the unused css.
I started to use Bootstrap 3 recently and I was thinking to set myself a workflow. To make my work faster I want to use HTML5 Boilerplate. I've found out that I can get a custom build of H5BP which comes with Bootstrap. This is kinda cool but I have a few questions about it:
There isn't any license file in the file I downloaded. Not for Bootstrap, not for Normalzr, not even for H5BP itself. Considering I'm gonna use them in a commercial project, is this appropriate?
Can I delete local Bootstrap files in H5BP and replace them with CDN?
Is there something you would recommend to read or get familiar with before I start using them? (Could even be about setting a workflow).
Thank you for your help.
i found this license https://github.com/h5bp/html5-boilerplate/blob/v4.3.0/LICENSE.md (MIT license) more about the license of Bootstrap (Apache 2 license ) you will find here: http://getbootstrap.com/getting-started/#license-faqs. You can use both in commercial project without any problem
Why not? jQuery and Modernizr also load from CDN. Keep in mind jQuery and Modernizr have a local fallback. You will have such a fallback for Bootstrap too maybe. Also see: IE8 issue with Twitter Bootstrap 3
Read the docs of Bootstrap, HTML5 Boilerplate documentation, etc. To answer question about your workflow be more specific. How do you use the HTML5 Boilerplate? Build every site from from scratch? Do you use a temaplate engine or cms? etc.