Lazy Kit is a complete design system built on Bootstrap 4. It is created for all web makers that want to get a project off the ground quickly and neatly. It overwrites all Bootstrap 4 components and adds 2 more plugins. It also comes with 3 example pages.

Primary
#611F6A
Secondary
#071D5C
Success
#007A5B
Info
#1264A4
Warning
#ECB22F
Danger
#E01E5B
Dark
#212529
Light
#EBEAEB

Buttons

The Bootstrap 4 buttons have been modified to fit the new colours and style. There is also a new button style for icons only.

Simple

Pill Shaped

With Icons

Sizes

Inputs

All form controls are improved for better contrast and visibility. Besides the Bootstrap 4 custom inputs, we have also added a special plugin for sliders.

Default

With Icons

With Validation

Success! You've done it.
Sorry, that username's taken. Try another?

Custom Select

File Input

Sliders

Checkboxes

Radio Buttons

Toggle Buttons

Typography

Lazy Kit has the primary font family Raleway, provided by Google Fonts. It is an open-source font that bring a new look to the default Bootstrap.

Headings

Heading 1

I Was Told There'd Be Cake

Heading 2

I Was Told There'd Be Cake

Heading 3

I Was Told There'd Be Cake

Heading 4

I Was Told There'd Be Cake

Heading 5

I Was Told There'd Be Cake

Heading 6

I Was Told There'd Be Cake

Paragraphs

Paragraph

You have brains in your head. You have feet in your shoes. You can steer yourself any direction you choose. You're on your own. And you know what you know. And YOU are the one who'll decide where to go. Link

Lead

You have brains in your head. You have feet in your shoes. You can steer yourself any direction you choose. You're on your own. And you know what you know. And YOU are the one who'll decide where to go.

Quote

You have brains in your head. You have feet in your shoes. You can steer yourself any direction you choose. You're on your own. And you know what you know. And YOU are the one who'll decide where to go.

Dr. Seuss in Oh, The Places You'll Go!

Text Muted

I've learned that people will forget what you said, people will forget what you did, but people will never forget how you made them feel.

Text Primary

I've learned that people will forget what you said, people will forget what you did, but people will never forget how you made them feel.

Text Secondary

I've learned that people will forget what you said, people will forget what you did, but people will never forget how you made them feel.

Text Info

I've learned that people will forget what you said, people will forget what you did, but people will never forget how you made them feel.

Text Success

I've learned that people will forget what you said, people will forget what you did, but people will never forget how you made them feel.

Text Warning

I've learned that people will forget what you said, people will forget what you did, but people will never forget how you made them feel.

Text Danger

I've learned that people will forget what you said, people will forget what you did, but people will never forget how you made them feel.

Images

Images are displayed as blocks by default and they will take the entire width of their parent. Using the border and shadow utilities, you can adjust the image's display.

Default

Rounded image

Round

Circle image

Raised

Raised image

Round & Raised

Raised circle image

The Bootstrap 4 comes packed with classes for menus and navbars. Using the knows markup you can easily create responsive navigation bars. Lazy Kit comes with a layer of styling, by adding new colours and Font Awesome Icons.

Type Column heading
Light Let it be.
Active Eat well, feel well.
Dark But first coffee.
Primary Think before you speak.
Secondary Carpe diem.
Success Success. Itโ€™s a Mind Game.
Danger One day at a time.
Warning Good vibes only.
Info All you need is sleep.

Tabs

When it comes down to it, thatโ€™s what life is all about: showing up for the people you love, again and again, until you canโ€™t show up anymore.

There is nothing more dreadful than the habit of doubt. Doubt separates people. It is a poison that disintegrates friendships and breaks up pleasant relations. It is a thorn that irritates and hurts; it is a sword that kills.

Pills

Believe in yourself. You are braver than you think, more talented than you know, and capable of more than you imagine.

I suspect the most we can hope for, and it's no small hope, is that we never give up, that we never stop giving ourselves permission to try to love and receive love.

Indicators

Indicators are useful elements that can help you keep your users informed. Breadcrumbs and pagination let you know about your current page. Badged and progress bars give extra information about the information you are currently viewing.

Breadcrumbs

Pagination

Badges

Primary Secondary Success Danger Warning Info Light Dark
Primary Secondary Success Danger Warning Info Light Dark

Progress Bars

Alerts

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

Cards

The original structure for the Bootstrap 4 cards remains intact. Lazy Kit brings more focus on them with the help of shadows and hover events.

dog
Pets

How to look after and care for a dog

Owning a dog is great fun and immensely rewarding. But, dogs have complex needs and each dog is unique.

dog
Vacation

Woof! How to find dog-friendly beaches in Spain

Considering Spain's abundant coastline, beaches that do allow you to take your pooch to feel sand...

dog
Hobby

Getting Started With Your Puppy

This new addition to your family will require lots of love, attention and plenty of supplies.

Tooltips and Popovers

Both tooltips and popovers offer an easy way to display more information on hover or click. You must enable them inside your Javascript in order to use them.

Tooltips

Popovers

Modals

Use the modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.

Examples

Besides all the redesigned elements, we have also created 3 example pages!
They will give you a better idea of what you can build with the kit :)

Read the Docs

Check out the documentation for every element in order to fully see its possibilities. You will find examples for every component and the variations that it comes with.

See Documentation

Try Lazy Kit for free

Do you like how this kit looks? See what you can built with it!
We would love to see your work.

Download