Coastal Resilience Style Guide

View "in-context" style guide

Layout Example

Text in a paragraph tag explaining the awesomeness of your app. Maybe this is a short introduction to what the app can and can't do.

Next Section

Start making choices

Play With Data Section

Should I keep going?

Cool. Then play with this slider

Selected values: 25 - 75

Get the HTML

See the markup for this sample by hitting the button below

<h2>Layout Example</h2>
<section>
	<p>Text in a paragraph tag explaining the awesomeness of your app. Maybe this is a short introduction to what the app can and can't do.</p>
</section>

<section>
	<h3>Next Section</h3>
	<p>Start making choices</p>
	<div>
		<label class="form-component radio-pill" for="g-option">
			<input type="radio" id="g-option" name="choices">
			<div class="check"></div>
			<span class="form-text">This</span>
		</label>
		<label class="form-component radio-pill" for="h-option">
			<input type="radio" id="h-option" name="choices">
			<div class="check"></div>
			<span class="form-text">That</span>
		</label>
		<label class="form-component radio-pill" for="i-option">
			<input type="radio" id="i-option" name="choices" checked>
			<div class="check"></div>
			<span class="form-text">The Other One</span>
		</label>
	</div>
</section>

<section>
	<h3>Play With Data Section</h3>
	<p>Should I keep going?</p>
	<div class="toggle-btn" style="width:100px;">
		<input type="radio" id="yn1" name="yesno" value="yes" checked/>
		<label for="yn1">Yes</label>
		<input type="radio" id="yn2" name="yesno" value="no"/>
		<label for="yn2">No</label>
	</div>
	<p>Cool. Then play with this slider</p>
	<div class="slider-container range-slider" style="width:250px;">
		<div id="rslider" class="slider"></div>
		<div style="text-align:center; margin-top:10px;">
			Selected values: <span class="blueFont">25</span> - <span class="blueFont">75</span>
		</div>
	</div>
</section>

<section>
	<h3>Get the HTML</h3>
	<p>See the markup for this sample by hitting the button below</p>
	<button class="button button-default sh">Show HTML</button>
</section>

Components

Accordion

First Panel

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

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Second Panel

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Third Panel

Furantur ius off faciem tuam in caput tuum. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.

<!--Add class accord to the accordion's parent div-->
<div class="accord" style="height:440px; width:350px; margin-bottom:10px;">
	<div id='accord'>
	<h3>First Panel</h3>
	<div>
		<p>Lorem ipsum dolor sit amet, consectetur...</p>
		<p>Ut enim ad minim veniam, quis nostrud...</p>
		<p>Duis aute irure dolor in reprehenderit...</p>
		<p>Lorem ipsum dolor sit amet, consectetur...</p>
		<p>Ut enim ad minim veniam, quis nostrud...</p>
	</div>
	<h3>Second Panel</h3>
	<div>
		<p>Sed ut perspiciatis unde omnis iste natus...</p>
	</div>
	<h3>Third Panel</h3>
	<div>
		<p>At vero eos et accusamus et iusto odio...</p>
	</div>
</div>

Initialize the jQuery UI Accordion

$(function() {
  $( "#accord" ).accordion( { heightStyle: "fill" } );
  /* Add classes so style changes to the accordion don't affect
     jQuery-UI elements within the accordion (e.g., slider) */
  $( "#accord > h3" ).addClass("accord-header");
  $( "#accord > div" ).addClass("accord-body");
});

Buttons


<button class="button button-default">Default Button</button>

<button class="button button-primary">Primary Button</button>

<button class="button button-secondary">Secondary Button</button>

<button class="button button-danger">Danger Button</button>

<button class="button button-warning">Warning Button</button>

<button class="button button-link">Link Button</button>

Disabled Buttons


<button disabled class="button button-default">Default Button</button>

<button disabled class="button button-primary">Primary Button</button>

<button disabled class="button button-secondary">Secondary Button</button>

<button disabled class="button button-danger">Danger Button</button>

<button disabled class="button button-warning">Warning Button</button>

<button disabled class="button button-link">Link Button</button>

<button class="button button-default sh">Show HTML</button>

Checkboxes

<label class="form-component" for="c-option">
	<input checked type="checkbox" id="c-option" name="food">
	<div class="check"></div>
	<span class="form-text">Guacamole</span>
</label>
<label class="form-component disabled" for="z-option">
	<input type="checkbox" id="z-option" name="food">
	<div class="check"></div>
	<span class="form-text">Salsa</span>
</label>
<label class="form-component" for="y-option">
	<input disabled type="checkbox" id="y-option" name="food">
	<div class="check"></div>
	<span class="form-text">Cheese</span>
</label>

Chosen Select

Selected value: none

<!-- For Chosen options visit https://harvesthq.github.io/chosen/ -->
<!-- Add class chos  to select's parent -->
<div class="chosen-wrap" style="margin-bottom:10px;">
	<select data-placeholder="Pick One Number" id="chosenSingle" class="chosen">
		<option></option>
		<option value="one">One</option>
		<option value="two">Two</option>
		<option value="three">Three</option>
		<option value="four">Four</option>
		<option value="five">Five</option>
	</select>
</div>
<p>Selected value: <span class="blueFont">none</span></p>

Initialize the Chosen select menu and change listener

//For Chosen options visit https://harvesthq.github.io/chosen/
//Single deselect only works if the first option in the select tag is blank

$("#chosenSingle").chosen({allow_single_deselect:true, width:"155px"})
	.change(function(c){
		var v = c.target.value;
		// check for a deselect
		if (v.length == 0){
			v = "none";
		}
		$('#' + c.target.id ).parent().next().find("span").html(v)
	});

Chosen Multiple Select

Array of selected values: []

<!-- For Chosen options visit https://harvesthq.github.io/chosen/ -->
<!-- Multiple select is turned on in the select tag (multiple="true") -->
<!-- Add class chosen-wrap to select's parent -->
<div class="chosen-wrap" style="margin-bottom:10px;">
	<select data-placeholder="Pick Multiple Numbers" id="chosenMultiple" multiple="true" class="chosen">
		<option value="one">One</option>
		<option value="two">Two</option>
		<option value="three">Three</option>
		<option value="four">Four</option>
		<option value="five">Five</option>
	</select>
</div>
<p>Array of selected values: <span class="blueFont">[]</span></p>

Initialize the Chosen multiple select menu and change listener

//For Chosen options visit https://harvesthq.github.io/chosen/

$("#chosenMultiple").chosen({width:"200px"})
	.change(function(c){
		// use .val() on the select tag's id to get array of selected values
		var v = $("#chosenMultiple").val();
		v = "[" + v.toString() + "]";
		$('#' + c.target.id ).parent().next().find("span").html(v)
	});

Dropdown

<div class="dropdown">
	<button class="button dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
		Philadelphia, PA
		<i class="icon-down-open-mini caret"></i>
	</button>
	<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
		<li><a href="#">Action</a></li>
		<li><a href="#">Another action</a></li>
		<li class="active"><a href="#">Something else here</a></li>
		<li><a href="#">Separated link</a></li>
	</ul>
</div>

Pills

<label class="form-component radio-pill" for="e-option">
	<input checked type="radio" id="e-option" name="pill">
	<div class="check"></div>
	<span class="form-text">Pill 1</span>
</label>
<label class="form-component radio-pill" for="f-option">
	<input type="radio" id="f-option" name="pill">
	<div class="check"></div>
	<span class="form-text">Pill 2</span>
</label>

Radios

<label class="form-component" for="a-option">
	<input checked type="radio" id="a-option" name="food">
	<div class="check"></div>
	<span class="form-text">Pizza</span>
</label>
<label class="form-component" for="b-option">
	<input type="radio" id="b-option" name="food">
	<div class="check"></div>
	<span class="form-text">BBQ</span>
</label>
<label class="form-component" for="x-option">
	<input type="radio" disabled id="x-option" name="food">
	<div class="check"></div>
	<span class="form-text">Apple</span>
</label>

Rangle Slider

Selected values: 25 - 75
<div class="slider-container range-slider" style="width:250px;">
	<div id="rsldr" class="slider"></div>
	<div style="text-align:center; margin-top:10px;">
		Selected values: <span class="blueFont">25</span class="blueFont"> - <span>75</span>
	</div>
</div>

Initialize the jQuery UI Range Slider and handle changes

$('#rsldr').slider({range:true, min:0, max:100, values:[25,75],
	// called at end of slide
	change:function(event,ui){
		//ask server for data
	},
	// called at each increment of slide
	slide:function(event,ui){
		$('#rsldr').next().find('span').each(function(i,v){
			$(v).html(ui.values[i])
		})
	}
})

Slider

<div class="slider-container" style="width:250px;">
	<div id="sldr" class="slider"></div>
</div>

Initialize the jQuery UI Slider

$(function() {
  $("#sldr").slider({ min: 0, max: 5, range: false, values: [1] })
    .slider("pips", { rest: "label"})
    .slider("float");
});

Toggle Buttons

Buttons expand to width of .toggle-btn div's parent (resize browser window to test)

Selected value: 

<div class="toggle-btn">
	<input type="radio" id="ch1" name="ch" value="first"/>
	<label for="ch1">First Choice</label>
	<input type="radio" id="ch2" name="ch" value="second"/>
	<label for="ch2">Second Choice</label>
	<input type="radio" id="ch3" name="ch" value="third"/>
	<label for="ch3">Third Choice</label>
	<input type="radio" id="ch4" name="ch" value="fourth"/>
	<label for="ch4">Fourth Choice</label>
	<input type="radio" id="ch5" name="ch" value="fifth"/>
	<label for="ch5">Fifth Choice</label>
</div>
<p>Selected value: <span class="blueFont"></span></p>

Width of .toggle-btn div set to 250px

Selected value: 

<div class="toggle-btn" style="width:250px;">
	<input type="radio" id="num1" name="num" value="one"/>
	<label for="num1">One</label>
	<input type="radio" id="num2" name="num" value="two"/>
	<label for="num2">Two</label>
	<input type="radio" id="num3" name="num" value="three"/>
	<label for="num3">Three</label>
</div>
<p>Selected value: <span class="blueFont"></span></p>

JavaScript Click Handler

$( document ).ready(function() {
	// Set selected value text for button clicks
	$( '.toggle-btn input' ).click(function(c){
		$('#' + c.target.id ).parent().next().find("span").html(c.target.value)
	});
});

Tooltip


<button class="button" data-toggle="tooltip" title="This is a tooltip example">Tool tip top</button>
<button class="button" data-toggle="tooltip" data-placement="bottom" title="This is a tooltip example">Tool tip bottom</button>
<i data-toggle="tooltip" data-placement="top" title="This is a tooltip example" class="icon icon-help-circled"></i>

Initialize the jQuery UI Tooltip

$(function() {
  $('[data-toggle="tooltip"]').tooltip({container:'body'});
});

Class Names and Custom Styles

The Coastal Resilience Style Guide uses several class names (listed below) that should not be directly used or altered by developers. Developers who want to make changes to existing style can use the following technique.

Let's say we want to set the width of following buttons to 150px.

The markup shows all the buttons share the class button and each has a seperate class to distinguish them (button-default, button-primary, button-secondary)

<button class="button button-default">Button 1</button>
<button class="button button-primary">Button 2</button>
<button class="button button-secondary">Button 3</button>

If we wrote .button{ width: 150px; } in our main.css file, all the buttons in our app would have a width of 150 pixels, but so would all the buttons in all the other apps in the region. If we add a new class to the button's parent element, we isolate the styling to just those buttons within the parent.

<p class="my-button">
  <button class="button button-default">Button 1</button>
  <button class="button button-primary">Button 2</button>
  <button class="button button-secondary">Button 3</button>
</p>

Now we can change the width of each occurance of class button that are within class my-button. 

.my-button .button{
  width: 150px
}

Reserved Class Names

Accordion: accord

Buttons: button, button-default, button-primary, button-secondary, button-danger, button-link

Checkboxes: check

Chosen Select: chosen-wrap, chosen

Dropdown: dropdown, dropdown-toggle

General (used for multiple elements): form-component, form-text

Pills: radio-pill

Radios: check

Range Slider: slider-container, range-slider, slider

Slider: slider-container, slider

Toggle Buttons: toggle-btn