Amphtml: AMP Start: Create AMP boilerplate CSS for default styling

[ericlindley-g]

Pending UX as of 4/8

/cc @sriramkrish85

[pbakaus]

I'm not sure this is a good idea. There are plenty of CSS boilerplates on the web that are probably all AMP compatible. Why would we reinvent the weel? Or is there anything special to AMP?

[camelburrito]

@pbakaus - we would also be bootstrapping extensions. This would be more like a guideline and would help us present visually attractive samples.

@cramforce - should be able to explain why we are doing this better than i did :).

[joedevgee]

I am also expecting a official css framework from AMP. At least a simple grid system.
The main reason is that most of the CSS frameworks out there have something violates the AMP css rules, Pure.CSS, material-design-lite.css, etc.

[VedranBrnjetic]

I am experimenting with stripping down Bootstrap to pull it below the 50kB CSS threshold. Right now it's a nasty hack - I have removed all CSS dedicated to tables, unused grid offsets relevant to my page, glyphicons, jumbotron, some navbar CSS, pagination, lists, alerts, anything I don't currently need on my page. When I catch time, I will carefully go through all of it and remove all styling for all components that rely on javascript, media queries above "medium" including that part of the grid columns, most colour-coded components, animations (like animated progress bars...), modals, tooltips, popovers etc...

Long story short, I currently do have a Bootstrap based page that validates in amp. http://rugmaster.uk/amp.html but it needs more work to produce a decently reusable grid that works outside the parameters I needed for this particular page. I barely spent a few days on modifying this, but I will keep working on it.

[gctommy]

@pbakaus — Why would we reinvent the wheel?

Oh, the irony. The whole AMP Project is more or less about reinventing HTML.

@devilbags — I am also expecting a official css framework from AMP. At least a simple grid system.

Material Design Lite offers swatches: https://getmdl.io/customize/ so no reason why they couldn't throw in some starter templates onto the AMP by Example site.

@VedranBrnjetic Did you try this one? https://github.com/uncompiled/amp-bootstrap

[cramforce]

I guess, I never commented here :)

@gctommy AMP is not reinventing HTML. AMP is an application of HTML, just like HTML once was an application of SGML. Since AMP is literally HTML it cannot reinvent it.

So, most CSS frameworks should be fine. Bootstrap has to be heavily massaged for size, but works great (and this is exactly working as intended).

Our goal is simply for people to have an optional quick start to get up and running with a decently looking AMP page. The product will be CSS that people will literally have to copy-paste into their page and then can modify at their full desire.

I don't think we will create a new CSS framework. We will pick one and provide AMP specific theming to make things work nicely and provide certain higher level components that make sense for AMP's core use cases.

@camelburrito We should really have a document with a decision matrix evaluating all the popular CSS frameworks in terms of their usability as a basis for our work here.

[pbakaus]

What @cramforce said :)

I'm in favor of this plan – means we won't take on too much work building another big project within AMP, and still gives folks a decent recommendation to start with.

[cramforce]

The truth is that this project only exists, because I want to make an AMP
page and I suck at CSS :)

On Thu, Oct 6, 2016 at 7:36 AM, Paul Bakaus [email protected]
wrote:

What @cramforce https://github.com/cramforce said :)

I'm in favor of this plan – means we won't take on too much work building
another big project within AMP, and still gives folks a decent
recommendation to start with.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/ampproject/amphtml/issues/2851#issuecomment-251981958,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAFeTzHzefiBRBBpRjiSQN5LtOVJuYEPks5qxQd2gaJpZM4IDLK9
.

[kevinSuttle]

The problems with Bootstrap are that it sets globals, and relies on Normalize and HTML5 Boilerplate. The user has to do a _lot_ of overriding.

[ericlindley-g]

cc/ @abeck000 (UX on the project)

[ram-you]

Out of box support for animation. Support for flex and flex layout. Support for svg icons (à la Angular Material)

[kevinSuttle]

It would make more sense to aim for something like Safari's Reader Mode stylesheet.

[cramforce]

@kevinSuttle AMP's goal is not for every page to look the same. The design will need to make obvious affordances for page authors to make it feel their own (Logo, colors, typography, etc.).

[kevinSuttle]

Right, but isn't that what Bootstrap does too?

[cramforce]

@kevinSuttle Totally, no intention to re-invent the wheel. Just adopting the feel to fit onto the AMP axle :)

[camelburrito]

this is coming up with our ampstart project - will post updates once we have something in a sharable state.

[ericlindley-g]

Pulling off other assignees, as this is tracked in the AMP Start repo

[ericlindley-g]

FYI to folks on this list — you can find the launched feature at ampstart.com. Feel free to take a look and give us feedback in the AMP Start repo

[niutech]

You can also use one of the lightweight CSS frameworks:

• Spectre (45KB minified, only CSS),
• MUI (43KB minified),
• Surface (30KB minified, only CSS),
• Kube (30KB minified),
• Pure CSS (16KB minified, only CSS),
• Milligram (9KB minified, only CSS),
• Skeleton (6KB minified, only CSS).

[ericlindley-g]

/cc @camelburrito

Thanks for sharing, @niutech !

One thing to remember is that some might require a bit of finessing to be compatible with AMP's CSS support and JS requirements. For instance, replacing javascript functionality with AMP components, removing '!important' from CSS, etc.

Though I haven't combed through all of these frameworks in detail — are any compatible out of the box?

[camelburrito]

We already evaluated most of these for AMP Start and chose the best option at that time :) The first 3 were big and last 3 were either hard to port or were not actively maintained at that time. Pure i remember was almost compatible (That was the best option other than Bass).

But this FR is could be slightly different. We will track more of these on the AMP start repo

[niutech]

I have removed all !important from the Surface CSS framework and it outputs a valid AMP HTML page: http://jsbin.com/xohugojufe/

[ericlindley-g]

Nice! So it can be as little as just removing !important in some cases.

[camelburrito]

removing !important almost always breaks the frameworks functionality and makes it unpredictable.

@niutech - as long as we can get all their css for a page <50kb , we can use any framework. Its just a matter of convenience.

[niutech]

In case of Surface, there is only one !important and it is not crucial. The huge advantage of Surface is providing dynamic components like collapsible, modal, toolbar, lightbox, using only CSS.

[niutech]

I've added Spectre CSS-only framework to the list and I made the AMP demo by removing !important and replacing <img> with <amp-img>: https://repl.it/KPR2/3 or http://s.cssdeck.com/labs/full/x5pjudqw/noframe

[KiaraGrouwstra]

MUI also announced intent of AMP compatibility.

[niutech]

The problem is that MUI requires JS for their components such as modals, tabs or dropdowns, whereas Spectre and Surface don't.

[KiaraGrouwstra]

Sorry, yeah. Seems like with your PoC Surface remains the only option where things seem hopeful for the time being then, with others either depending on JS (MUI), not having discussed it, or appearing negative (Spectre).

[zearic]

@niutech I have done some research for AMP css frame as well. If you're interested, https://zearic.github.io/best-css-framework-for-google-amp/
Thanks,

[KiaraGrouwstra]

@zearic: thank you for your research. Based on your comparison I brought up the topic at Pure at https://github.com/yahoo/pure/issues/675.

[niutech]

@zearic Thanks! Are you comparing minified sizes? Would you like to include Surface & Milligram too? As for Bootstrap & Foundation, they are over the 50KB size limit.

[zearic]

@niutech My scripts is retrieving all the info from cdn url and github and I cannot found the cdn url for Surface. Do you have one? Yes the size is coming from cdn url and should be minified but not zipped. Milligram has been added. Thanks,

@tycho01 Thanks, I have several project to start but stuck in choosing css framework for AMP. Hope more css framework will be compatible to AMP, at least containing a mini/amp version.

[KiaraGrouwstra]

@zearic: relevant thread at https://github.com/mildrenben/surface/issues/33. hm.

[KiaraGrouwstra]

Update: Pure is now one !important (in .hidden) away from compatibility, documented here. Getting that .hidden to trump the other rules without !important is doable as well. So both Surface and Pure seem viable now!

[camelburrito]

https://www.npmjs.com/package/replace-important
https://www.npmjs.com/package/gulp-replace-important

There are these NPM packages we had launched, and they would help replace the rules with !important without breaking functionality. You will need to run the script on your entire CSS (Not just your framework). So you can work on the framework just like you would and then run this script when everything is done.

[KiaraGrouwstra]

@camelburrito: That should render both Surface and Pure compliant. Thanks for posting!

they would help replace the rules with !important without breaking functionality

I fear for Pure at least this part may be more nuanced unfortunately. In their case (see https://github.com/yahoo/pure/issues/675), the !important used in their .hidden class turned out needed to trump some of their other display rules with higher specificity. That's why my PoC to render them compatible without breaking things involved overriding all display rules, see here.

That isn't to say their framework can't be used with the !important stripped out. One just needs to be aware their .hidden will end up breaking when using it to override any of their other constructs setting display however. In that sense, it seems to me AMP's rule to ban !important is not always trivial to deal with.

[camelburrito]

ill also post a detailed CSS frameworks/toolkit comparison i did before we chose basscss for ampstart. That should also be helpful in this thread.

[gfortaine]

cc @pbakaus @traviskaufman Compatibility with AMP

[niutech]

I have just made AMP-compatible versions of two full-featured lightweight CSS frameworks: AMP Spectre and AMP Surface. I made minor fixes to minified CSS code and replaced illegal HTML tags. Feel free to try their AMP demo pages.

[cramforce]

@niutech Awesome! If you have a blog post or tweet to share, we'd happy to do so!

[niutech]

@cramforce Thanks. I will make a blog post soon. In the meantime I have AMPlified another CSS framework: AMP MUI.