What and why?
Cupcake.css is a classless CSS framework (~6 KB) to sweeten up your html pages and gives you the possibility to create stylish websites by writing HTML code only. The magic comes from a single CSS file which apply styles to all common (and some rare) web elements: sorted, categorizes and themeable! Therefore you can focus on writing your content and worry less about frameworks, libraries and design systems. The idea behind cupcake.css is to support humans that like to work in an dependency free enviroment, for example with basic HTML and CSS.
Cupcake.css can be used for everything, but it is especially useful for -
- Fast and minimal websites
- Super simple blogs
- Minimal approach startup website
- An maintable portfolio
Further information
- You are looking on a website build with cupcake.css
- Get started and include cupcake.css directly in your website
- Explore all styled elements and spicy components
- Customize your look with our flavors (themes) or make your own!
- It's free, fully open source on Github and licensed under MIT License
Get started
Simply include the cupcake.css package into your website and you are ready to go.
<!-- Include cupcake.css in your <head> -->
<link rel="stylesheet" href="https://unpkg.com/cupcake.css">
<!-- Optional: Add a flavor for different themes -->
<link rel="stylesheet" href="https://unpkg.com/cupcake/flavor/mint.css">
Structure and usage
You can use any HTML page structure you would like but cupcake css works the best if you will keep a few simple points into mind. After the opening <body> tag you have a couple of choices. The first header element will stretch over the entire website and is the place to put your website title and your website navigation elements. After that you can create a cool hero component by using a <section> block directly after the header. Follwing this it's best to put your website content into the <main> element, because this will give you some options if the content should be wrapped or stretch over the whole screen like the header.
<html>
<head>
<link rel="stylesheet" href="cupcake.css">
</head>
<body>
<header>
cupcake.css website
</header>
<section>
Hero component
</section>
<main>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque soluta ducimus, facere saepe fuga architecto ipsum asperiores voluptates illo atque! Cumque rem vero fugit repellendus incidunt sed praesentium quidem deleniti similique minima!
</main>
</body>
</html>