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.
Start making choices
Should I keep going?
Cool. Then play with this slider
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>
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.
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.
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>
$(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"); });
<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>
<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>
<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>
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>
//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) });
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>
//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) });
<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>
<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>
<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>
<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>
$('#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]) }) } })
<div class="slider-container" style="width:250px;"> <div id="sldr" class="slider"></div> </div>
$(function() { $("#sldr").slider({ min: 0, max: 5, range: false, values: [1] }) .slider("pips", { rest: "label"}) .slider("float"); });
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>
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>
$( 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) }); });
<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>
$(function() { $('[data-toggle="tooltip"]').tooltip({container:'body'}); });
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 }
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