Cake CSS

Minimalist.
Responsive.
Tiny CSS library.

Written by Juanjo Salvador

Get Cake CSS!

Using Yarn

$ yarn add cake-css

Using NPM

$ npm install cake-css

And import the minified CSS into your site.

<link rel="stylesheet" type="text/css" href="path/to/cake/cake.min.css">

Headers

Header 1

Header 2

Header 3

Header 4

Header 5
Header 6

Grid system

col-1
col-11
col-2
col-10
col-3
col-9
col-4
col-8
col-5
col-7
col-6
col-6
col-12

Navigation bar






Forms

Tables

ID Name Date
1 Juanjo Salvador 31/08/2017
2 Paco Martinez 13/06/2013
3 Alvaro Bueno 05/02/2002

Boxes example

Box default

Placeat modi est qui nostrum dolor autem quas et. Magni nihil ut dolores consequuntur et quasi quisquam. Voluptatibus voluptas neque tempore ea dolorum natus quam et. Ea labore eum qui. Id cumque aut nihil quos neque.

Alias dicta sit est et. Est voluptatem ducimus aliquid esse et sapiente. Quod molestiae totam aut reprehenderit. Magni id est voluptatem iste ut eligendi.

Delectus tempora quis qui ipsum fugit odio. Dolorum corporis voluptatem voluptas commodi quia quidem. Eum ut in eius in.

Box dark

Placeat modi est qui nostrum dolor autem quas et. Magni nihil ut dolores consequuntur et quasi quisquam. Voluptatibus voluptas neque tempore ea dolorum natus quam et. Ea labore eum qui. Id cumque aut nihil quos neque.

Alias dicta sit est et. Est voluptatem ducimus aliquid esse et sapiente. Quod molestiae totam aut reprehenderit. Magni id est voluptatem iste ut eligendi.

Delectus tempora quis qui ipsum fugit odio. Dolorum corporis voluptatem voluptas commodi quia quidem. Eum ut in eius in.

Box primary

Placeat modi est qui nostrum dolor autem quas et. Magni nihil ut dolores consequuntur et quasi quisquam. Voluptatibus voluptas neque tempore ea dolorum natus quam et. Ea labore eum qui. Id cumque aut nihil quos neque.

Alias dicta sit est et. Est voluptatem ducimus aliquid esse et sapiente. Quod molestiae totam aut reprehenderit. Magni id est voluptatem iste ut eligendi.

Delectus tempora quis qui ipsum fugit odio. Dolorum corporis voluptatem voluptas commodi quia quidem. Eum ut in eius in.

Box danger

Placeat modi est qui nostrum dolor autem quas et. Magni nihil ut dolores consequuntur et quasi quisquam. Voluptatibus voluptas neque tempore ea dolorum natus quam et. Ea labore eum qui. Id cumque aut nihil quos neque.

Alias dicta sit est et. Est voluptatem ducimus aliquid esse et sapiente. Quod molestiae totam aut reprehenderit. Magni id est voluptatem iste ut eligendi.

Delectus tempora quis qui ipsum fugit odio. Dolorum corporis voluptatem voluptas commodi quia quidem. Eum ut in eius in.

Box warning

Placeat modi est qui nostrum dolor autem quas et. Magni nihil ut dolores consequuntur et quasi quisquam. Voluptatibus voluptas neque tempore ea dolorum natus quam et. Ea labore eum qui. Id cumque aut nihil quos neque.

Alias dicta sit est et. Est voluptatem ducimus aliquid esse et sapiente. Quod molestiae totam aut reprehenderit. Magni id est voluptatem iste ut eligendi.

Delectus tempora quis qui ipsum fugit odio. Dolorum corporis voluptatem voluptas commodi quia quidem. Eum ut in eius in.

Box success

Placeat modi est qui nostrum dolor autem quas et. Magni nihil ut dolores consequuntur et quasi quisquam. Voluptatibus voluptas neque tempore ea dolorum natus quam et. Ea labore eum qui. Id cumque aut nihil quos neque.

Alias dicta sit est et. Est voluptatem ducimus aliquid esse et sapiente. Quod molestiae totam aut reprehenderit. Magni id est voluptatem iste ut eligendi.

Delectus tempora quis qui ipsum fugit odio. Dolorum corporis voluptatem voluptas commodi quia quidem. Eum ut in eius in.

Buttons

Small buttons

Normal buttons

Large buttons

Messages

Title of the message!

This is a testing message. Default color.

Title of the message!

This is a testing message. Primary color.

Title of the message!

This is a testing message. Danger color.

Title of the message!

This is a testing message. Warning color.

Title of the message!

This is a testing message. Success color.