AMP has many limitations for CSS - it needs to be inlined, cannot exceed 50KB and cannot include !important, filter, nor JavaScript. Which CSS frameworks can be safely used with AMP?
Add a comment
|
5 Answers
This is a community wiki, you can expand it if you have something to add.
These CSS-only frameworks are compatible with AMP (sorted by size):
- Mini.css (46KB minified)
- AMP Spectre (42KB minified)
- AMP MUI (40KB minified)
- Picnic CSS (38KB minified)
- AMP Surface (28KB minified)
- Mustard UI (24KB minified)
- AMP Start (23KB minified)
- Pure CSS (16KB minified)
- Milligram (9KB minified)
- 1BX (9KB minified)
- Skeleton (6KB minified)
- Tacit (6KB minified)
- Wing (5KB minified)
In order to use one of them in an AMP HTML page, get the minified CSS file, remove any !important or filter if they exist, paste the inlined CSS code into <style amp-custom> inside <head> and replace any <img> with <amp-img> inside <body>.
-
Which of these are AMP compatible without any changes? Removing !important is going to break lots of these.– DD.Commented May 4, 2018 at 8:21
-
1
-
1
I've created and released one called 1bx.uk that you can see here... https://1bx.uk
It's well documented and built specifically for AMP.
As we use it in our business, it will be well supported
-
This site can’t be reached 1bx.uk’s server IP address could not be found. DNS_PROBE_FINISHED_NXDOMAIN– JayCommented Dec 17, 2019 at 19:40
This framework is individually adaptable.
Amp CSS Framework is based on Bootstrap.
See here: https://ampcssframework.com
Maybe missing: http://basscss.com/v7/docs/guides/ui/
or as scss
https://github.com/basscss/basscss-sass
.. yes it not so active but might be interesting, the syntax seems short and simple, also independently reusable components
-
Thanks! The minified CSS is 10KB, but in order to be compatible with AMP, you have to manually remove all
!important.– niutechCommented Nov 24, 2018 at 15:21 -
Please do not write link only answers. They will probably be removed.– user416Commented Nov 25, 2018 at 10:25