Dress up your semantic HTML with blouse.css

This responsive tiny framework allows you to focus on the content. Don't waste time with design until your app is working. Less than 1.1Kb compressed* and 4.4Kb for the icons.

Documentation Download

Features

* When minified and compressed with the widely supported brotli algorithm.
** The demo menu uses JS to close it when a link is clicked. It is only necessary on anchors, not when they're linked to other pages.

Quick start

Copy paste this lines in your <head> tag

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/balloon.css">

Then the body needs a <main> element. <nav> and <footer> are optionals.

Download the starter template (right click on the link, Save link as).

Themes

Click on the theme name to change it

Default Warm Cool Sea Balloon Solid Party Idea 

https://cdn.jsdelivr.net/npm/[email protected]/dist/balloon.css

Content

Text

This text is bold.

This is an emphasized text.

The next text is hidden:

This text is aligned in the center.

This text is muted.

This text is big.

This is a blockquote

This text has a space on top.

This text has more space on top.

Links

This text has a link here.

This is a Button link. Turn that link into a Main action or an Alternative action

Title links looks like this

Lists

  1. First
  2. Second
  3. Third

Table

Team Win games Lost games
Blue Barracudas 8 2
Green Monkeys 7 3
Silver Snakes 6 4
Red Jaguars 5 5
Orange Iguanas 3 7
Purple Parrots 1 9

Forms

Choose your file to upload

Choose your drink:

Messages

Ok message

Error message

Info message

Warning message

Show alert message

Icons

Use emojis for most of the icons you need, like 🖨️, ⚙️ or 📞 But for social networks we needs icons, here you have the most used: