Neophyte's (Just HTML) Component Library

We are attending Neophyte's web-dev session 101 and we are making a library for ourselves which would make all our projects look good and consistent.

@typography

This is the biggest heading

This is the second biggest

Let me show you the normal text. This is free flowing and will wrap at the end like a paragraph.

This is relatively smaller text

@container

fluid container

This is a fluid container and it will go till the end of the page.

centered container

This is a centered container and it will go till specified width

@links

Primary Link Secondary Link

@lists

Unordered list

Unordered Inline list

Ordered reversed list

  1. Ordered-reversed-list-item-1
  2. Ordered-reversed-list-item-2
  3. Ordered-reversed-list-item-3

@nav

@header

@section

White section

This will have white background

Off-white section

This will have grey background

@CSS Transition

Hover over this section

See the css animation in real time, Hover over this section and then see the changes, to undo the css transition just move cursor from this section.

@shadows

white section

We are an open community of developers building resources for a better Web, regardless of brand, browser, or platform. Anyone can contribute and each person who does makes us stronger. Together we can continue to drive innovation on the Web to serve the greater good. It starts here, with you.

@footer