Layout & Page Structure
Native HTML elements
My mentor taught me everything about the Force. Even the nature of the dark side. If one is to understand the great mystery, one must study all its aspects, not just the dogmatic narrow view of the Jedi. If you wish to become a complete and wise leader, you must embrace a larger view of the Force.
Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! In a comic, you know how you can tell who the arch-villain's going to be? He's the exact opposite of the hero. And most times they're friends, like you and me! I should've known way back when... You know why, David? Because of the kids. They called me Mr. Glass.
- Quentin Tarantino
- Michael Bay
- Christopher Nolan
- David Fincher
- M. Night Shyamalan
- Pulp Fiction
- Gattaca
- Shawshank Redemption
- Reservoir Dogs
- Forrest Gump
Headings
They may take our lives, but they'll never take our freedom!
They may take our lives, but they'll never take our freedom!
They may take our lives, but they'll never take our freedom!
They may take our lives, but they'll never take our freedom!
They may take our lives, but they'll never take our freedom!
They may take our lives, but they'll never take our freedom!
They may take our lives, but they'll never take our freedom!
They may take our lives, but they'll never take our freedom!
Text size
You still don't understand, do you? When they look at you, they don't see you anymore, they see me.
You still don't understand, do you? When they look at you, they don't see you anymore, they see me.
You still don't understand, do you? When they look at you, they don't see you anymore, they see me.
You still don't understand, do you? When they look at you, they don't see you anymore, they see me.
You still don't understand, do you? When they look at you, they don't see you anymore, they see me.
You still don't understand, do you? When they look at you, they don't see you anymore, they see me.
Text weight
I tell you those voices soared higher and farther than anybody in a gray place dares to dream.
I tell you those voices soared higher and farther than anybody in a gray place dares to dream.
I tell you those voices soared higher and farther than anybody in a gray place dares to dream.
I tell you those voices soared higher and farther than anybody in a gray place dares to dream.
I tell you those voices soared higher and farther than anybody in a gray place dares to dream.
I tell you those voices soared higher and farther than anybody in a gray place dares to dream.
I tell you those voices soared higher and farther than anybody in a gray place dares to dream.
I tell you those voices soared higher and farther than anybody in a gray place dares to dream.
I tell you those voices soared higher and farther than anybody in a gray place dares to dream.
Text styles
Text strikethrough
Text italics
Text italics
Text all caps
Text alignment
Pop quiz, hotshot. There's a bomb on a bus. Once the bus goes 50 miles an hour, the bomb is armed. If it drops below 50, it blows up. What do you do? What do you do?
Pop quiz, hotshot. There's a bomb on a bus. Once the bus goes 50 miles an hour, the bomb is armed. If it drops below 50, it blows up. What do you do? What do you do?
Pop quiz, hotshot. There's a bomb on a bus. Once the bus goes 50 miles an hour, the bomb is armed. If it drops below 50, it blows up. What do you do? What do you do?
Pop quiz, hotshot. There's a bomb on a bus. Once the bus goes 50 miles an hour, the bomb is armed. If it drops below 50, it blows up. What do you do? What do you do?
Text color
Background color
Margins
Padding
Rich text
H1. I was told that I could listen to the radio at a reasonable volume from nine to eleven
H2. I was told that I could listen to the radio at a reasonable volume from nine to eleven
H3. I was told that I could listen to the radio at a reasonable volume from nine to eleven
H4. I was told that I could listen to the radio at a reasonable volume from nine to eleven
And I said, I don't care if they lay me off either, because I told, I told Bill that if they move my desk one more time, then, then I'm, I'm quitting, I'm going to quit. And, and I told Don too, because they've moved my desk four times already this year, and I used to be over by the window, and I could see the squirrels, and they were merry, but then, they switched from the Swingline to the Boston stapler, but I kept my Swingline stapler because it didn't bind up as much, and I kept the staples for the Swingline stapler and it's not okay because if they take my stapler then I'll set the building on fire...
"I’d say, in a given week, I probably only do about 15 minutes of real, actual work."
- Excuse me, I believe you have my stapler?
- I'm going to need those TPS reports ASAP.
- The ratio of people to cake is too big.
- Sounds like somebody's got a case of the Mondays!
- Oh, and remember, next Friday is Hawaiian shirt day.
- Why does it say paper jam when there is no paper jam?
Form
Utility
Grid
Grid
v1.0.1
- Added Navigation and Footer global components to home page.
- Simplified home page to make it easier to start a project.
- Removed unused variables.
- Typo fixes.
v1.0
- Added code view to all classes and elements.
- Simplified default page layout and structure.
- Implemented a new color system with brand, neutral, and utility colors.
- Improvements to typography and layout variables.
- Removed some grid layouts.
- Added new default styling to form checkboxes and radio buttons.
- Removed some utility classes.
v0.2
- Removed all margins, paddings and spacers from the styleguide.
- Removed most size variables from the variables panel.
- Updated layout to remove old margins and paddings.
v0.1
- Initial release of the Piixel Pieces styleguide for beta testing.