Carsales UI Styleguide
UI Styleguide
4.kss-section.kss-depth-1

4Typography

Heading 1

Lorem ipsizzle shizznit sizzle amet, that's the shizzle adipiscing bow wow wow. Nullizzle sapizzle velizzle, crackalackin volutpizzle, funky fresh quizzle, i'm in the shizzle vizzle, arcu. Daahng dawg pimpin' gangster. Yo i saw beyonces tizzles and my pizzle went crizzle. Shut the shizzle up at dolor dapibus pimpin' tempus fo shizzle my nizzle. Mauris pellentesque sizzle for sure turpizzle. Mofo izzle da bomb. Pellentesque funky fresh fo shizzle mah nizzle fo rizzle, mah home g-dizzle yo. In bizzle mofo platea dictumst. Boom shackalack dapibizzle. Boofron funky fresh urna, pretizzle eu, fo shizzle ac, eleifend phat, nunc. Get down get down suscipizzle. Integizzle semper velit sizzle we gonna chu

Heading 2

Lorem ipsizzle shizznit sizzle amet, that's the shizzle adipiscing bow wow wow. Nullizzle sapizzle velizzle, crackalackin volutpizzle, funky fresh quizzle, i'm in the shizzle vizzle, arcu. Daahng dawg pimpin' gangster. Yo i saw beyonces tizzles and my pizzle went crizzle. Shut the shizzle up at dolor dapibus pimpin' tempus fo shizzle my nizzle. Mauris pellentesque sizzle for sure turpizzle. Mofo izzle da bomb. Pellentesque funky fresh fo shizzle mah nizzle fo rizzle, mah home g-dizzle yo. In bizzle mofo platea dictumst. Boom shackalack dapibizzle. Boofron funky fresh urna, pretizzle eu, fo shizzle ac, eleifend phat, nunc. Get down get down suscipizzle. Integizzle semper velit sizzle we gonna chu

Heading 3

Lorem ipsizzle shizznit sizzle amet, that's the shizzle adipiscing bow wow wow. Nullizzle sapizzle velizzle, crackalackin volutpizzle, funky fresh quizzle, i'm in the shizzle vizzle, arcu. Daahng dawg pimpin' gangster. Yo i saw beyonces tizzles and my pizzle went crizzle. Shut the shizzle up at dolor dapibus pimpin' tempus fo shizzle my nizzle. Mauris pellentesque sizzle for sure turpizzle. Mofo izzle da bomb. Pellentesque funky fresh fo shizzle mah nizzle fo rizzle, mah home g-dizzle yo. In bizzle mofo platea dictumst. Boom shackalack dapibizzle. Boofron funky fresh urna, pretizzle eu, fo shizzle ac, eleifend phat, nunc. Get down get down suscipizzle. Integizzle semper velit sizzle we gonna chu

Heading 4

Lorem ipsizzle shizznit sizzle amet, that's the shizzle adipiscing bow wow wow. Nullizzle sapizzle velizzle, crackalackin volutpizzle, funky fresh quizzle, i'm in the shizzle vizzle, arcu. Daahng dawg pimpin' gangster. Yo i saw beyonces tizzles and my pizzle went crizzle. Shut the shizzle up at dolor dapibus pimpin' tempus fo shizzle my nizzle. Mauris pellentesque sizzle for sure turpizzle. Mofo izzle da bomb. Pellentesque funky fresh fo shizzle mah nizzle fo rizzle, mah home g-dizzle yo. In bizzle mofo platea dictumst. Boom shackalack dapibizzle. Boofron funky fresh urna, pretizzle eu, fo shizzle ac, eleifend phat, nunc. Get down get down suscipizzle. Integizzle semper velit sizzle we gonna chu

Heading 5

Lorem ipsizzle shizznit sizzle amet, that's the shizzle adipiscing bow wow wow. Nullizzle sapizzle velizzle, crackalackin volutpizzle, funky fresh quizzle, i'm in the shizzle vizzle, arcu. Daahng dawg pimpin' gangster. Yo i saw beyonces tizzles and my pizzle went crizzle. Shut the shizzle up at dolor dapibus pimpin' tempus fo shizzle my nizzle. Mauris pellentesque sizzle for sure turpizzle. Mofo izzle da bomb. Pellentesque funky fresh fo shizzle mah nizzle fo rizzle, mah home g-dizzle yo. In bizzle mofo platea dictumst. Boom shackalack dapibizzle. Boofron funky fresh urna, pretizzle eu, fo shizzle ac, eleifend phat, nunc. Get down get down suscipizzle. Integizzle semper velit sizzle we gonna chu

Heading 6

Lorem ipsizzle shizznit sizzle amet, that's the shizzle adipiscing bow wow wow. Nullizzle sapizzle velizzle, crackalackin volutpizzle, funky fresh quizzle, i'm in the shizzle vizzle, arcu. Daahng dawg pimpin' gangster. Yo i saw beyonces tizzles and my pizzle went crizzle. Shut the shizzle up at dolor dapibus pimpin' tempus fo shizzle my nizzle. Mauris pellentesque sizzle for sure turpizzle. Mofo izzle da bomb. Pellentesque funky fresh fo shizzle mah nizzle fo rizzle, mah home g-dizzle yo. In bizzle mofo platea dictumst. Boom shackalack dapibizzle. Boofron funky fresh urna, pretizzle eu, fo shizzle ac, eleifend phat, nunc. Get down get down suscipizzle. Integizzle semper velit sizzle we gonna chu

We all like making lists

The above header should be an H2 tag. Now, for a list of fruits:

  • Red Apples
  • Purple Grapes
  • Green Kiwifruits

Let's get crazy:

  1. This is a list item with two paragraphs. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.

    Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus. Donec sit amet nisl. Aliquam semper ipsum sit amet velit.

  2. Suspendisse id sem consectetuer libero luctus adipiscing.

What about some code in a list? That's insane, right?

  1. In Ruby you can map like this:

     ['a', 'b'].map { |x| x.uppercase }
  2. In Rails, you can do a shortcut:

     ['a', 'b'].map(&:uppercase)

Some people seem to like definition lists

Lower cost
The new version of this product costs significantly less than the previous one!
Easier to use
We've changed the product so that it's much easier to use!

I am a robot

Maybe you want to print robot to the console 1000 times. Why not?

def robot_invasion
  puts("robot " * 1000)
end

You see, that was formatted as code because it's been indented by four spaces.

How about we throw some angle braces and ampersands in there?

<div class="footer">
    &copy; 2004 Foo Corporation
</div>

Playing the blame game

If you need to blame someone, the best way to do so is by quoting them:

I, at any rate, am convinced that He does not throw dice.

Or perhaps someone a little less eloquent:

I wish you'd have given me this written question ahead of time so I could plan for it... I'm sure something will pop into my head here in the midst of this press conference, with all the pressure of trying to come up with answer, but it hadn't yet...

I don't want to sound like I have made no mistakes. I'm confident I have. I just haven't - you just put me under the spot here, and maybe I'm not as quick on my feet as I should be in coming up with one.

Table for two

IDNameRank
1Tom Preston-WernerAwesome
2Albert EinsteinNearly as awesome

Crazy linking action

I get 10 times more traffic from Google than from Yahoo or MSN.

Ode to code

return shell_exec("echo $input | $markdown_script");

kss-node less docs --less less/style-documentation.less --template styleguide-template