ampstart | AMP Start source code and templates

Will amp-story work fully with Normalize.css and Basscss? I ask because AMP Start is built on top of these two existing open-source projects:

https://www.ampstart.com/howitworks

Normalize.css

Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing. This provides a clean slate to define clear and consistent styles for AMP Start across devices.

Basscss

AMP start is built using Basscss, a low level CSS toolkit. Basscss is a very light weight toolkit, that provides lots of CSS utility classes help us do things like layouts, responsive Grids etc, without having to write any custom css.

Basscss was out-of-the-box lean and responsive, which was important for AMP Start. We used Basscss as the base (sans addons) but we removed any instances of “!important” from CSS rules because "!important" is incompatible with AMP. By using the existing Basscss classes, we were able to write a lot less CSS and still make great looking pages, even with AMP’s 50Kb CSS limitation.

On top of the foundation provided by these two projects, we added a set of more opinionated styles to the CSS, so that the components and templates would inherit a consistent look for AMP Start.

All told, the CSS takes up less than half of the 50kB quota in AMP, so you should have plenty of room to customize your pages with Basscss and AMP Start classes.

I followed this example to implement a "Show More" action on AMP. It's working great but when I click on the button it doesn't display anything to give the user the idea that the page is loading.

My backend isn't particularly fast and so it looks like it didn't work until, eventually, things load.

In the demo it doesn't have anything either, but it's super fast.

Can anything be done? Even if it's just disabling the button. I don't see any class changes on the list or form as to use them on the CSS.

This is my code:

I want to update a value according to the selected range in the date picker. This means, if I am staying from the 8th to the 11th, it should say 3 nights. If the dates are modified, this value should update accordingly. Working on a little demo:

I am trying to make the logo to redirect to the homepage, but when I put the image in an anchor its responsiveness doesn't work. I am using the "Simple Blog" template from here https://www.ampstart.com/templates

I am trying to implement a stepper sliding form in html-amp. I have a page where I want to implement button which should enable when some input is given in the input firstname. My button remains disabled, I have tried different ways to implement, but have been unsuccessful. I would like to implement something like disable[disabled] = "!firstname", where if the condition satisfied firstname is null, then the button remains disable.

Also, I have worked out that this code works perfectly when used in microsoft edge, and also the editor provided by the stackexchange itself. So, it is getting trickier as it is not just some logical error to be fixed.

I realized that amp-list must use CORS and https. So how can I build a demo in the local environment?
I built an AMP page from scratch and create a simple JSON file.

I am writing login form using AMP form:

I am working with Google AMP and I want to add a load more button in my template. I am following this example. I am getting data through JSON but something is fishy here I am getting this error in console service.js:255 Response must contain an array at " items "

My HTML template code

i am using a template from AMP Start. i have used the amp-carousel. the arrow images for next image and previous image buttons are on top of the screen and are not visible. how can i fix this? image one image two