Classless Framework for AMP HTML

About CSS​AMP

What is it?

CSS​AMP is a CSS only framework for AMP HTML that styles frequently used HTML tags without the need for classes. It also provides a few utilities such as a responsive grid and CSS-only tooltips.

CSS​AMP can be used stand-alone or as a foundation to build upon. This site you're viewing now uses CSS​AMP and is all you need to get started.

Compatible with all modern browsers and IE9+.

No download necessary. This page uses the latest CSSAMP version and is the template.

Why does it exist?

Sometimes you want to quickly set up a simple site or application. You don't want it to look like a Word™ doc but you also don't want/need a massive framework such as Bootstrap or Foundation or Materialize.

So in a similar vein as Pure and Skeleton, CSS​AMP aims to provide a minimal CSS framework that requires minimal setup.

CSS​AMP takes this minimal approach one step further by making it completely classless. Not only that, but the default styles are only applied to elements without classes. Why only bare tags? For custom components and modules, you may not want the standard stylings to apply, so by giving them a class you're removing all CSS​AMP styling. If you want to add a class and want the CSS​AMP styling applied, just add the data-xx attribute to that element.

How does it work?

CSS​AMP effectively changes the default browser styles. Any commonly used tags such as input or button are styled only if they don't have any classes.

What if you want to add a class to a tag but still want to retain the CSS​AMP style? Just add the attribute data-xx to the tag and the CSS​AMP styles will be applied.

<!-- want to style a button? -->
<button>Button</button>

<!-- adding a class will remove the CSSAMP styling and use the default browser style -->
<button class="your-btn-class">Button</button>

<!-- adding the attribute data-xx to a tag with a class will apply the CSSAMP styling -->
<button data-xx class="your-btn-class">Button</button>

Change log

v1.3.0

  • Added CSS variables for color and fonts, as well as a dark color scheme
    • Single location for page color configuration
    • Single location for page font configuration
    • Dark color scheme switch simply by prepended 'x' on variable names
    • Page banner section for photos or color

v1.2.0

  • Updated to work with AMP
    • Grids now use span element
    • Tags now use the mark element
    • Cards now use figure element
    • Attributes all must be prepended with data- now to be AMP-compatible
    • Changed utility classes to attributes
    • The a anchor tag added vertical-align:top to maintain consistent placement

v1.1.0

  • Removed all classes
    • Grids no longer use classes
    • Buttons no longer use classes
    • Cards no longer use classes
    • The data-xx default class has now been made an attribute
    • Changed utility classes to attributes
  • Introduced tags
  • Introduced rounded buttons
  • Changed tooltip behaviour and attribute
    • Instead of data-tt it's now just data-tt
    • Anchor link tooltips now require the data-att attribute
  • Introduced footer
  • Includes a template HTML file

v1.0.1

  • Added navigation
  • Separated LESS files into components
  • Included SVG icons

How to install

Download this page from here until I getGithub situated.

Included in the page are the embedded SVG icon files from Google, and the compiled CSS file.

Sections

This site that you're viewing right now is built on section elements. The sections are horizontally centered, have a max-width equal to 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.

<!-- use sections to quickly and easily contian content -->
<section>
	Your code here.
</section>

Typography

Font sizes in CSS​AMP are based in rems. You can set the initial font size in the html element to change the scale. The default is 10px so that 1rem is 10px and 2rem is 20px etc.

The font family defaults are just the standard browser defaults, so data-serif, data-sans-serif and data-monospace fonts are chosen by the browser. You can change this in the CSS font variablea.

The main thing CSS​AMP does to headings is to standardise the margins and paddings. h1 through to h6 are taken care of.

h1 Heading level 1

h2 Heading level 2

h3 Heading level 3

h4 Heading level 4

h5 Heading level 5
h6 Heading level 6

Buttons

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 -->
<button data-primary>Primary button</button>

<!-- default button -->
<button>Default button</button>

<!-- disabled button -->
<button disabled>Disabled button</button>

Anchor and submit buttons

You can style anchor links by adding the btn attribute and input type=submit will automatically be styled like a button.

Anchor link

<!-- anchor link button -->
<a data-btn data-primary>Anchor link</a>

<!-- input submit button -->
<input type="submit" value="Submit">

Full width buttons

If you want your buttons to be 100% width on mobile screens you can add the data-m-full attribute.

These buttons will be full width on mobile screens.

<!-- primary button -->
<button data-primary data-m-full>Primary button</button>

<!-- default button -->
<button data-m-full>Default button</button>

<!-- disabled button -->
<button data-m-full disabled>Disabled button</button>

Rounded buttons

If you want your buttons to be rounded, use the data-round attribute.

<!-- primary button -->
<button data-primary data-round>Primary button</button>

<!-- default button -->
<button data-round>Default button</button>

<!-- disabled button -->
<button data-round disabled>Disabled button</button>

Tags

Tags use the mark element.

One Two Three Four Five Six Seven Eight Nine Ten Eleven Twelve 
<!-- tags are inline block elements with margins -->
<mark>One</mark><mark>Two</mark><mark>Three</mark>

Tooltips

Tooltips are handy and CSS​AMP 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 data-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.

<!-- inline element -->
<b data-tt="Tooltip">Tooltip</b>

<!-- buttons -->
<button data-primary data-tt="Primary button with a tooltip">Primary button</button>
<button data-tt="Normal button with a tooltip">Normal button</button>

Disabled button tooltips

If you want to tell your user why a button is disabled then you can use the data-dtt attribute to show a tooltip when a button is disabled. This is handy for things such as invalid or incomplete forms.

You can use both data-tt and data-dtt on the same element and the button disabled state will determine the tooltip shown.

Enter some text to enable the disabled button.

<!-- disabled buttons -->
<!-- note that you can have tooltips for enabled and disabled states -->
<button disabled="true" data-tt="Not disabled" data-dtt="Disabled">Disabled button</button>

Anchor link tooltip

You can easily set a tooltip for an anchor link that shows the href on hover just by adding the data-att attribute.

<!-- anchor link tooltips with the data-att attribute -->
<a data-att href="https://cssamp.com">CSSAMP</a>

Forms

Nothing special here, replacing the often ugly browser defaults with some CSS​AMP 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.

<label>Username</label>
<input type="text" placeholder="username">

<label>Password</label>
<input type="password" placeholder="password">

<label>Comment</label>
<textarea placeholder="comment"></textarea>




<!-- select and option -->
<select>
	<option disabled selected>Select an option</option>
	<option>Option One</option>
</select>

<!-- checkbox -->
<input type="checkbox" id="checkbox-1"> <label for="checkbox-1">Checkbox 1</label>

<!-- radio -->
<input type="radio" name="radio" id="radio-1"> <label for="radio-1">Radio 1</label><br><input type="radio" name="radio" id="radio-2"> <label for="radio-2">Radio 2</label>

Code

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 ) {
  that = theQuestion;
}
<!-- inline code -->
<code>code</code>

<!-- pre code -->
<pre><code>Code line 1
Code line 2
Code line 3</code></pre>

Blockquote

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

<blockquote>
	<p>Quote goes here.</p>

	<p data-txt="r">
		<i>- Said Someone</i>
	</p>
</blockquote>

Lists

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

  • Unordered list item one
  • Unordered list item two
  • Unordered list item three with nest list:
    • Nested item one
    • Nested item two
  • Unordered list item four
  1. Ordered list item one
  2. Ordered list item two
  3. Ordered list item three with nest list:
    1. Nested item one
    2. Nested item two
  4. Ordered list item four

Tables

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 data-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.

Title one Title two Title three Title four
Row 1 col 1 Row 1 col 2 Row 1 col 3 Row 1 col 4
Row 2 col 1 Row 2 col 2 Row 2 col 3 Row 2 col 4
Row 3 col 1 Row 3 col 2 Row 3 col 3 Row 3 col 4
Row 4 col 1 Row 4 col 2 Row 4 col 3 Row 4 col 4

The grid

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.

1/12
11/12
2/12 or 1/6
10/12 or 5/6
3/12 or 1/4
9/12 or 3/4
4/12 or 2/6 or 1/3
8/12 or 2/3
5/12
7/12
6/12 or 3/6 or 2/4 or 1/2
6/12 or 3/6 or 2/4 or 1/2
1/1
 
<!-- no need for rows, span will act as both row and container -->
<span>
	<div data-col="1/3"></div>
	<div data-col="2/3"></div>

	<!-- new row -->

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

Fixed grids for mobile

The grid columns will automatically expand to 100% width when the viewport reaches the @mobile width. To prevent this, add the data-fx attribute to the column.

5/12
7/12
1/2
1/2
 
<!-- adding data-fx to the data-col will retain width on mobile -->
<span>
	<div data-fx data-col="5/12"></div>
	<div data-fx data-col="7/12"></div>
</span>

Nested grids

You can place a span inside of data-col to nest grids. You can do this as many times as you like.

1/2
1/1
1/2
1/2
 
<!-- you can nest a span inside a col -->
<span>
	<div data-col="1/2"></div>
	<div data-col="1/2">
		<!-- nested grid -->
		<span>
			<div data-col="1/1"></div>
			<div data-col="1/2"></div>
			<div data-col="1/2"></div>
		</span>
	</div>
</span>

Grids with horizontal rule

The examples you are looking at now are all cols within a span separated by hrs.

<!-- 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

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

Card one

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Card two

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.

Card three

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

 
<!-- 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.

<!-- image at the top -->
<figure>
	<amp-img data-xx src="sign.jpg" width="640" height="427" layout="responsive">
	</amp-img>

	<h5>Title</h5>

	<p>Content goes here</p>
</figure>
Middle image

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

<!-- image in the middle -->
<figure>
	<h5>Title</h5>

	<amp-img data-xx src="sign.jpg" width="640" height="427" layout="responsive">
	</amp-img>

	<p>Content goes here</p>
</figure>
Bottom image

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

<!-- image at the bottom -->
<figure>
	<h5>Title</h5>

	<p>Content goes here</p>

	<amp-img data-xx src="sign.jpg" width="640" height="427" layout="responsive">
	</amp-img>
</figure>

Utility attributes

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.

Attribute Values Effect
data-full null Width 100%
data-hide null Display none
data-fs xs s m l xl Sets font sizes from 1.1rem to 2.4rem
data-mt 0 2 4 8 Sets margin-top from 0 to 8rem
data-mb 0 2 4 8 Sets margin-bottom from 0 to 8rem
data-pt 0 2 4 8 Sets padding-top from 0 to 8rem
data-pb 0 2 4 8 Sets padding-bottom from 0 to 8rem
data-pa 0 2 Either removes all padding or sets padding for all sides to 2rem
data-txt l c r j Sets text alignment to left, center, right or justify 
<!-- 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>