Raddish Kitchen Sink

The content from this page is not displayed. The following is a list of all the features available.

Buttons

There are a lot of options built into the buttons module. Instead of having to go in and change or add theme button classes, this module uses a bunch of options/defaults to make it easier to change up the default style.

The main mixin for the buttons uses these defaults, but you can create your own button styles by throwing in whatever values you want.


	@mixin btn (
		$bg-color: $btn_bg_color, 
		$btn-font: $btn_color, 
		$btn-border: $btn--use-border, 
		$btn-push: $btn--push, 
		$btn-trans: $btn--use-trans, 
		$btn-capitalize: $btn--text-capitalize, 
		$btn-shadow: $btn--text-shadow, 
		$btn-round: $brand-round
	)
				

	@mixin btn-size ($btn-size: 'default')
				

Button defaults

css/theme/theme_defaults

  • $btn--use-border : true ;
  • $btn--push : true;
  • $btn--use-trans : true;
  • $btn--text-capitalize : false;
  • $btn--text-shadow : false;
  • $btn-font-size : 1.1em;
  • $btn-padding-ends : 0.5em;
  • $btn-padding-sides : $half-spacing-unit--em;
  • $btn-line-height : 2em;
  • $use-btn-line-height : false;

css/theme/colors

  • //* buttons */
  • $btn_bg_color : $accent-color;
  • $btn_color : $accent-color--font;
  • $btn_border_color : darken($accent_color, 6%);
  • $btn2_bg_color : $accent-color2;
  • $btn2_color : $accent-color2--font;
  • $btn2_border_color : darken($accent_color2, 6%);

Button Effects

Default (as above)

default

No Border

No Border

No Push

Push

No Transitions

No Trans

Button Sizes

Regular

.btn

Small

.btn.btn--small

Large

.btn.btn--large

Huge

.btn.btn--huge

Full Width

.btn.btn--full

Natural

This is a sentence with .btn .btn--natural.

Button Font Sizes

Kilo

.btn.btn--kilo

Mega

.btn.btn--mega

Giga

.btn.btn--giga

Button Styles

Soft or Pill

.btn.btn--soft

Hard

.btn.btn--hard

Circle

.btn--circle

Button Colors

Button / Accent Color

.btn

Button / Accent Color 2

.btn2

Alert

.btn.btn--alert

Error

.btn.btn--error

Info

.btn.btn--info

Info Dark

.btn.btn--info_dark

Inverse

.btn.btn--inverse

Success

.btn.btn--success

Warning

.btn.btn--warning

White

.btn.btn--white

Mix and Match

Can be used with Font Awesome.

span.btn.btn--circle.btn--error>i.icon-flag.icon-2x

a.btn.btn--white.btn--natural>i.icon-cog

Click on Settings

a.btn.btn--success>i.icon-shopping-cart.icon-large

Checkout

a.btn.btn--info.btn--soft.gradient--info>i.icon-umbrella.icon-2x.pull-right.push_half--right

Don't
get left out to dry!
Enroll Today

Columns

Columns show up single column on mobile devices. Columns 2 & 3 are set to "turn on" at the $lap-start breakpoint. Columns 4 & 5 are set to "turn on" at the $desk-start breakpoint.

.text_cols--2

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, laudantium, cumque consequuntur aliquid labore ullam provident animi dolorum voluptates dignissimos nemo porro aliquam perferendis quas iste iusto fuga reiciendis officia?Doloribus, quos, quam, perspiciatis, laborum officiis tempora autem velit temporibus ut pariatur obcaecati possimus consectetur aliquid. Repudiandae, molestias, at odit dolor reiciendis illum cupiditate ratione quod ipsam quasi non esse!

.text_cols--3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit doloribus nam optio architecto hic cupiditate soluta quia natus perferendis! Maxime, at eveniet odit reiciendis ex pariatur velit aliquid nihil veritatis? Corrupti, praesentium, esse, laborum commodi rerum atque qui aut ratione in dicta sint magnam modi quo expedita quis libero velit sunt voluptatum dolor repellat! Suscipit fugit nobis sequi totam quibusdam. Nisi, nulla, distinctio non quas doloremque corrupti harum iure blanditiis exercitationem magnam incidunt a explicabo magni quae aperiam officia sit beatae facilis autem maxime dicta iste possimus fugit laboriosam commodi!

.text_cols--4

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, rerum, repudiandae molestiae sed officia vel est vitae magni voluptas aperiam alias ducimus enim ut soluta vero. Ut quae quaerat dicta! Deserunt, consectetur, odio, dolorum dolore impedit excepturi veritatis voluptate accusantium eum dignissimos commodi tenetur inventore dolorem accusamus nemo magnam illo ex sunt iste quidem error soluta voluptas natus. Tempora, consectetur! Aut molestiae at fuga quidem tempore nemo maiores mollitia perspiciatis quam. Fugit, atque, ipsam, doloribus, beatae perspiciatis facere est maxime accusantium molestias facilis mollitia dolores quod temporibus nesciunt consequuntur architecto. Soluta, beatae adipisci qui tempora quia sed maiores aperiam perspiciatis excepturi voluptatem exercitationem dolorum doloremque ipsum quo a cupiditate eum aliquam eligendi at ipsa culpa autem praesentium! Saepe, consequuntur, necessitatibus?

.text_cols--5

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, aut, magni explicabo atque placeat similique tenetur porro recusandae eos error nesciunt dicta dolores iste labore maiores aliquam optio dolorem numquam. Suscipit, facere, dolorem, nobis, tenetur ex eaque ratione placeat ipsa obcaecati voluptas assumenda impedit perspiciatis aut repudiandae sapiente cupiditate hic totam consectetur dignissimos reiciendis corporis harum quibusdam accusamus nulla asperiores. Perspiciatis, enim, eveniet veritatis quia quae libero numquam in quis at ut itaque qui unde deleniti debitis explicabo dignissimos porro autem quaerat omnis dicta nihil necessitatibus ipsa soluta fugiat incidunt. Omnis, possimus, nulla, consequatur, nesciunt tempora sed voluptatum voluptas cupiditate consequuntur illo id delectus voluptate sapiente itaque nemo! Sit, inventore similique animi sunt possimus labore dolorum consectetur eius temporibus sequi. Beatae, quas deleniti reprehenderit architecto ratione cumque itaque illo repellendus voluptatum unde recusandae doloribus provident est ullam sunt. Architecto, eius ducimus officia expedita sunt inventore labore est alias dolorem illo?

Forms

Bear Bones

Images

.img--rounded

.img--circle

Note: image is in landscape format

.img--circle

Note: image is in square format

.img--polaroid

Figure and Figcaption
Lake Arrowhead, CA

Islands

.island, .well

This is some information that you want to call attention to. For this example, a border is applied using border--accent_color, but the default is no border. Of course, you can change that.

.islet, .alert

The islet/alert is half the size of the island. Good for small bits of information. The class accent_color was applied.

Lists

Bullet styles
  • .ul--none
  • .ul--disc
  • .ul--circle
  • .ul--square
  • .ul--numbered
  • ul--upper_roman
  • .ul--lower_roman
  • .ul--leading_zero
Custom and inline
  • You can use what ever "separator" you'd like
  • By adding a [data-breadcrumb] attribute to the list item
  • You could even do a list of people
  • or whatever else

 

.ul--two_cols
  • Two columns will display as one column when seen on mobile devices. Break point is lap-start. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis, ipsam, eveniet, magni doloremque dolor nesciunt enim facilis amet explicabo minus vel eligendi tenetur nemo asperiores veniam? Sit, dolore animi sequi.
  • Hic, ab, nesciunt non ipsam mollitia tenetur asperiores sunt repellendus error nam sit pariatur nulla earum eius totam nisi molestias animi distinctio minima laboriosam iste unde quaerat delectus eum quibusdam?
.ul--three_cols
  • Three columns will display as one column when seen on mobile devices. Break point is lap-start. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, cumque, molestiae eveniet alias illo architecto quidem asperiores assumenda totam tempora.
  • Et, veritatis, nisi, saepe in doloribus explicabo consectetur totam ratione ut consequatur quo deleniti dolores vero rem illum assumenda pariatur maxime nobis quia non voluptatibus quidem hic asperiores distinctio ex.
  • Optio, animi, provident veniam earum sunt dolore harum unde ducimus id maxime eius dolorem. Adipisci, tempora, culpa, consequuntur autem nemo repellendus perferendis qui distinctio voluptatibus id veniam assumenda maiores quis!
Definition List
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis, magni, sunt, ea minima in dignissimos beatae possimus consequuntur quae quis deserunt accusantium quisquam delectus doloremque repellendus obcaecati ullam. Nobis, minima.
.dl--horizontal
Horizontal definition list (this is used frequently on this page). Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque, facilis, dolorum quam vitae nisi iste minus ipsam assumenda omnis illo! Voluptatem, adipisci, incidunt dolorem facilis similique laudantium fuga corporis vero.
Block List

.ul--block_list is used in conjuction with these clasess: .border--block_list, .border--block_list--accent_color, .border--block_list--accent_color

ul.ul--block_list.border--block_list--accent_color

  • Item 1
  • Item 2

Marginalia

Hey look at me! I'm some marginalia and I'm to the right because my class name is marginalia__object--right.

Notes in the margin of a book have been used for centuries. Now you get to make notes on a web page. Hurrah for the 21st century and CSS3. Marginalia does not show up on the side until the width of the device is at the $desk-start breakpoint. For mobile and lap devices it shows up inline with the other text with .secondary style.

Hey look at me! I'm some marginalia and I'm to the left.

Its pretty simple to create some marginalia. The marginalia block (.marginalia > .marginalia__object) goes before the text that will be next to it. The marginalia__object class can be applied to many different kinds of content like images, videos and of course text. To set the width of the marginalia, just use one of the desk width classes such as desk-one-fifth.

Media

Media is usually used with an image and thus has the .media__img class. However, if the media is not an image but say for example, a video, the .media__object class can be used as well.

Default

.media>img.media__img+.media__body

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Reversed

.media>.media__object--rev+.media__body

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Quotes

q

Ever wondered how you're supposed to quote inside of a paragraph when there are a bunch of people talking? You're supposed to use the <q> element. Jimmy said Ain't nothing wrong with this. This is how you're "supposed" to do it.

Blockquote

blockquote>cite.source

When in the course of human events it becomes necessary for one people to dissolve the political bands that have connected them to another...

The Declaration of Independence
Blockquote - Accent Color

blockquote.blockquote--accent_color>b.source

Insanity: doing the same thing over and over again and expecting different results.

The world is a dangerous place to live; not because of the people who are evil, but because of the people who don't do anything about it.

Read more at Brainy Quote

Albert Einstein
Blockquote - Accent Color 2

blockquote.blockquote--accent_color2>cite

Insanity: doing the same thing over and over again and expecting different results.

Albert Einstein
Blockquote - Quotation Mark

blockquote.blockquote--quotation_mark>footer>cite.source>a*2

A person's name is not the title of a work — even if people call that person a piece of work

Rules

Colors

Default

hr


Base

hr.rule


Accent Color

hr.rule--accent_color


Accent Color 2

hr.rule--accent_color2


Styles

Dotted

hr.rule.rule--dotted


Dashed

hr.rule--accent_color.rule--dashed


Ornament

hr.rule--accent_color2.rule--ornament


Custom ornament

hr.rule--accent_color2.rule--ornament[data-ornament="!"]


Texture

Colors

.accent_color
This is an islet with accent_color. This is a link.
.accent_color2

This is an islet with accent_color2. This is a link.

.accent_color3
This is an islet with accent_color3. This is a link.
.color--alert

This is an alert

.color--error

This is an error

.color--error_light

This is a light error

.color--info

This is information

.color--info_dark

This is important information

.color--inverse

This is contrasting

.color--success

This is a great success

.color--success_light

This is a successful notification

.color--warning

This is a warning

Borders

.border

Creates a border around object using $base-ui-color.

.border--accent_color

This is an .islet with .border--accent_color. If $use-rounded-borders is set to false then this would be square. But for display purposes the .brand_round class was added.

.border--accent_color2

This is an .islet with .border--accent_color2. If $use-rounded-borders is set to false then this would be square. But for display purposes the .brand_round class was added.

.border--block_list, .border--block_list--accent_color, .border--block_list--accent_color

These classes put borders in between items and uses the $base-ui-color, $accent_color and $accent_color2.

Brand Round

.brand_round

Even if $use-rounded-corners is set to false, this class is available using the defined variable $brand-round.

Note: if $use-rounded-corners is set to true, then rounded-corners are added to

Gradients

  • .gradient--accent_color
  • .gradient--accent_color2
  • .gradient--error
  • .gradient--grey
  • .gradient--info
  • .gradient--inverse
  • .gradient--success
  • .gradient--warning

Typography

Typography is probably the most loaded section. So sit back, grab a cup of coffee (or whatever drink suits your fancy) and enjoy the many options available. Why so many classes? Who am I to tell you what you need or don't need. Remember, you have total control so if you don't like them, get rid of them.

Headings

Heading 1, .h1, .alpha

Applying the named class (.alpha, .beta, .gamma, .delta, .epsilon, .zeta) will just do the size, not the other styling. The following headings with paragraphs are going to be filled with Lorem jibberish. I included it because I think its important to see how the default utilizes its vertical spacing. Never thought about it before? You should check out Single-direction margin declarations on the csswizardry blog. Its eye opening.

Heading 2, .h2, .beta

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, alias, fugiat, ducimus, numquam tenetur nisi omnis quis quia ad esse debitis optio doloremque nemo nobis recusandae soluta molestias architecto voluptatem!

Heading 3, .h3, .gamma

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, expedita libero dolore perspiciatis odio inventore minus excepturi ducimus facilis quam. Non, deserunt, mollitia error odio alias modi quam nobis autem.

Heading 4, .h4, .delta

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, esse veritatis repellendus eius architecto laborum accusantium molestiae eos. Assumenda, dolor atque dolorem neque quae placeat blanditiis eos magni recusandae eaque.

Heading 5, .h5, .epsilon

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, molestiae, eveniet necessitatibus voluptas magnam modi nam consequatur unde? Voluptas illum voluptates nesciunt tenetur neque sapiente fugit minus expedita iure dolor.

Heading 6, .h6, .zeta

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, quas, quod quasi fugiat excepturi minus deleniti mollitia dicta recusandae veritatis in quidem obcaecati blanditiis doloremque illum quia ut optio vel!

.huge, .kilo

.mega

(.giga)ntic!

Text Classes

Paragraph Classes

.lead, .lede

This is a lead paragraph (or if you're British then lede). Its bigger than the other paragraphs and usually used to lead an article.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque, quam itaque omnis animi temporibus libero labore eum. Nulla, animi vero omnis alias voluptatum amet voluptates mollitia adipisci eius quidem libero.

Maiores, dolores, illo, commodi, quam incidunt ea tempora dicta facilis voluptatum autem odit quasi necessitatibus nulla fuga quibusdam earum cupiditate eaque fugit debitis aspernatur quod recusandae molestias consectetur quis iste.

.secondary

Sometimes you have a paragraph that you want to draw attention to but don't want to emphasize. Almost like an aside inside of a long document. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, unde commodi expedita similique. At, error, distinctio assumenda ducimus quis optio cumque! Earum, optio ab quasi voluptates accusamus vero est quos.

Text Colors

.text--muted
This is some muted text. This is a muted link.
.text--warning
This is some warning text. This is a warning link.
.text--error
This is some error text. This is a error link.
.text--info
This is some info text. This is a info link.
.text--success

This is some success text. This is a success link.

Text Styles

.initialism
Sometimes you just need to emphasize some words without making them look too different.
.caps
Sometimes you just need to capitalize some words.
.smallcaps

A little different then just Capitalizing everything.

Small Print

.smallprint, .milli
Often used for footers
.micro

Typically used for disclaimer information

Font Weights

.weight--light
Light weight text - 300
.weight--normal
Normal weight text - 400
.weight--semibold
Semibold weight text - 600

Inline Elements

abbr[title], em, strong, i, b, cite, code, del, ins, dfn, mark, sup, sub

Text level HTML elements may be used within other elements. They include: em and strong for semantic emphasis, i and b for presentational formatting, abbr abbreviations, cite citations, code example, del, ins for visibly deleted and inserted content, dfn definitions, mark for highlighted passages and sup superscript and sub subscript.

Helpers

Amp

span.amp.gamma

Isn't this a pretty &instead of a boring &?

Muted

.islet.accent_color

This is an islet

.islet.accent_color.muted

This is a muted islet
Informative

a.btn..btn--info.informative

Add a help cursor to any element that gives the user extra information on `:hover`. Help? (Hover me)

Go

a.go

Add a right-angled quote to links that imply movement. Read more

Code and Pre
  • <code>block</code>

    Code is used inline to denote some code.

  • <pre>block</pre>

    	.kitchen_sink__h2 { 
    		@include font-size($h2-default, 1);	
    	}
    

Margins and Paddings

Push - Add full margins
Push Top
Push Right
Push Bottom
Push Left
Push Ends
Push Sides
Push - Add half margins
Push Half
Push Half Top
Push Half Right
Push Half Bottom
Push Half Left
Push Half Ends
Push Half Sides
Flush - remove margins
Flush
Flush Top
Flush Right
Flush Bottom
Flush Left
Flush Ends
Flush Sides
Soft - add padding
Soft
Soft Top
Soft Right
Soft Bottom
Soft Left
Soft Ends
Soft Sides
Soft Half - add half padding
Soft Half
Soft Half Top
Soft Half Right
Soft Half Bottom
Soft Half Left
Soft Half Ends
Soft Half Sides
Hard - remove paddings
Hard
Hard Top
Hard Right
Hard Bottom
Hard Left
Hard Ends
Hard Sides

Accessibility

Hide the content off screen without having to use display: none; so that screen readers can still benefit.

  • .accessibility
  • .visuallyhidden
  • .accessibility--palm
  • .visuallyhidden--palm
  • .accessibility--lap
  • .visuallyhidden--lap
  • .accessibility--lap-and-up
  • .visuallyhidden--lap-and-up
  • .accessibility--portable
  • .visuallyhidden--portable
  • .accessibility--desk
  • .visuallyhidden--desk
  • .accessibility--desk-wide
  • .visuallyhidden--desk-wide