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
Related
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.
I need to add responsive design features to my web application using Twitter Bootstrap. I just want the responsive behavior, I'm not interested in the typography, components or any other stuff included in Bootstrap.
I got a customized Bootstrap version just selecting the grid system. However, when I add the generated CSS to my application, all my styles are messed up (header, links and others). Why is that happening? How can I get a Bootstrap CSS with just the grid system? I would like to avoid a manual modification of the Bootstrap files.
Go to http://getbootstrap.com/customize/ and toggle just what you want from the BS3 framework and then click "Compile and Download" and you'll get the CSS and JS that you chose.
Open up the CSS and remove all but the grid. They include some normalize stuff too. And you'll need to adjust all the styles on your site to box-sizing: border-box - http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
Checkout zirafa/bootstrap-grid-only. It contains only the bootstrap grid and responsive utilities that you need (no reset or anything), and simplifies the complexity of working directly with the LESS files.
Just choose Grid system and "responsive utilities"
it gives you this: http://jsfiddle.net/7LVzs/
Made a Grunt build with the Bootstrap 3.3.5 grid only:
https://github.com/horgen/grunt-builds/tree/master/bootstrap-grid
~10KB minimized.
If you need some other parts from Bootstrap just include them in /src/less/bootstrap.less.
I would suggest using MDO's http://getpreboot.com/ instead. As of v2, preboot back ports the LESS mixins/variables used to create the Bootstrap 3.0 Grid System and is much more light weight than using the CSS generator. In fact, if you only include preboot.less there is NO overhead because the entire file is made up of mixins/variables and therefore are only used in pre-compilation and not the final output.
It looks like you can download just the grid now on Bootstrap 4s new download features.
It's been a while since this question was asked, but maybe now you can forego Bootstrap altogether and use CSS Grid! (it's simpler, neater, more flexible and faster). See this cool article: Stop using Bootstrap — create a practical CSS Grid template for your component based UI
In Bootstrap 4, there are already separated files in their GitHub. You can find them here
https://github.com/twbs/bootstrap/tree/main/dist/css
I recently found out about twitter bootstrap and I have been diving deep into the most recent version, Bootstrap 3. On the website, there is an example for an "Off Canvas" template (here: http://getbootstrap.com/examples/offcanvas/ ) which I have been modifying. But there are several things in the example that do not make sense to me.
In the "Off Canvas" template example, there are div elements that reference classes such as "row-offcanvas", "row-offcanvas-right", and "sidebar-offcanvas". I cannot find these in the bootstrap.css, and neither do I see these in the Chrome DevTools. I also do not see any effect when I remove these classes. Do these classes have any purpose? Or was it a mistake in the example to include those seemingly non-existent classes?
As #mgttlinger mentioned the css is defined at offcanvas.css See http://getbootstrap.com/examples/offcanvas/offcanvas.css
If want to a walk through of how it works see http://www.kendoui.com/blogs/teamblog/posts/13-11-05/creating-a-rwd-off-canvas-layout-with-bootstrap-3.aspx. It uses http://getbootstrap.com/examples/offcanvas/ as the starting point and explains the css used to create off canvas.
http://bradfrost.github.io/this-is-responsive/patterns.html#off-canvas is an excellent resource for more background on off canvas and most other responsive design patterns.
If you look at the page source closely you will find that in the header there is
<!-- Custom styles for this template -->
<link href="offcanvas.css" rel="stylesheet">
These classes are defined in there. And at least for me it does make a clearly visible difference if I remove this.
i did experience the same dunno what i did wrong but js didnt seems to work i just remove all codes and link back all js and css not working. So i try other js on my other folders it work and copy them on my empty offcanvas page it works. Then put back all templates code and it works fine now i guess its my machine some components stop responding maybe just try restart.
Do you know a source for pure CSS Templates? After setting up a simple Web Project I always wish to have a CSS file to:
Set reasonable font settings for paragraphs and headers
Polish my anchor tags
Style my forms (if I have to touch the HTML for this one - no problem)
Style my tables (I use headers and footers etc) using even & odd
Maybe give me some handy classes for error boxes, etc.
So if I Google for a such CSS file I find CSS Homepage Templates with HTML Structure and massive CSS which I can't use without changing much. I find CSS examples for perfect tables, other examples for perfect forms but what I don't find is a single CSS File which when loaded in a properly formatted HTML website will make it look "okay" instead of the pure HTML look.
Do you get me?
Does anybody have a hint for me?
Twitter Bootstrap might interested you but I believe it has a bit of javascript in it as well.
Edit: As mentioned in comment you can use many of the Bootstrap features without using any javascript.
I've personally used bootstrap and I love it. I've also bookmarked few others to play with when bandwidth permits.
Bootstrap
Blueprint
960 Grid
Update: On related matter, I would also checkout CSS Preprocessors such as Sass and LESS that could help in writing better CSS and build up a custom library to use across projects.
Perhaps try the CSS off of Twitter Bootstrap. Provides all sorts of consistent styling that's simple but elegant, in addition to some fancier element behaviors.
Update:
Adding to Yonix's related list, the following are alternative CSS preprocessors, which makes working with CSS a little more digestible:
Compass
Stylus
There's a bit of a learning curve when teaching yourself CSS, but some basic CSS is easier than you think.
For quick prototyping/wireframing and pre-made HTML templates, I use Zurb Foundation, as compared to Twitter Bootstrap. My advice is to familiarize yourself with their online documentation and delve into the main CSS file (foundation.css). You can build on top of that CSS file with the provided app.css file.
It comes with a lot of pre-made styles (buttons, forms, etc) and everything is responsive (fits on any size screen). You can choose to include all the plugins, or just the HTML and CSS. It also has an option to download the HTML templates, which come with a variety a layouts, such as a blog or a basic structure. I absolutely love it!
Is there a way to add a Javascript segment to each page in my website via CSS?
I am looking to add some Javascript tracking code (for my own benefit (using Google Analytics)) before the closing </head> tag on every page.
The simple question is: is there a way to add code to the HTML on every page of my website between the <head> and </head> tags using CSS to dynamically insert it (as opposed to going through and updating every page manually)?
Thank you,
Mick
No, CSS is a collection of styles to apply to elements (which can handle alternating states of controls, such as :hover), but isn't functional in the way you desire.
However, it seems to me that, if you can reference a CSS file globally, then you could simply place your Javascript in a separate file and reference that in each of your pages with a <script> tag (similar to how you would do with CSS files.)
Furthermore, if you're using a framework such as ASP.NET, then you can use master pages as templates from which relevant pages derive, reducing redundancy of this sort of thing.
Is there a way to add a Javascript segment to each page in my website via CSS?
No. Use a template language (e.g. TT) or include system (e.g. SSI) if you want common HTML across pages.
Nope, you can't add javascript through css. These are different techniques, one for changing the look of your website (css) and one for adding functionality to it (javascript). There is no way to add javascript through css-code.
As all the other answers stated: No, in general not.
Only MS IE offers such a solution, using the behavior-property.
I currently use this for an hover-anything-script for IE6 (included inside a conditional comment), which allows to add the CSS-:hover-selector to any HTML-element:
body {
behavior: url(/js/csshover.htc); }
The csshover.htc is from Peter Nederlof (LGPL).
See also: MSDN HTC Reference
Others have already noted that it's impossible. It seems that your site is static html only. Then you could write a little script that would prepend a link to javascript file before