Terminal.css
++ Modern and minimalistic CSS framework for terminal lovers ❤️ +
+Goal
++ There are so many CSS frameworks out there with great features but + most of them come at the cost of bloated html code. + Terminal.css is here for purists who want minimal overhead and + maximal control. +
+Credits
++ This project is heavily inspired by + @egoist's + work - + hack.css +
++
Grid System
++ Terminal.css doens't come with a build in grid system. It encourages + you to use your own - whether it's Flexbox or CSS Grid. +
++
Lists
+-
+
- 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 +
- Not forgetting child list items +
- Not forgetting child list items +
+ - A couple more +
- top level list items +
Don't forget Ordered lists:
+-
+
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. +
-
+ Aliquam tincidunt mauris eu risus.
+
-
+
- + Lorem ipsum dolor sit amet, consectetuer adipiscing elit. + +
- Aliquam tincidunt mauris eu risus. +
+ - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. +
- Aliquam tincidunt mauris eu risus. +
Definition lists are also included.
+-
+
- Description list title 01 +
- Description list description 01 +
- Description list title 02 +
- Description list description 02 +
- Description list description 03 +
+
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. Vestibulum tortor quam, feugiat + vitae, ultricies eget, tempor sit amet, ante. +
+Level 3 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 4 Heading
+Level 5 Heading
+Level 5 Heading
++
Tables
+| Rank | +Movie | +Downloads | +Grosses | +
|---|---|---|---|
| torrentfreak.com | +|||
| 1 | +Fast Five | +9,260,000 | +$626,137,675 | +
| 2 | +The Hangover II | +8,840,000 | +$581,464,305 | +
| 3 | +Thor | +8,330,000 | +$449,326,618 | +
| 4 | +Source Code | +7,910,000 | +$123,278,618 | +
| 5 | +I Am Number Four | +7,670,000 | +$144,500,437 | +
| 6 | +Sucker Punch | +7,200,000 | +$89,792,502 | +
| 7 | +127 Hours | +6,910,000 | +$60,738,797 | +
| 8 | +Rango | +6,480,000 | +$245,155,348 | +
| 9 | +The King’s Speech | +6,250,000 | +$414,211,549 | +
| 10 | +Harry Potter and the Deathly Hallows Part 2 | +6,030,000 | +$1,328,111,219 | +
Special Elements
+Terminal.css also supports a range of 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. +
+ +
Code Blocks
+
+
+ :root {
+ --global-font-size: 14px;
+ --global-line-height: 1.4rem;
+ --global-space: 10px;
+ --font-stack: 'Fira Code',Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;
+ --background-color: #fff;
+ --page-width: 70em;
+ --primary-color: rgb(206, 4, 105);
+ --font-color: #151513;
+ --tertiary-color: #727680;
+ --grid-gap: 1em;
+ }
+
+
+
+ Misc
+
+ I am the a tag example
+ I am the abbr tag example
+ I am the acronym tag example
+ I am the b tag example
+ I am the big tag example
+ I am the cite tag example
+ I am the code tag example
+ I am the del tag example
+ I am the dfn 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 samp tag example
+ I am the small tag example
+ I am the span tag example
+ I am the strong tag example
+ I am the sub tag example
+ I am the sup tag example
+ I am the tt tag example
+ I am the var tag example
+ I am the small class example
+ I am the large class example
+ I am the quiet class example
+
+ Address +
+ + Mozilla Foundation+ 1981 Landings Drive
+ Building K
+ Mountain View, CA 94043-0801
+ USA + +
+
Forms
+ + ++
Progress Bar
+With only an arrow
+ + +With a percentage showing above the arrow
+ + +Without arrow
+ + ++
Buttons
++
+
+
+
+
+
+
+
+
+
+
+
+
Button Group
++
Cards
++
Alerts
++
Version: 0.0.1 Top
+ +