😎 cool.css

Kitchen Sink

This page will help me style all the default elements in cool.css. Eventually I'll add other components like tabs and modals.

Heading 1

Heading 2

Heading 3

Heading 4

Text Large Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat quasi nihil non voluptatum illum nemo porro facilis. Beatae fugiat ex ea consequatur debitis, obcaecati alias eius sit atque laboriosam iusto.

Text Medium Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia quia optio perspiciatis, voluptates reprehenderit consequatur, quas error dolores aut ex nulla! Commodi omnis asperiores temporibus nesciunt, sit blanditiis ducimus cumque?

Text Small Lorem ipsum dolor, sit amet consectetur adipisicing elit. Porro architecto possimus hic similique autem facilis a veritatis mollitia tempora voluptatum! Unde quaerat nisi tempore deserunt natus eveniet, quae rem cupiditate!

Text Subdued

Text Error

Text Interactive

  1. Link One
  2. Link Two
  3. Link Three
Definition Term
Definition Description
Definition Term
Definition Description
Definition Term
Definition Description

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum dolorem excepturi id vel architecto a libero obcaecati, omnis ea qui, quidem deserunt cum at doloribus enim tempore unde accusamus perspiciatis!

Eveniet quo nam harum, consectetur voluptatibus eos, vel ullam delectus laboriosam error, asperiores exercitationem recusandae a. Placeat odio laboriosam ad debitis dicta aut molestiae maxime distinctio eos aspernatur? Perferendis, delectus?

Illum, quas esse suscipit facere fugiat alias voluptatum natus itaque quod, minima obcaecati! Ea eum qui laboriosam expedita? Non est ullam inventore quaerat facilis! Quo sapiente amet voluptatibus et laboriosam.

Strong Text

Emphasized Text

Code

// <pre>

.#{$prefix}-styles,
.#{$prefix}-styles *,
.#{$prefix}-styles *::before,
.#{$prefix}-styles *::after {
  box-sizing: border-box;
  background-origin: border-box;
  background-repeat: no-repeat;
  margin: unset;
  padding: unset;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

Blockquote: Lorem ipsum dolor, sit amet consectetur adipisicing elit. Pariatur ea aperiam culpa delectus, fugiat vero non! Ipsa odit velit neque, nam nobis ipsam rerum dicta, dignissimos magni rem at. Id.

cite — Some guy
Address
Elwood Blues
1060 W. Addison St.
Chicago, IL 60613
Details/Summary

Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo neque repellat atque quo consequuntur aspernatur commodi assumenda sed? Possimus numquam iste temporibus officiis cum facere quo quibusdam modi neque molestias.

Dicta tempora delectus quos natus, illum vel incidunt pariatur inventore necessitatibus deleniti reprehenderit fugiat! Pariatur iure sunt, saepe obcaecati recusandae possimus eos totam amet dignissimos quis necessitatibus ullam corporis culpa.

Table Caption
Name Email Notes
Adam adam@coolcss.dev Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Beth beth@coolcss.dev Cumque, recusandae magni tempore tenetur eum eos cupiditate beatae assumenda voluptates ea, sunt aut cum delectus suscipit.
Chuck chuck@coolcss.dev Totam tenetur mollitia repudiandae cumque?

Figure

Bill Murray
Courtesy of Fill Murray
Radio Buttons
Checkboxes