Create AMP boilerplate CSS for default styling (AMP Start) #2851

Open
ericlindley-g opened this Issue Apr 8, 2016 · 15 comments

Projects

None yet

9 participants

@ericlindley-g
Collaborator

Pending UX as of 4/8

/cc @sriramkrish85

@ericlindley-g ericlindley-g self-assigned this Apr 8, 2016
@ericlindley-g ericlindley-g added this to the Pending Sprint Slotting milestone Apr 8, 2016
@pbakaus
Collaborator
pbakaus commented Aug 9, 2016

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
Collaborator

@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 :).

@devilbags

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
VedranBrnjetic commented Sep 8, 2016 edited

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
gctommy commented Oct 6, 2016

@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
Member

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
Collaborator
pbakaus commented Oct 6, 2016 edited

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
Member

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 notifications@github.com
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
#2851 (comment),
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
Collaborator

cc/ @abeck000 (UX on the project)

@ram-you ram-you referenced this issue in muicss/mui Oct 23, 2016
Open

AMP #167

@ram-you
ram-you commented Oct 25, 2016

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
Member

@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
Member

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

@ericlindley-g ericlindley-g changed the title from Create AMP boilerplate CSS for default styling to Create AMP boilerplate CSS for default styling (AMP Start) Dec 2, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment