Weave Code
Foundation Laravel Package
zurb/foundation
Foundation is a responsive front-end framework for building sites and apps on any device. Includes a customizable grid, Sass mixins, JavaScript plugins, and accessibility support, with docs and releases available to help you go from prototype to production.
title: Kitchen Sink
Abide
<form data-abide novalidate>
<div class="grid-x grid-margin-x">
<div class="cell">
<div data-abide-error class="alert callout" style="display: none;">
<p><i class="fi-alert"></i> There are some errors in your form.</p>
</div>
</div>
</div>
<div class="grid-x grid-margin-x">
<div class="cell small-12">
<label>Number Required
<input type="text" placeholder="1234" aria-describedby="exampleHelpTextNumber" required pattern="number">
<span class="form-error">
Yo, you had better fill this out, it's required.
</span>
</label>
<p class="help-text" id="exampleHelpTextNumber">Here's how you use this input field!</p>
</div>
<div class="cell small-12">
<label>Nothing Required!
<input type="text" placeholder="Use me, or don't" aria-describedby="exampleHelpTextNothing" data-abide-ignore>
</label>
<p class="help-text" id="exampleHelpTextNothing">This input is ignored by Abide using `data-abide-ignore`</p>
</div>
<div class="cell small-12">
<label>Password Required
<input type="password" id="password" placeholder="yeti4preZ" aria-describedby="exampleHelpTextPassword" required >
<span class="form-error">
I'm required!
</span>
<p class="help-text" id="exampleHelpTextPassword">Enter a password please.</p>
</label>
</div>
<div class="cell small-12">
<label>Re-enter Password
<input type="password" placeholder="yeti4preZ" aria-describedby="exampleHelpText2" required pattern="alpha_numeric" data-equalto="password">
<span class="form-error">
Hey, passwords are supposed to match!
</span>
</label>
<p class="help-text" id="exampleHelpText2">This field is using the `data-equalto="password"` attribute, causing it to match the password field above.</p>
</div>
</div>
<div class="grid-x grid-margin-x">
<div class="cell medium-6">
<label>URL Pattern, not required, but throws error if it doesn't match the Regular Expression for a valid URL.
<input type="text" placeholder="https://get.foundation" pattern="url">
</label>
</div>
<div class="cell medium-6">
<label>European Cars, Choose One, it can't be the blank option.
<select id="select" required>
<option value=""></option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</label>
</div>
</div>
<div class="grid-x grid-margin-x">
<fieldset class="cell medium-6">
<legend>Choose Your Favorite, and this is required, so you have to pick one.</legend>
<input type="radio" name="pokemon" value="Red" id="pokemonRed"><label for="pokemonRed">Red</label>
<input type="radio" name="pokemon" value="Blue" id="pokemonBlue" required><label for="pokemonBlue">Blue</label>
<input type="radio" name="pokemon" value="Yellow" id="pokemonYellow"><label for="pokemonYellow">Yellow</label>
</fieldset>
<fieldset class="cell medium-6">
<legend>Choose Your Favorite - not required, you can leave this one blank.</legend>
<input type="radio" name="pockets" value="Red" id="pocketsRed"><label for="pocketsRed">Red</label>
<input type="radio" name="pockets" value="Blue" id="pocketsBlue"><label for="pocketsBlue">Blue</label>
<input type="radio" name="pockets" value="Yellow" id="pocketsYellow"><label for="pocketsYellow">Yellow</label>
</fieldset>
<fieldset class="cell medium-6">
<legend>Check these out</legend>
<input id="checkbox1" type="checkbox"><label for="checkbox1">Checkbox 1</label>
<input id="checkbox2" type="checkbox" required><label for="checkbox2">Checkbox 2</label>
<input id="checkbox3" type="checkbox"><label for="checkbox3">Checkbox 3</label>
</fieldset>
</div>
<div class="grid-x grid-margin-x">
<fieldset class="cell medium-6">
<button class="button" type="submit" value="Submit">Submit</button>
</fieldset>
<fieldset class="cell medium-6">
<button class="button" type="reset" value="Reset">Reset</button>
</fieldset>
</div>
</form>
Accordion
<ul class="accordion" data-accordion>
<li class="accordion-item is-active" data-accordion-item>
<a href="#" class="accordion-title">Accordion 1</a>
<div class="accordion-content" data-tab-content >
<p>Panel 1. Lorem ipsum dolor</p>
<a href="#">Nowhere to Go</a>
</div>
</li>
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">Accordion 2</a>
<div class="accordion-content" data-tab-content>
<textarea></textarea>
<button class="button">I do nothing!</button>
</div>
</li>
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">Accordion 3</a>
<div class="accordion-content" data-tab-content>
Type your name!
<input type="text">
</div>
</li>
</ul>
Accordion Menu
<ul class="vertical menu" data-accordion-menu>
<li>
<a href="#0">Item 1</a>
<ul class="menu vertical nested is-active">
<li>
<a href="#0">Item 1A</a>
<ul class="menu vertical nested">
<li><a href="#0">Item 1Ai</a></li>
<li><a href="#0">Item 1Aii</a></li>
<li><a href="#0">Item 1Aiii</a></li>
</ul>
</li>
<li><a href="#0">Item 1B</a></li>
<li><a href="#0">Item 1C</a></li>
</ul>
</li>
<li>
<a href="#0">Item 2</a>
<ul class="menu vertical nested">
<li><a href="#0">Item 2A</a></li>
<li><a href="#0">Item 2B</a></li>
</ul>
</li>
<li><a href="#0">Item 3</a></li>
</ul>
Badge
<span class="primary badge">1</span>
<span class="secondary badge">2</span>
<span class="success badge">3</span>
<span class="alert badge">A</span>
<span class="warning badge">B</span>
Breadcrumbs
<nav aria-label="You are here:" role="navigation">
<ul class="breadcrumbs">
<li><a href="#0">Home</a></li>
<li><a href="#0">Features</a></li>
<li class="disabled">Gene Splicing</li>
<li>
<span class="show-for-sr">Current: </span> Cloning
</li>
</ul>
</nav>
Button
<!-- Anchors (links) -->
<a href="#0" class="button">Learn More</a>
<a href="#features" class="button">View All Features</a>
<!-- Buttons (actions) -->
<button type="button" class="success button">Save</button>
<button type="button" class="alert button">Delete</button>
<a class="tiny button" href="#0">So Tiny</a>
<a class="small button" href="#0">So Small</a>
<a class="large button" href="#0">So Large</a>
<a class="expanded button" href="#0">Such Expand</a>
<div class="button-group">
<a class="button">One</a>
<a class="button">Two</a>
<a class="button">Three</a>
</div>
Callout
<div class="callout">
<h5>This is a callout.</h5>
<p>It has an easy to override visual style, and is appropriately subdued.</p>
<a href="#0">It's dangerous to go alone, take this.</a>
</div>
<div class="callout primary">
<h5>This is a primary callout.</h5>
<p>It has an easy to override visual style, and is appropriately subdued.</p>
<a href="#0">It's dangerous to go alone, take this.</a>
</div>
<div class="callout secondary">
<h5>This is a secondary callout</h5>
<p>It has an easy to override visual style, and is appropriately subdued.</p>
<a href="#0">It's dangerous to go alone, take this.</a>
</div>
<div class="callout success">
<h5>This is a success callout</h5>
<p>It has an easy to override visual style, and is appropriately subdued.</p>
<a href="#0">It's dangerous to go alone, take this.</a>
</div>
<div class="callout warning">
<h5>This is a warning callout</h5>
<p>It has an easy to override visual style, and is appropriately subdued.</p>
<a href="#0">It's dangerous to go alone, take this.</a>
</div>
<div class="callout alert">
<h5>This is an alert callout</h5>
<p>It has an easy to override visual style, and is appropriately subdued.</p>
<a href="#0">It's dangerous to go alone, take this.</a>
</div>
Close Button
<div class="callout" data-closable>
<button class="close-button" aria-label="Close alert" type="button" data-close>
<span aria-hidden="true">×</span>
</button>
<p>This is a close button example.</p>
</div>
Drilldown Menu
<ul class="vertical menu" data-drilldown style="width: 200px" id="m1">
<li>
<a href="#0">Item 1</a>
<ul class="vertical menu" id="m2">
<li>
<a href="#0">Item 1A</a>
<ul class="vertical menu" id="m3">
<li><a href="#0">Item 1Aa</a></li>
<li><a href="#0">Item 1Ba</a></li>
<li><a href="#0">Item 1Ca</a></li>
<li><a href="#0">Item 1Da</a></li>
<li><a href="#0">Item 1Ea</a></li>
</ul>
</li>
<li><a href="#0">Item 1B</a></li>
<li><a href="#0">Item 1C</a></li>
<li><a href="#0">Item 1D</a></li>
<li><a href="#0">Item 1E</a></li>
</ul>
</li>
<li>
<a href="#0">Item 2</a>
<ul class="vertical menu">
<li><a href="#0">Item 2A</a></li>
<li><a href="#0">Item 2B</a></li>
<li><a href="#0">Item 2C</a></li>
<li><a href="#0">Item 2D</a></li>
<li><a href="#0">Item 2E</a></li>
</ul>
</li>
<li>
<a href="#0">Item 3</a>
<ul class="vertical menu">
<li><a href="#0">Item 3A</a></li>
<li><a href="#0">Item 3B</a></li>
<li><a href="#0">Item 3C</a></li>
<li><a href="#0">Item 3D</a></li>
<li><a href="#0">Item 3E</a></li>
</ul>
</li>
<li><a href='#0'> Item 4</a></li>
</ul>
Dropdown Menu
<ul class="dropdown menu" data-dropdown-menu>
<li>
<a>Item 1</a>
<ul class="menu">
<li><a href="#0">Item 1A Loooong</a></li>
<li>
<a href='#0'> Item 1 sub</a>
<ul class="menu">
<li><a href='#0'>Item 1 subA</a></li>
<li><a href='#0'>Item 1 subB</a></li>
<li>
<a href='#0'> Item 1 sub</a>
<ul class="menu">
<li><a href='#0'>Item 1 subA</a></li>
<li><a href='#0'>Item 1 subB</a></li>
</ul>
</li>
<li>
<a href='#0'> Item 1 sub</a>
<ul class="menu">
<li><a href='#0'>Item 1 subA</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#0">Item 1B</a></li>
</ul>
</li>
<li>
<a href="#0">Item 2</a>
<ul class="menu">
<li><a href="#0">Item 2A</a></li>
<li><a href="#0">Item 2B</a></li>
</ul>
</li>
<li><a href="#0">Item 3</a></li>
<li><a href='#0'>Item 4</a></li>
</ul>
Dropdown Pane
<button class="button" type="button" data-toggle="example-dropdown">Toggle Dropdown</button>
<div class="dropdown-pane" id="example-dropdown" data-dropdown>
Just some junk that needs to be said. Or not. Your choice.
</div>
Equalizer
<div class="grid-x grid-margin-x" data-equalizer data-equalize-on="medium" id="test-eq">
<div class="cell medium-4">
<div class="callout" data-equalizer-watch>
<img src= "assets/img/generic/square-1.jpg" alt="">
</div>
</div>
<div class="cell medium-4">
<div class="callout" data-equalizer-watch>
<p>Pellentesque habitant morbi tristique senectus et netus et, ante.</p>
</div>
</div>
<div class="cell medium-4">
<div class="callout" data-equalizer-watch>
<img src= "assets/img/generic/rectangle-1.jpg" alt="">
</div>
</div>
</div>
Flex Grid
<div class="row">
<div class="small-6 columns">6 columns</div>
<div class="small-6 columns">6 columns</div>
</div>
<div class="row">
<div class="medium-6 large-4 columns">12/6/4 columns</div>
<div class="medium-6 large-8 columns">12/6/8 columns</div>
</div>
Responsive Embed
<div class="responsive-embed">
<iframe width="420" height="315" src="https://www.youtube.com/embed/mM5_T-F1Yn4" frameborder="0" allowfullscreen></iframe>
</div>
Float Classes
<div class="callout clearfix">
<a class="button float-left">Left</a>
<a class="button float-right">Right</a>
</div>
Forms
<form>
<label>Input Label
<input type="text" placeholder=".small-12.columns" aria-describedby="exampleHelpText">
</label>
<p class="help-text" id="exampleHelpText">Here's how you use this input field!</p>
<label>
How many puppies?
<input type="number" value="100">
</label>
<label>
What books did you read over summer break?
<textarea placeholder="None"></textarea>
</label>
<label>Select Menu
<select>
<option value="husker">Husker</option>
<option value="starbuck">Starbuck</option>
<option value="hotdog">Hot Dog</option>
<option value="apollo">Apollo</option>
</select>
</label>
<div class="grid-x grid-margin-x">
<fieldset class="cell large-6">
<legend>Choose Your Favorite</legend>
<input type="radio" name="pokemon" value="Red" id="formRed" required><label for="formRed">Red</label>
<input type="radio" name="pokemon" value="Blue" id="formBlue"><label for="formBlue">Blue</label>
<input type="radio" name="pokemon" value="Yellow" id="formYellow"><label for="formYellow">Yellow</label>
</fieldset>
<fieldset class="cell large-6">
<legend>Check these out</legend>
<input id="formCheckbox1" type="checkbox"><label for="formCheckbox1">Checkbox 1</label>
<input id="formCheckbox2" type="checkbox"><label for="formCheckbox2">Checkbox 2</label>
<input id="formCheckbox3" type="checkbox"><label for="formCheckbox3">Checkbox 3</label>
</fieldset>
</div>
<div class="grid-x grid-margin-x">
<div class="cell small-3">
<label for="middle-label" class="text-right middle">Label</label>
</div>
<div class="cell small-9">
<input type="text" id="middle-label" placeholder="Right- and middle-aligned text input">
</div>
</div>
<div class="input-group">
<span class="input-group-label">$</span>
<input class="input-group-field" type="url">
<div class="input-group-button">
<input type="submit" class="button" value="Submit">
</div>
</div>
</form>
Grid
<div class="row">
<div class="small-2 medium-3 large-4 columns">2/3/4 columns</div>
<div class="small-4 medium-3 large-4 columns">4/3/4 columns</div>
<div class="small-6 large-4 columns">6/6/4 columns</div>
</div>
<div class="row">
<div class="large-3 columns">12/12/3 columns</div>
<div class="large-6 columns">12/12/6 columns</div>
<div class="large-3 columns">12/12/3 columns</div>
</div>
<div class="row">
<div class="small-6 large-2 columns">6/6/2 columns</div>
<div class="small-6 large-8 columns">6/6/8 columns</div>
<div class="small-12 large-2 columns">12/12/2 columns</div>
</div>
<div class="row">
<div class="small-3 columns">3 columns</div>
<div class="small-9 columns">9 columns</div>
</div>
<div class="row">
<div class="medium-8 large-4 columns">12/8/4 columns</div>
<div class="medium-4 large-8 columns">12/4/8 columns</div>
</div>
Interchange
<img data-interchange="[assets/img/interchange/small.jpg, small], [assets/img/interchange/medium.jpg, medium], [assets/img/interchange/large.jpg, large]" src="#" alt="">
Label
Weaver
How can I help you explore Laravel packages today?