Getting a responsive nav bar with a hamburger menu for mobile without using any Javascript requires a bit of a hack. You need to follow the exact structure listed below for it to work properly.

This site uses the BareCSS nav so you can resize your browser window to see how it looks on desktop/mobile. This site uses the fixed nav bar so it's using the fx attribute to keep it fixed. Mobile nav is fixed by default.

This site that you're viewing right now is built on section elements. The sections are horizontally centred, have a max-width equal to the @width variable in the _variables.less file (default is 90rem), and will shrink with smaller screens. Useful for containing content quickly.

Note: Because of CSS specificity, overwriting the default style with a class will require specifying that the class applies to a section element. Eg: Your CSS property should look like section.custom-section rather than just .custom-section.

Buttons default to the normal button style below. The primary button style uses the primary attribute. Disabled buttons are automatically styled if they have the disabled attribute.

Primary button Default button Disabled button

Tooltips are handy and BareCSS provides you with classless, no javascript tooltips. Tooltips can be applied to most tags, as long as they accept the ::before and ::after pseudo elements. Just use tt="Your tooltip here" in the tag.

Hover over this for a tooltip on a b tag. Hover over this, or this or even ^this to see tooltips in action.

Note: These tooltips aren't clever so they will spill offscreen. You'll need some Javascript if you want dynamic positioning.

Nothing special here, replacing the often ugly browser defaults with some BareCSS style. Just note that you need to place the label tag directly after the radio and checkbox inputs. Text inputs and select boxes are default to 100% width as you'll most likely use them in a grid.

The code tag functionality has been kept basic as you'll most likely be using something like PrismJS for syntax highlighting and code escaping.

Here is some inline code.

if ( to_be || !to_be )

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris.

- Lorem Ipsum

As long as the ul or ol tag is classless or has the xx attribute the styles should apply to the child li elements too.

The tables are just your standard table element with thead, tbody, tr, th and td elements within. As long as the table tag is classless or with the xx attribute, the styles should apply to the child elements.

When the user hovers over the head row, the relevant column will be highlighted. Any other row and the entire row will be highlighted.

Getting a classless grid system in AMP requires using the standards compliant and totally working span element.

The CSS​AMP grid is simple and succinct. It's also fully responsive so that's nice. Just use the span element and throw some divs with data-col attributed children in there and you're good. No need for row as the data-cols will wrap around.

Since there are no rows, column widths are expressed in fractions which should make identifying rows easier. Eg: 1/3 and 2/3 make a row.

Note that each column in this grid will be 100% width on a mobile device.

<!-- you can use a hr to separate cols -->
			<span>
				<div data-col="1/2"></div>
				<div data-col="1/2"></div>

				<hr>

				<div data-col="1/2"></div>
				<div data-col="1/2"></div>
			</span>
			

Cards use the also totally non-compliant figure element but works fine in IE9+. These cards are meant to be used within a grid.

<!-- figure element -->
	<figure>
		<p>Your content</p>
	</figure>

	<!-- card within a grid -->
	<span>
		<div data-col="1/2">
			<figure>
				<h5>Card title</h5>
				<hr>
				<p>Your content here</p>
			</figure>
		</div>

		<div data-col="1/2">
			<figure>
				<h5>Card title</h5>
				<hr>
				<p>Your content here</p>
			</figure>
		</div>
	</span>
	

Cards with images

Top image

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.

Middle image

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.

Bottom image

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.

CSS​AMP has a few utility attributes to make laying out a site a little faster. Sometimes you don't need to give an element a unique class to make it's text align right. Use these attributes to apply quick styles such as paddings or margins.

	<!-- margin top 2rem + margin bottom 4rem -->
	<div data-mt="2" data-mb="4"></div>

	<!-- padding all 2rem -->
	<p data-pa="2"></p>

	<!-- text align right + font size small -->
	<p data-txt="r" fs="s"></p>
	

If you need a footer, just use the footer element. No need to place it inside a section as the contents will already be contained by default.

Note: footer is not sticky, if you want a sticky footer, you'll need to implement it yourself.

<!-- the footer background will expand to 100% of viewport but contents will be contained to standard width -->
<footer>
	<span>
		<div data-col="1/2">
			<p>Created by <a data-att href="http://www.morganmacarthur.com">Morgan MacArthur</a></p>
		</div>

		<div data-col="1/2" data-txt="r">
			<a data-att href="https://github.com/morganmacarthur/CSSAMP" target="_blank">
				<img class="github-icon" src="img/github.svg">
			</a>
		</div>
	</span>
</footer>