This is a collection of extensions for Foundation for Sites that I thought would be reusable.
I've only tested this against Foundation 6.5 on a handful of browsers (IE10, Edge, Chrome, FF). PRs welcome!
For a list of variables that can be overriden, see _defaults.scss
Install from NPM
npm install --save foundation-sites-extensions
Import into your theme
// Import Foundation
@import 'foundation-sites/scss/foundation';
// Import Foundation Extensions
@import 'foundation-sites-extensions/scss/foundation-extensions';
Override variables
$white: blue;
Include the portions you would like to use.
Alternatively, you can import everything with:
@include foundation-extensions-everything;
You can add the invalid class to input, textarea, and label tags:
<label class="invalid">Invalid Input
<input
class="invalid"
type="text"
placeholder="Enter things here"
value="something that is not correct"
>
</label>
For any color in your foundation-pallete, (primary, secondary, alert, etc...), you can add the text-color class to a block of text to get that color text.
For example:
<h5 class="text-primary">I'm Primary!</h5>
Additionally, there are classes for text-black, text-white, text-gray, and text-muted.
Makes it easier to position a title-bar as the top of a callout.
Note: The stylings will only apply when the title-bar is the first element in the callout.
For example:
<div class="callout">
<div class="title-bar">
Normal Callout
</div>
<h5>Callout content!</h5>
</div>
Since this title-bar isn't first, the normal styling applies.