CasCare

Build 🔨 and ship 🚀 your app ⚡ faster🔥.

CSS framework and component library for programmers and rapid prototypers


CasCare

CasCare is a light-weight and responsive open source CSS library.

There are 2 ways to get started with CasCare library in your projects. You can either install manually, or from CDN.

Install manually

Include cascare.css in your website or Web app.

Download the compiled and minified CasCare.min.css file

Install via CDN

Use the following CDN link to include cascare in your project.

Alert

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

Success!Your registration is now complete!
An error occurred while attempting to register your account...
Here's some information you may find useful!
Warning! We're currently carrying out maintenance, some features may not work correctly.
Show sample code

Avatar

Avatars are user profile pictures.

Avatar XL
Avatar LG
Avatar
Avatar SM

Add the avatar class to <img> element. There are 4 additional sizes available, including avatar-xl, avatar-lg, avatar-sm, and avatar-xs.

For users who don't have profile pictures, you may use their initials for avatars. Add the avatar class and avatar size class to <div> element. The data-initial attribute is the name appear inside the avatar.

Show sample code
AvatarAvatar
AvatarAvatar
AvatarAvatar
AvatarAvatar

Avatars support icons and status indicators. You can add an <i> element with the .avatar-status class, and add .online, .busy or.idle class for different status colors. The default is gray which means offline.

Show sample code

Badges

Badges are often used as unread number notification.

Notifications Notifications Notifications Notifications
Avatar XL
Avatar LG
Avatar
Avatar SM

Badges support avatars elements as well.

Add class .badgeand attributedata-badge = "" to add badges to any element.

Show sample code

Buttons

The Button, an essential part of any user experience. Buttons come in three basic styles in CasCare: The button element has flat color by default, whereas .button-outline has a simple outline around,and .button-pill is pill shaped button, and .button-clear is entirely clear, to disable any button simply add disabled tag after the class name as shown in the snipet bellow

Show sample code

Card

Cards are flexible content containers. Add a container element with the card class. And add child elements with the card-image, card-header, card-body and/or card-footer classes. The card-image can be placed in any position.

Apple
Hardware and software
To make a contribution to the world by making tools for the mind that advance humankind.
macOS Sierra
Apple
Hardware and software
macOS Sierra
To make a contribution to the world by making tools for the mind that advance humankind.
Show sample code

Image

Images can be made responsive using the .img-responsive class,

Mountain Image

and rounded using the .img-rounded class .img-thumbnail for thumbnails.

Mountain Image Mountain Image
Show sample code

Lists

The List is a very versatile and common way to display items.

  • Unordered list item 1
  • Unordered list item 2
  1. Ordered list item 1
  2. Ordered list item 2
Description list item 1
Description list item 1.1
Show sample code

Popover

Popovers are small overlay content containers.

Apple
Software and hardware
To make a contribution to the world by making tools for the mind that advance humankind.

Wrap an element by a container with the .popover class. And add a container with the .popover-container inside to the element. You can also use .card Card component inside the popover-container.

Apple
Software and hardware
To make a contribution to the world by making tools for the mind that advance humankind.

You can add the .popover-right, .popover-bottom or .popover-left class to define the position. By default, the popovers appear above the element.

Show sample code

Toast

Toasts provide brief messages about app processes. The component is also known as a Snackbar.

Success!Your registration is now complete!
An error occurred while attempting to register your account please try agin later.
Here's some information you may find useful!
Warning! We're currently carrying out maintenance, some features may not work correctly.
Success!Your registration is now complete!
Show sample code

Topography

Typography sets default styles for headings, paragraphs, semantic text, blockquote and lists elements

Headings

Heading h1 4.6rem (46px)

Heading h2 3.6rem (36px)

Heading h3 2.8rem (28px)

Heading h4 2.2rem (22px)

Heading h5 1.8rem (18px)
Heading h6 1.6rem (16px)

Blockquotes

The Blockquote represents a section that is quoted from another source.

Very fancy quote

- Me
Show sample code