Styleguide
I have to give a big shout out to the makers of Terminal CSS for creating this lightweight, modern and minimal CSS framework. I applied the framework to this site and altered it to suit my needs.
Alerts
Buttons
Button Group
Cards
Images
Image
Image with Caption
Code
Inline code: puts "Hello World"
Code block:
class Greeting
def initialize(name)
@name = name
end
def say_hello
puts "Hello, #{@name}!"
end
end
greeting = Greeting.new("World")
greeting.say_helloForms
Grid System
Lists
Unordered List
- This is a list item
- So is this - there could be more
-
Make sure to style list items to:
- Not forgetting child list items
- Not forgetting child list items
- A couple more
- Top-level list items
Ordered List
- Lorem ipsum dolor sit amet
-
Aliquam tincidunt mauris eu risus
- Nested item one
- Nested item two
- Lorem ipsum dolor sit amet
Description List
- Description list title 01
- Description list description 01
- Description list title 02
- Description list description 02
- Description list description 03
Table of Contents
Unlike regular lists, the TOC component only supports a single depth level.
Navigation
Main Navigation
Navigation List
Progress Bars
With arrow:
With percentage:
Without arrow:
Tables
| Rank | Movie | Downloads |
|---|---|---|
| 1 | Fast Five | 9,260,000 |
| 2 | The Hangover II | 8,840,000 |
| 3 | Thor | 8,330,000 |
| 4 | Source Code | 7,910,000 |
| 5 | I Am Number Four | 7,670,000 |
| torrentfreak.com | ||
Tabs
With Title
Optional title
- Tab 1
- Active Tab 2
- Tab 3
Without Title
- Tab 1
- Active Tab 2
- Tab 3
Timeline
Special Elements
Blockquote
This is a properly formatted blockquote, btw. Measuring programming progress by lines of code is like measuring aircraft building progress by weight.
Loading Element
Loading
Terminal Prompt
Terminal Prompt
Misc
I am the a tag example
I am the abbr tag example
I am the b tag example
I am the cite tag example
I am the code tag example
I am the del tag example
I am the em tag example
I am the i tag example
I am the ins tag example
I am the kbd tag example
I am the q tag
example
I am the small tag example
I am the strong tag example
I am the sub tag example
I am the sup tag example
Typography
Level 1 Heading
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.
Level 2 Heading
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Level 3 Heading
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.