Cauldron

Cauldron is modular SASS framework and HTML boilerplate to bootstrap your web & mobile projects. Cauldron lets you pick and choose only the parts you need.

Style it your way

In your projects, you can easily override module styles by:

1. Assigning module variables in your projects scss/_config.scss file:

   $btn-primary-bg: #cc0000;
   $btn-primary-colour: white;
   

   In this example, see _buttons.scss for a full list of default variables.
2. Overriding Cauldron selectors in your projects scss/app/_overrides.scss file:

.btn {
	border: 1px solid black;
	@include box-shadow(0 0 1px rgba(black, .25));
}

modules/_alerts.scss view source

Example

Markup

<div class="alert">...</div>
<div class="alert alert-success">...</div>
<div class="alert alert-info">...</div>
<div class="alert alert-warning">...</div>
<div class="alert alert-danger">...</div>

modules/_buttons.scss view source

Example

Markup

<a class="btn">...</a>
<a class="btn btn-primary">...</a>
<a class="btn btn-secondary">...</a>
<a class="btn btn-tertiary">...</a>
<a class="btn white-btn">...</a>
<a class="btn black-btn">...</a>
<a class="btn btn-primary disabled">...</a>
<a class="btn btn-primary full-width">...</a>
<a class="btn white-btn full-width pill">...</a>

modules/_forms.scss view source

Wrap your form labels / inputs in a parent div with the .form-row class.

Labels above inputs

Example

Markup

<div class="form-row">
	<label for="email" class="required">Email:</label>
	<input type="text" name="email" id="email" required />
</div>

<div class="form-row">
	<label for="country" class="required">Country:</label>
	<select name="country" id="country">
		<option>Canada</option>
		<option>USA</option>
		<option>Everywhere else</option>
	</select>
</div>

<div class="form-row">
	<label>Gender:</label>
	<div class="radio-group">
		<input type="radio" name="gender" id="male" value="male" />
		<label for="male">Male</label>

		<input type="radio" name="gender" id="female" value="female" />
		<label for="female">Female<label>
	</div>
</div>

<div class="form-row">
	<label>Your favourite band:</label>
	<div class="radio-group">
		<input type="checkbox" name="band" id="nickelback" value="nickelback" />
		<label for="nickelback">Nickelback</label>

		<input type="checkbox" name="band" id="wesley_willis" value="wesley_willis" />
		<label for="wesley_willis">Wesley Willis<label>
	</div>
</div>

<div class="form-row">
	<label for="message" class="required">Message:</label>
	<textarea name="message" id="message"></textarea>
</div>

<div class="form-row">
	<button class="btn-primary">Submit</button>
	<button>Forgot Password?</button>
</div>

Labels beside inputs

To use inline labels simply add the class .inline to .form-row.

Example

Markup

<div class="form-row inline">
	<label for="name" class="required">Full name:</label>
	<input type="text" name="name" id="name" required />
</div>
<div class="form-row inline">
	<label for="income" class="required">Income:</label>
	<select name="income" id="income">
		<option>$0 - $20,000</option>
		<option>$20,000 - $40,000</option>
		<option>$40,000 - $60,000</option>
		<option>$60,000 - $80,000</option>
		<option>$80,000 - $100,000</option>
		<option>$100,000+</option>
	</select>
</div>
<div class="form-row inline">
	<label class="required">Favourite drink:</label>
	<div class="radio-group">
		<input type="radio" name="drink" id="coke" value="coke" />
		<label for="coke">Coke</label>

		<input type="radio" name="drink" id="pepsi" value="pepsi" />
		<label for="pepsi">Pepsi</label>

		<input type="radio" name="drink" id="grape" value="grape" />
		<label for="grape">Grape drink</label>
	</div>
</div>
<div class="form-row inline">
	<button class="btn-primary">Submit</button>
</div>

iOS 7 styled forms

Example

Markup

// I promise!

modules/_lists.scss view source

iOS 7 Style Lists

Example

Markup

<ul class="ios-list">
	<li>
		<h3 class="ios-list-heading">List Heading</h3>
		<ul class="ios-list-content">
			<li>Standard li</li>
			<li><a href="#">Boring link</a></li>
			<li class="li-btn"><a href="#">Block link</a></li>
			<li class="li-btn">
				<a href="#">Block link with arrow<i class="icon-right-open right"></i></a>
			</li>
		</ul>
	</li>
</ul>

modules/_modifiers.scss view source

Modifiers are 1 line pieces of code which make a small modification on existing behaviour. See the _modifiers.scss file for a full list of available modifiers.

Example

Markup

<div class="opacity-50">
	50% opacity
</div>

<span class="font-150">Font at 150% size</span>

modules/_panes.scss view source

Panes are simply content blocks. You can optionally include a pane header and pane content child div which provides some padding.

Example

Markup

<div class="pane">
	<div class="pane-header">
		Pane Header
	</div>
	<div class="pane-content">
		Pane Content
	</div>
</div>

mixins/_animations.scss view source

@mixin keyframe($animation-name) { ... } // Cross-browser keyframe css function

Usage

@include keyframe(bouncy-ball) {
	from {
		top: -50px;
	}
	to {
		top: 0px;
	}
}

.ball {
	@include animation(bouncy-ball .5s infinite);
}

@mixin animation($animation) // Cross-browser supported animation

Usage

.ball {
	@include animation(bouncy-ball .5s infinite);
}

mixins/_fonts.scss view source

/**
 * @param $size        - Font size in rem with px fallback for older browsers
 * @param $line-height - (Optional) default is font-size * 1.5
 */
@mixin font-size($size, $line-height)

Usage

.lead {
	@include font-size(2);
}

@mixin text-truncate() // Truncate text with ellipsis

Usage

.lead {
	@include font-size(2);
	@include text-truncate();
}

/**
 * @param $font-family    - Font name for reference in css
 * @param $file-path      - Name of font file without extension
 * @param $weight         - Normal, bold, or numeric weight e.g. 100, 500, 700
 * @param $style          - Normal, italic
 * @param $asset-pipeline - (Bool) Default false. If true, uses font-url defined in config.rb
 */
@mixin font-face($font-family, $file-path, $weight, $style, $asset-pipeline)

Usage

.lead {
	@include font-size(2);
	@include text-truncate();
	@include font-face('GaramondPro', '../fonts/GaramondPro');
}

mixins/_responsive.scss view source

/**
 * @param $breakpoint - Custom breakpoint, e.g.: max-width: 660px
 * @param $media      - Media types. Default is 'all'
 */
@mixin respond($breakpoint, $media) { ... }

Usage

.content {
	// 80% font size for smaller devices
	@include respond('max-width: 600px') {
		font-size: 80%;
	}
}

/**
 * @param $breakpoint - Defined list of sizes and devices:
 *                    - small, medium, large, xlarge
 *                    - small-phones, phones, tablets, desktop
 * @param $media      - Media types. Default is 'all'
 */
@mixin breakpoint($breakpoint, $media) { ... }

Usage

.content {
	// css for tablets
	@include breakpoint(tablets) {
		//...
	}

	// css for phones
	@include breakpoint(phones) {
		// ...
	}
}

/**
 * @param $breakpoint - Defined list of sizes and devices:
 *                    - small, medium, large, xlarge
 *                    - small-phones, phones, tablets, desktop
 *                    - or custom query: max-width: 660px
 */
@mixin hidden($breakpoint)

Usage

.primary-nav {
	@include hidden(phones); // hide nav on mobile devices
}

/**
 * @param $breakpoint - Defined list of sizes and devices:
 *                    - small, medium, large, xlarge
 *                    - small-phones, phones, tablets, desktop
 *                    - or custom query: max-width: 660px
 */
@mixin visible($breakpoint)

Usage

.mobile-nav {
	display: none;
	@include visible(phones); // show nav on mobile devices
}

mixins/_retina.scss view source

Retina.js helper mixin for applying high-resolution background images from Nathan Crank.

/**
 * @param $path - Path to image
 * @param $ext  - Extensions. Default '.jpg'
 * @param $w    - Width. Default 'auto'
 * @param $h    - Height. Default 'auto'
 */
@mixin at2x($path, $ext, $w, $h)

Usage

body {
	// will output background.jpg and background@2x.jpg depending on
	// the device resolution
	@include at2x('background');
}