Violet

Violet is a minimalist CSS framework for the modern web. Violet is written in SASS.

Examples

Customization

Padding

  • $padding
  • $padding-half
  • $padding-quarter

Colors

  • $alert-background-color
  • $alert-text-color
  • $page-background-color
  • $table-border-color
  • $body-background-color

Fonts

  • $title-font-family
  • $form-label-font-family
  • $body-font-family
  • $monospace-font-family

Mobile-First

Violet supports mobile-first responsive design via its breakpoint mixin. A number of breakpoints are available, including:

  • mobile-only
  • above-mobile
  • below-ipad
  • ipad
  • below-desktop
  • desktop
  • desktop-wide
  • desktop-very-wide
.foo
  @include responsive-padding($padding-quarter)

  @include breakpoint(ipad)
    @include responsive-padding($padding-half)

  @include breakpoint(desktop)
    @include responsive-padding($padding)

Flexbox Grid

NOTE: Columns are automatically flattened on mobile.

Example 1

.row
  .col-1
  .col-1

Example 2

.row
  .col-1
  .col-1
  .col-1

Example 3

.row
  .col-2
  .col-1
  .col-1

Example 4

.row
  .col-4
  .col-2
  .col-3
  .col-1

Depth

Inset

I call our world Flatland, not because we call it so, but to make its nature clearer to you, my happy readers, who are privileged to live in Space.
.inset

Outset

Place a penny on the middle of one of your tables in Space; and leaning over it, look down upon it. It will appear a circle.
.outset

Forms

Typography

Heading Level 1

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, Donec non enim in turpis pulvinar facilisis. Ut felis.

Header Level 2

  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  2. Aliquam tincidunt mauris eu risus.

Header Level 3

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.

Header Level 4

Name Diameter Surface Temperature Inclination of Axis
Mercury 4,878 Km -180 — 430 °C 0.0°
Venus 12,104 Km 465 °C 177.4°

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Donec non enim in turpis pulvinar facilisis. Ut felis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.

#header h1 a {
  display: block;
  width: 300px;
  height: 80px;
}

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.

Alerts

× Hello World
.alert
  %a.close ×

Source

Violet is on GitHub.