Description

PotatoCSS is a beautiful CSS framework for hackers. It's clean, simple and easy-to-use. It has a responsive 12 column grid, ready to use built-in forms and buttons.

Download View on GitHub Report a bug

Grid

twelve

one

eleven

two

ten

three

nine

four

eight

five

seven

six

six

seven

five

eight

four

nine

three

ten

two

eleven

one

twelve


Button expanded

Expanded Expanded

Typography

Headers

h1. All their equipment and instruments are alive.

h2. A red flair silhouetted the jagged edge of a wing.

h3. I watched the storm, so beautiful yet terrific.

h4. Almost before we knew it, we had left the ground.

h5. A shining crescent far beneath the flying vessel.
h6. She stared through the window at the stars.

Paragraph

Vivamus facilisis justo sit amet ligula ornare, nec tempus ante tincidunt. Pellentesque id quam eleifend, molestie velit in, porta tellus. Ut erat tellus, efficitur eget sem nec, sagittis semper felis. Nullam suscipit suscipit justo eget pretium. In mi erat, dictum non suscipit et, malesuada quis lorem. Aliquam molestie ac arcu porttitor sollicitudin. Phasellus dignissim ut velit non mattis. Sed posuere ligula ut augue mollis, ut sodales est aliquam. Fusce nec augue et velit dapibus tincidunt nec ac quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed feugiat nibh in purus aliquam, in fringilla justo venenatis. Nulla velit erat, imperdiet sed risus in, mattis aliquam mi. Etiam sed nunc ornare, congue libero ut, pellentesque libero.

Blockquote

Aliquam erat volutpat. Duis euismod aliquam mi at faucibus. Donec interdum pulvinar eros. Morbi vitae maximus urna, vel faucibus leo. Vivamus vitae leo porttitor, tincidunt lectus ac, tempor lectus. Ut.


Forms


Lists

  1. Pumpkin Spice Latte
  2. Green Tea Latte
  3. Youthberry Tea
  4. Citrus Mint Green Tea Latte
  5. Pumpkin Spice Frappuccino
  6. Jasmine Pearls
  7. Berry Smoothie
  • Pumpkin Spice Latte
  • Green Tea Latte
  • Youthberry Tea
  • Citrus Mint Green Tea Latte
  • Pumpkin Spice Frappuccino
  • Jasmine Pearls
  • Berry Smoothie
  1. Pumpkin Spice Latte
  2. Green Tea Latte
  3. Youthberry Tea
  4. Citrus Mint Green Tea Latte
  5. Pumpkin Spice Frappuccino
  6. Jasmine Pearls
  7. Berry Smoothie
  • Pumpkin Spice Latte
  • Green Tea Latte
  • Youthberry Tea
  • Citrus Mint Green Tea Latte
  • Pumpkin Spice Frappuccino
  • Jasmine Pearls
  • Berry Smoothie
  1. Pumpkin Spice Latte
  2. Green Tea Latte
  3. Youthberry Tea
  4. Citrus Mint Green Tea Latte
  5. Pumpkin Spice Frappuccino
  6. Jasmine Pearls
  7. Berry Smoothie
  • Pumpkin Spice Latte
  • Green Tea Latte
  • Youthberry Tea
  • Citrus Mint Green Tea Latte
  • Pumpkin Spice Frappuccino
  • Jasmine Pearls
  • Berry Smoothie

Code

Inline code

Here is a simple example of inline code - var myLatlng = {lat: -25.363, lng: 131.044};.

Code block


{
    "id": 1,
    "name": "A green door",
    "price": 12.50,
    "tags": ["home", "green"]
}
        

Keyboard input

In order to undo the last operation Ctrl + Z. In case you want to redo the last operation Ctrl + Y.


Labels

  • Default
  • Primary
  • Success
  • Warning
  • Danger

Panels

Default panel

Panel Default

Aliquam erat volutpat. Duis euismod aliquam mi at faucibus. Donec interdum pulvinar eros. Morbi vitae maximus urna, vel faucibus leo. Vivamus vitae leo porttitor, tincidunt lectus ac, tempor lectus. Ut.

Rounded warning panel

Panel Warning

Aliquam erat volutpat. Duis euismod aliquam mi at faucibus. Donec interdum pulvinar eros. Morbi vitae maximus urna, vel faucibus leo. Vivamus vitae leo porttitor, tincidunt lectus ac, tempor lectus. Ut.