About this layout
This here layout is called SCIENCE+RULES... because Sharaku looks very smart in his lab coat and is working on some science, and that rules. Duh. (Really it's just the name I came up with in two seconds, anyhow. Don't @ Me Bro.)
As for the layout itself—it's been carefully synthesised in the MOUSELING.net Laboratory. It's free to use, But with a twist.
The age of Angura-Kei in the West is, unfortunately, over with. So I don't expect anyone visiting to actually use the layout as-is. What I wish to provide, instead, is a learning layout: I've carefully annotated most of my code, so if you're curious as to how I got certain effects working, check it out ne ;-)
The scans used for the layout and the icons are by me from Metronome trading cards I have lying around. I own many. They are all very, very charming. Just like Metronome, I'm keeping the theme colours to Yellow and Black and Red.
Using this layout
To use this layout in any way you wish, simply download the .zip file and hack away at it.
You're welcome to use it for your own website with credit, like any other layout I make, and you're allowed to chop it up and replace the graphix and use it however you like as long as a link to me at least remains in your Credits.
Element previews
I should probably show off what various elements look like as part of this preview. Of course, I am very generous, grand, lovely and cute, and awesome, and generous too. So here you go.
Images & classes
Aligned text
There's a class for right aligned text.
There's a class for center-aligned text (and content).
There's a class for left-aligned stuff, too, but it won't really affect the text. It will get rid of the justified text, though, so I might as well start rambling on. I've provided a way to "decorate" your text, just a bit, that way being adding an underline. One healthy class is worth a thousand unhealthy ones, right? So here you go! Underlined text! ...or something like that.
I've provided a button, a banner and an icon too. Just for you! (Actually, it's more for myself...)
Included graphics
Figure/image
Details/Summary
Don't click on this! I'm a coward!
WTF? You've exposed me! Look what you've Done...you have Ruined Everything. What is your Problem, man.
Actually, you can put anything you want in this tag. So it's useful. Heh.
All kinds of lists
An unordered list of video games
A regular old unordered list... with a nested ordered list just to show off
- Raidou Kuzunoha vs. the Soulless Army
- Sonic Adventure 2
- PaRappa The Rapper series
- PaRappa The Rapper
- Um Jammer Lammy
- PaRappa The Rapper 2
- Spore
An ordered list of numbers
An ordered list. That's pretty normal.
- 49
- 666
- Three
- 01
A description list about Sharaku Kobayashi
The element dl originally defined a definition list. In our new modern era it actually means description list. It can be stretched to be used for more than just terms and their meanings.
I like to use them for Questions and Answers, which are definitely "description titles" and "description details". Japanese webmasters did this all the time two decades ago, and who am I to question themね。。。
- Name
- Sharaku Kobayashi
- Instrument
- 01. VOICECODER
- Likes
- Being alone
- Dislikes
- Noisy places
- Gender
- Apple computer
- Can't you just give me a longer entry? Describe "Sharaku" why don't you!
- What?! Fine!
184cm tall and still wears platform sneakers. Extremely shy. Has a very depressed worldview. His nasal vocals take some getting used to, but they are a charm point. Taken from my Metronome fansite, how about that.
Ha. Aha. Tricked you. That was a block quote, too.