Piero.css is a modified version of the Water.css framework by my friend Kognise. I wanted more of a programmer feel on my personal website, so I started modifying the css file bit by bit until i realized that pretty much everything about it is changed. For example, here is Piero.css right next to Water.css on the same site:
| Piero.css | Water.css |
|---|---|
|
|
So at this point, you're probably wondering what this framwork can do. The following are all of the current elements in a demo.
Below is some code, with a variable, you can copy it with
Ctrl-C. Did you know, alert(1) can show an alert
in JavaScript!
var myNumber = 0;
// This logs a message to the console and check out the scrollbar.
console.log('Hello, world!')Here are some more keyboard buttons
Press Ctrl + Shift + Print Screen to take a selected area screenshot on Linux.
Here's a horizontal rule and image because I don't know where else to put them.
And here's a nicely marked up table!
| Name | Quantity | Price |
|---|---|---|
| Godzilla | 2 | $299.99 |
| Mozilla | 10 | $100,000.00 |
| Quesadilla | 1 | $2.22 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dictum hendrerit velit, quis ullamcorper sem congue ac. Quisque id magna rhoncus, sodales massa vel, vestibulum elit. Duis ornare accumsan egestas. Proin maximus lacus interdum leo molestie convallis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut iaculis risus eu felis feugiat, eu mollis neque elementum. Donec interdum, nisl id dignissim iaculis, felis dui aliquet dui, non fermentum velit lectus ac quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. This is strong, this is normal, this is just bold, and this is emphasized! And heck, here's a link.
'The HTML blockquote Element (or HTML Block Quotation Element) indicates that the enclosed text is an extended quotation. Usually, this is rendered visually by indentation (see Notes for how to change it). A URL for the source of the quotation may be given using theciteattribute, while a text representation of the source can be given using the<cite>cite element.'
Quotes (<q>) share the same style as blockquotes.
Use <mark> to highlight the important stuff.
Addresses are also styled to be awesome!
john.doe@example.comThe details and summary tag
The HTML Details Element (details) creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state. A summary or label can be provided using the summary element.
The HTML Details Element (details) creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state. A summary or label can be provided using the summary element.