BUTCH

Brutalist Utility & Typography Class Helpers

General-use classes for typography style, layouts, and page elements.

Typography

Font Family Classes

.arial-text

.arial-black-text

.comic-sans-text

.tahoma-text

.helvetica-text

.impact-text

.verdana-text

.courier-new-text

.lucida-text

.georgia-text

.times-text

.palatino-text

Font Weight

.thin

.normal

.bold

.heavy

Font Sizing

Normal size text

.smaller

.bigger

.huge

.flow-text

Flow-text makes your text responsive!

This is a paragraph without flow-text applied.

Text Alignment

.text-center

.text-left

.text-right

.justify

rtl - right-to-left text.

Text Formatting

.spread - Adds 3px between characters
.oblique - Slants text
.allcaps - Capitalizes all characters
.alllower - ALL LOWERCASE
.capitals - All words uppercased
.smallcaps - Small-caps font is displayed

.dbl-spaced - Doubles the spacing of line heights within paragraphs.

.tpl-spaced - Triples the spacing of line heights within paragraphs.

.tal-left - Left-aligns last line of text
.tal-right - Right-aligns last line of text
.tal-center - Ceners last line of text
.tal-justify - Justifies last line of text
.indent - Indents text by 1cm

.nowrap - Text will never wrap to next line.

.wordspace-small - Small increase in word spacing.

.wordspace-medium - Medium increase in word spacing.

.wordspace-large - Large increase in word spacing.

.wordbreak-keep - Breaks are prohibited between pairs of letters.

.wordbreak-all - Lines may break between any two letters.

.wordwrap-break - Allows unbreakable words to be broken.

.guard-text - Prevents text from being selectable.

Address

Address Line 1
Address Line 2
Address Line 3

 

Blockquote

New brutalism, inevitably, in global dissemination, degenerated into a rough concrete style.

Unordered Lists

ul.disc

  • Item 1
  • Item 2
  • Item 3

ul.circle

  • Item 1
  • Item 2
  • Item 3

ul.square

  • Item 1
  • Item 2
  • Item 3

Ordered Lists

Default

  1. Item 1
  2. Item 2
  3. Item 3

ol.roman

  1. Item 1
  2. Item 2
  3. Item 3

ol.alpha

  1. Item 1
  2. Item 2
  3. Item 3

ol.none

  1. Item 1
  2. Item 2
  3. Item 3

Text Layout

Apply these classes to paragraphs or divs to create a layout.

.double-col - 2 column layout

Lorem ipsum no facer prompta vim, movet ubique qui ei. Per no regione aliquid, ea mei nulla scribentur liberavisse. Vim cu tale ludus possit, discere suavitate nam ad. No verterem reprimique vix, phaedrum hendrerit an quo. Qui feugait apeirian ut, ne virtute numquam mandamus mea. Eos et enim dicant deterruisset. At nec ceteros mentitum, ex solum putent offendit per.

 

.triple-col - 3 column layout

Lorem ipsum no facer prompta vim, movet ubique qui ei. Per no regione aliquid, ea mei nulla scribentur liberavisse. Vim cu tale ludus possit, discere suavitate nam ad. No verterem reprimique vix, phaedrum hendrerit an quo. Qui feugait apeirian ut, ne virtute numquam mandamus mea. Eos et enim dicant deterruisset. At nec ceteros mentitum, ex solum putent offendit per.

 

.quad-col - 4 column layout

Lorem ipsum no facer prompta vim, movet ubique qui ei. Per no regione aliquid, ea mei nulla scribentur liberavisse. Vim cu tale ludus possit, discere suavitate nam ad. No verterem reprimique vix, phaedrum hendrerit an quo. Qui feugait apeirian ut, ne virtute numquam mandamus mea. Eos et enim dicant deterruisset. At nec ceteros mentitum, ex solum putent offendit per.

.quint-col - 5 column layout
.six-col - 6 column layout
.sept-col - 7 column layout
.oct-col - 8 column layout

Column Padding - Add 10, 20, 30, 40, or 50px of padding between columns

.pad10
.pad20
.pad30
.pad40
.pad50

EXAMPLE: White justified arial text within a 3-column layout with 30px padding between columns, with double spacing and an indent.

<p class="white-text justify arial-text triple-col pad30 dbl-spaced indent">...</p>


Brutalist Utility Classes

These classes are used for brutalizing your content. Apply them to any element.

Scale Classes

.enlarge / .enlarged - Enlarges container size by 50%
.double-size - Doubles size of container
.triple-size - Triples size of container
.shrink / .shrunk - Reduces container size by 25%
.half-size - Reduces container to half it's original size
.quarter-size - Reduces container to 25% of original size

Skew Classes

.skew / .skew-left - Skews container to left
.skew-right - Skews container to right
.perspective / .perspective-left - Angles container to the left
.perspective-right - Angles container to the right

Transformation Classes

.flip - Flips container horizontally
.flip-up - Flips container vertically

Rotation Classes

.rotate-right - Rotates element 25 degrees to the right
.rotate-left - Rotates element 25 degrees to the left
.rotate-right-45 - Rotates element 45 degrees to the right
.rotate-left-45 - Rotates element 45 degrees to the left
.rotate-right-90 - Rotates element 90 degrees to the right
.rotate-left-90 - Rotates element 90 degrees to the left

Spacing Classes

.padding - Adds padding to container
.no-padding - No padding on container
.comfortable - Increases padding within container
.uncomfortable - Negative padding within container
.solitary - Increases margin spacing
.sociable - Negative margin spacing


Filters

Use these classes to apply filters to any element.

NOTE: Filters do NOT work on IE 11! FUCK Internet Explorer anyway.

Original Image

.invert

.sepia

.grayscale

.darken

.lighten

.blur

.hue

Hover Filter

Apply a filter upon hover simply by adding -hover after the class.
Examples: .blur-hover, .grayscale-hover

.darken .lighten-hover

.hue-hover

.grayscale .blur-hover

.invert-hover


Opacities

Make elements have opacity, or force a transparent background (ideal for PNG images).

.transparent

Applies a transparent background.
Brutal Building

.semi-transparent

Makes element 50% opaque.
Brutal Building

.high-opacity

Makes element 75% opaque.
Brutal Building

.low-opacity

Makes element 25% opaque.
Brutal Building


Borders & Separators

Use these classes for borders and horizontal rule separators.

Basic Borders

Basic borders can have flavors applied! Check out Flavors to see how to change the border color.

.border-solid-thin

.border-solid-thick

.border-solid-fat

.border-dotted-thin

.border-dotted-thick

.border-dotted-fat

.border-dashed-thin

.border-dashed-thick

.border-dashed-fat

Horizontal Rules

hr.jagged-rule-dark


hr.jagged-rule-light


hr.cut-light


hr.cut-dark


hr.thick.tomato


hr.thick.lime


Special Borders

.brutal-border-dark

.brutal-border-light

.bevel

.emboss

.jagged

Creates a grey triangular border above and below an element.

.jagged2

Jagged alternative


Box Shadows

Apply these classes to add a box shadow. By default, box shadow colors are black, so to change the box shadow color, you will need to edit the colors in the core butch.css file.

.box-shadow

.box-shadow-thick

.box-shadow-fat

.box-shadow-double

.box-shadow-triple

.box-shadow-quad

.box-shadow-bottom

.box-shadow-right


Tables

Tables can be made responsive simply by applying the class .responsive directly to the table tag. On devices under 600px wide, each table row is displayed as a record. Re-size your browser window to see it in action.

Table.responsive
Client Due Date Amount Status
Ma Pa Shop 08/20/2017 $1,165 Paid
Creative Studio 02/01/2015 $2,167 Collections
Food Bistro 04/30/2020 $978 Good Standing
Repair Shop 02/15/2019 $15,500 Unpaid


Media

Responsive Images

To make an image fluid width so that it fits within any area, simply apply the class: .responsive

Responsive Videos

Use the video tag, and the video will be fluid-width. If embedding a YouTube, Vimeo, or any other third-party video that uses an iframe, simply wrap the iframe embed code within a div with class .video.

Download

Version 1.7