mint-css

Star Download Fork
Change how your entire website looks by changing one stylesheet.
Redesigning, prototyping, and theming made super simple.

Your device width is: px

Whenever you click on one of the buttons below, a new stylesheet is loaded.
No HTML is changed in the process. No new classes are added or removed.
Give it a try!

Switch themes

Themes determine the colors used on your page

Switch flavors

Flavors determine how your UI is styled

Theme colors

The sections below contain some of the elements styled by the current theme-flavor combination.

You can copy the relevant stylesheet from the build/flavor-name folder, refer to it in your own html file and start hacking away! Refer back to this file for documentation where needed.

Modals

Undocumented feature

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi, ex unde! Nesciunt numquam nulla exercitationem deleniti placeat impedit dolorem aperiam, nihil eaque iste earum laudantium ab vitae quaerat delectus nemo. Ipsam natus laboriosam eaque fuga placeat, dolorem provident architecto molestias ad, modi velit vero voluptate quae repudiandae voluptatem sapiente aspernatur excepturi officia.

Link

This is a link

List

  • Unordered list item 1
  • Unordered list item 2
  • Unordered list item 3
  • Unordered list item 4
  1. Ordered list item 1
  2. Ordered list item 2
  3. Ordered list item 3
  4. Ordered list item 4
    1. Nested list depth one
      • Nested list depth two

Buttons

Code block

while(true){
        console.log("Print forever")
}

Tables

Wrap the table class with a <div class="responsive"> to make the table scrollable horizontally on small screens.

Hello Hello
One One
Two Two
Three Three
Four Four
Five Five
Six Six
Hello Hello
One One
Two Two
Three Three
Four Four
Five Five
Six Six
Hello Hello
One One
Two Two
Three Three
Four Four
Five Five
Six Six

Blockquote

I think, fundamentally, open source does tend to be more stable software. It's the right way to do things.
- Linus Torvalds
This is a card
This is a card
This is a card
This is a hoverable box
This is a hoverable box
This is a hoverable box

Form elements

Prefix and suffix

Based on the code by https://codepen.io/chamsi/pen/LavooJ

Dr.
kg
$ .00

Textarea

Dropdown

Date

Utility classes

Responsive helpers

Responsive breakpoints are defined as follows:

  1. Phone: Below 600px
  2. Tablet portrait: Above 600px
  3. Tablet landscape: Above 900px
  4. Desktop: Above 1200px
  5. Large desktop: Above 1800px

If you are wondering why these breakpoints are chosen instead of the "standard" 768px, 1024px points, this is the article these breakpoints are based on: The 100% correct way to do css breakpoints

Using these breakpoints, a total of 8 helper classes are created:

Class Meaning
.only-phone Visible at or below 599px
.below-tablet-landscape Visible at or below 899px
.below-desktop Visible at or below 1199px
.below-large-desktop Visible at or below 1799px
.above-tablet-portrait Visible at or above 600px
.above-tablet-landscape Visible at or above 900px
.above-desktop Visible at or above 1200px
.above-desktop-large Visible at or above 1800px

Resize your screen to see these breakpoints in action:

I am visible only on the phone

I am visible only below 899px

I am visible only below 1199px

I am visible only below 1799px

I am visible above 600px

I am visible above 900px

I am visible above 1200px

I am visibile above 1800px

Grids?

I have decided to remove any grids from the flavors. There are three reasons for doing so:

  1. CSS Grids can be used instead of any external grid system
  2. Standardizing grid classes will be a huge pain, both for developers and users
  3. Grids are a part of how your layout is arranged, while this repo focuses more on individual components and how they are styled