34 | ```
35 |
36 | ---
37 |
38 | ## Disabled
39 |
40 | U can't touch this. Need to disable a slider? Just add a `disabled` class to the `slider` `
`.
41 |
42 | ```html_example
43 |
44 |
48 | ```
49 |
50 | ---
51 |
52 | ## Two Handles
53 |
54 | Oh... You might need two handles? Don't fret. We got you covered. Hook it up with another `.slider-handle` span and `input` field. This works for horizontal and vertical sliders! Please note that our JavaScript will assign `id`'s for input fields, unless you do so yourself. If you choose not to, handles and inputs will be matched in the order they are in the dom tree.
55 |
56 | ```html_example
57 |
58 |
64 | ```
65 |
66 | ---
67 |
68 | ## Data binding
69 |
70 | Wait, you want a visible input AND a slider? You're crazy, but ok. Change the value of either and see the other match it. Note that you have to set an `id` for the `input` and add the `aria-controls="idOfInput"` to the slider handle.
71 |
72 | ```html_example
73 |
79 |
80 |
82 | ```
83 |
--------------------------------------------------------------------------------
/scss/util/_unit.scss:
--------------------------------------------------------------------------------
1 | // Foundation for Sites by ZURB
2 | // foundation.zurb.com
3 | // Licensed under MIT Open Source
4 |
5 | ////
6 | /// @group functions
7 | ////
8 |
9 | $global-font-size: 100% !default;
10 |
11 | // scss-lint:disable ZeroUnit
12 |
13 | /// Removes the unit (e.g. px, em, rem) from a value, returning the number only.
14 | ///
15 | /// @param {Number} $num - Number to strip unit from.
16 | ///
17 | /// @returns {Number} The same number, sans unit.
18 | @function strip-unit($num) {
19 | @return $num / ($num * 0 + 1);
20 | }
21 |
22 | /// Converts one or more pixel values into matching rem values.
23 | ///
24 | /// @param {Number|List} $values - One or more values to convert. Be sure to separate them with spaces and not commas. If you need to convert a comma-separated list, wrap the list in parentheses.
25 | /// @param {Number} $base [null] - The base value to use when calculating the `rem`. If you're using Foundation out of the box, this is 16px. If this parameter is `null`, the function will reference the `$base-font-size` variable as the base.
26 | ///
27 | /// @returns {List} A list of converted values.
28 | @function rem-calc($values, $base: null) {
29 | $rem-values: ();
30 | $count: length($values);
31 |
32 | // If no base is defined, defer to the global font size
33 | @if $base == null {
34 | $base: $global-font-size;
35 | }
36 |
37 | // If the base font size is a %, then multiply it by 16px
38 | // This is because 100% font size = 16px in most all browsers
39 | @if unit($base) == '%' {
40 | $base: ($base / 100%) * 16px;
41 | }
42 |
43 | @if $count == 1 {
44 | @return -zf-to-rem($values, $base);
45 | }
46 |
47 | @for $i from 1 through $count {
48 | $rem-values: append($rem-values, -zf-to-rem(nth($values, $i), $base));
49 | }
50 |
51 | @return $rem-values;
52 | }
53 |
54 | // Converts a unitless, pixel, or rem value to em, for use in breakpoints.
55 | @function -zf-bp-to-em($value) {
56 | // Pixel and unitless values are converted to rems
57 | @if unit($value) == 'px' or unitless($value) {
58 | $value: rem-calc($value, $base: 16px);
59 | }
60 |
61 | // Then the value is converted to ems
62 | @return strip-unit($value) * 1em;
63 | }
64 |
65 | /// Converts a pixel value to matching rem value. *Any* value passed, regardless of unit, is assumed to be a pixel value. By default, the base pixel value used to calculate the rem value is taken from the `$global-font-size` variable.
66 | /// @access private
67 | ///
68 | /// @param {Number} $value - Pixel value to convert.
69 | /// @param {Number} $base [null] - Base for pixel conversion.
70 | ///
71 | /// @returns {Number} A number in rems, calculated based on the given value and the base pixel value. rem values are passed through as is.
72 | @function -zf-to-rem($value, $base: null) {
73 | // Calculate rem if units for $value is not rem
74 | @if (unit($value) != 'rem') {
75 | $value: strip-unit($value) / strip-unit($base) * 1rem;
76 | }
77 | // Turn 0rem into 0
78 | @if ($value == 0rem) { $value: 0; }
79 | @return $value;
80 | }
81 |
--------------------------------------------------------------------------------
/docs/pages/toggler.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Toggler
3 | description: Toggler makes it easy to toggle CSS or animate any element with a click.
4 | js: js/foundation.toggler.js
5 | mui: true
6 | ---
7 |
8 | ## Toggle a CSS class
9 |
10 | To setup a class toggle, start by adding the attribute `data-toggler` to an element. The value of `data-toggler` is the class you want to toggle. Also give the element a unique ID so it can be targeted.
11 |
12 | ```html
13 |
19 | ```
20 |
21 | Then, add `data-toggle` to any element, with the ID of the target as the value of the attribute. Now, any time you click on this element, the class will toggle on and off on the target.
22 |
23 | ```html
24 |
Expand!
25 | ```
26 |
27 |
Expand!
28 |
29 |
35 |
36 | ---
37 |
38 | ## Toggle with Animation
39 |
40 | Instead of toggling a class, you can also toggle visibility. When toggled, the element comes into or out of view using a Motion UI class.
41 |
42 | Instead of `data-toggler`, add the attribute `data-toggler-animate`. The value of the attribute is the *in animation* you want, followed by the *out animation*.
43 |
44 | ```html_example
45 |
Toggle Panel
46 |
47 |
48 |
Hello!
49 |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta quas optio alias voluptas nobis iusto mollitia asperiores incidunt reprehenderit doloribus voluptatibus officiis minus, inventore, quasi nisi. Consequuntur, quidem. Sint, dicta?
50 |
51 | ```
52 |
53 | ---
54 |
55 | ## Mark as Closable
56 |
57 | To create an element that can be closed once, add the attribute `data-closable`. Then add a click trigger inside the element using `data-close`.
58 |
59 | ```html_example
60 |
61 |
×
62 |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore praesentium sint alias dolorum qui vel quaerat, libero consequatur non esse asperiores veritatis commodi, odit eum ipsam nemo dicta iste aliquam.
63 |
64 | ```
65 |
66 | ---
67 |
68 | ### With Alternate Animation
69 |
70 | `data-closable` can be configured with a custom exit animation.
71 |
72 | ```html_example
73 |
74 |
×
75 |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore praesentium sint alias dolorum qui vel quaerat, libero consequatur non esse asperiores veritatis commodi, odit eum ipsam nemo dicta iste aliquam.
76 |
77 | ```
78 |
--------------------------------------------------------------------------------
/js/foundation.responsiveToggle.js:
--------------------------------------------------------------------------------
1 | /**
2 | * ResponsiveToggle module.
3 | * @module foundation.responsiveToggle
4 | * @requires foundation.util.mediaQuery
5 | */
6 | !function($, Foundation) {
7 |
8 | 'use strict';
9 |
10 | /**
11 | * Creates a new instance of Tab Bar.
12 | * @class
13 | * @fires ResponsiveToggle#init
14 | * @param {jQuery} element - jQuery object to attach tab bar functionality to.
15 | * @param {Object} options - Overrides to the default plugin settings.
16 | */
17 | function ResponsiveToggle(element, options) {
18 | this.$element = $(element);
19 | this.options = $.extend({}, ResponsiveToggle.defaults, this.$element.data(), options);
20 |
21 | this._init();
22 | this._events();
23 |
24 | Foundation.registerPlugin(this);
25 | }
26 |
27 | ResponsiveToggle.defaults = {
28 | /**
29 | * The breakpoint after which the menu is always shown, and the tab bar is hidden.
30 | * @option
31 | * @example 'medium'
32 | */
33 | hideFor: 'medium'
34 | };
35 |
36 | /**
37 | * Initializes the tab bar by finding the target element, toggling element, and running update().
38 | * @function
39 | * @private
40 | */
41 | ResponsiveToggle.prototype._init = function() {
42 | var targetID = this.$element.data('responsive-toggle');
43 | if (!targetID) {
44 | console.error('Your tab bar needs an ID of a Menu as the value of data-tab-bar.');
45 | }
46 |
47 | this.$targetMenu = $('#'+targetID);
48 | this.$toggler = this.$element.find('[data-toggle]');
49 |
50 | this._update();
51 | };
52 |
53 | /**
54 | * Adds necessary event handlers for the tab bar to work.
55 | * @function
56 | * @private
57 | */
58 | ResponsiveToggle.prototype._events = function() {
59 | var _this = this;
60 |
61 | $(window).on('changed.zf.mediaquery', this._update.bind(this));
62 |
63 | this.$toggler.on('click.zf.responsiveToggle', this.toggleMenu.bind(this));
64 | };
65 |
66 | /**
67 | * Checks the current media query to determine if the tab bar should be visible or hidden.
68 | * @function
69 | * @private
70 | */
71 | ResponsiveToggle.prototype._update = function() {
72 | // Mobile
73 | if (!Foundation.MediaQuery.atLeast(this.options.hideFor)) {
74 | this.$element.show();
75 | this.$targetMenu.hide();
76 | }
77 |
78 | // Desktop
79 | else {
80 | this.$element.hide();
81 | this.$targetMenu.show();
82 | }
83 | };
84 |
85 | /**
86 | * Toggles the element attached to the tab bar. The toggle only happens if the screen is small enough to allow it.
87 | * @function
88 | * @fires ResponsiveToggle#toggled
89 | */
90 | ResponsiveToggle.prototype.toggleMenu = function() {
91 | if (!Foundation.MediaQuery.atLeast(this.options.hideFor)) {
92 | this.$targetMenu.toggle(0);
93 |
94 | /**
95 | * Fires when the element attached to the tab bar toggles.
96 | * @event ResponsiveToggle#toggled
97 | */
98 | this.$element.trigger('toggled.zf.responsiveToggle');
99 | }
100 | };
101 | ResponsiveToggle.prototype.destroy = function(){
102 | //TODO this...
103 | };
104 | Foundation.plugin(ResponsiveToggle, 'ResponsiveToggle');
105 |
106 | }(jQuery, Foundation);
107 |
--------------------------------------------------------------------------------
/docs/pages/button-group.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Button Group
3 | description: Button groups are containers for related action items. They're great when you need to display a group of actions in a bar. These build off the button styles and work perfectly with the grid.
4 | sass: scss/components/_button-group.scss
5 | tags:
6 | - split button
7 | ---
8 |
9 | ## Basics
10 |
11 | Add the `.button-group` class to a container, and inside it place any number of buttons. The buttons are separated by a small border.
12 |
13 | ```html_example
14 |
19 | ```
20 |
21 | ---
22 |
23 | ## Sizing
24 |
25 | Button groups can be sized with the same classes as standard buttons: `.tiny`, `.small`, and `.large`.
26 |
27 | ```html_example
28 |
33 | ```
34 |
35 | ---
36 |
37 | ## Coloring
38 |
39 | Buttons within a button group can be colored individually with the `.secondary`, `.success`, `.warning`, and `.alert` classes.
40 |
41 | ```html_example
42 |
48 | ```
49 |
50 | The entire group can also be colored using the same classes.
51 |
52 | ```html_example
53 |
59 | ```
60 |
61 | ---
62 |
63 | ## Even-width Group
64 |
65 | Add the `.expanded` class to the container to make a full-width button group. Each item will automatically size itself based on how many buttons there are, up to a maximum of six.
66 |
67 | ```html_example
68 |
73 | ```
74 |
75 | ---
76 |
77 | ## Stacking
78 |
79 | A button group can be made vertical with the `.stacked` class. Or, you can use `.stacked-for-small` to only stack a button group on small screens.
80 |
81 | ```html_example
82 |
89 | ```
90 |
91 | ---
92 |
93 | ## Split Buttons
94 |
95 | To build a split button, just create a button group with two buttons.
96 |
97 | To create a button with only an arrow, add the class `.arrow-only`. Note that the button still needs a label for screen readers, which can be embedded inside the button with a `.show-for-sr` element. In the example below, an assistive device will read the arrow button as "Show menu".
98 |
99 | ```html_example
100 |
106 | ```
107 |
--------------------------------------------------------------------------------
/docs/partials/navigation.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
6 |
7 |
61 |
62 |
63 |
--------------------------------------------------------------------------------
/package.js:
--------------------------------------------------------------------------------
1 | Package.describe({
2 | name: 'zurb:foundation-sites',
3 | summary: 'Foundation 6 - The most advanced responsive front-end framework in the world.',
4 | version: '6.0.6',
5 | git: 'https://github.com/zurb/foundation-sites.git',
6 | documentation: 'meteor-README.md'
7 | });
8 |
9 | Npm.depends({
10 | 'motion-ui': '1.1.0'
11 | });
12 |
13 | Package.onUse(function(api) {
14 | api.versionsFrom('1.2.1');
15 | api.imply('fourseven:scss@3.4.1');
16 | api.use(['ecmascript', 'jquery', 'fourseven:scss@3.4.1'], 'client');
17 | api.addFiles('.npm/package/node_modules/motion-ui/dist/motion-ui.css', 'client');
18 | api.addFiles('.npm/package/node_modules/motion-ui/dist/motion-ui.js', 'client');
19 | api.addFiles('dist/foundation.js', 'client');
20 | api.addFiles([
21 |
22 | 'scss/foundation.scss',
23 | 'scss/_global.scss',
24 | 'scss/settings/_settings.scss',
25 |
26 | 'scss/components/_accordion-menu.scss',
27 | 'scss/components/_accordion.scss',
28 | 'scss/components/_badge.scss',
29 | 'scss/components/_breadcrumbs.scss',
30 | 'scss/components/_button-group.scss',
31 | 'scss/components/_button.scss',
32 | 'scss/components/_callout.scss',
33 | 'scss/components/_close-button.scss',
34 | 'scss/components/_drilldown.scss',
35 | 'scss/components/_dropdown-menu.scss',
36 | 'scss/components/_dropdown.scss',
37 | 'scss/components/_flex-video.scss',
38 | 'scss/components/_float.scss',
39 | 'scss/components/_label.scss',
40 | 'scss/components/_media-object.scss',
41 | 'scss/components/_menu.scss',
42 | 'scss/components/_off-canvas.scss',
43 | 'scss/components/_orbit.scss',
44 | 'scss/components/_pagination.scss',
45 | 'scss/components/_progress-bar.scss',
46 | 'scss/components/_reveal.scss',
47 | 'scss/components/_slider.scss',
48 | 'scss/components/_sticky.scss',
49 | 'scss/components/_switch.scss',
50 | 'scss/components/_table.scss',
51 | 'scss/components/_tabs.scss',
52 | 'scss/components/_thumbnail.scss',
53 | 'scss/components/_title-bar.scss',
54 | 'scss/components/_tooltip.scss',
55 | 'scss/components/_top-bar.scss',
56 | 'scss/components/_visibility.scss',
57 |
58 | 'scss/forms/_checkbox.scss',
59 | 'scss/forms/_error.scss',
60 | 'scss/forms/_fieldset.scss',
61 | 'scss/forms/_forms.scss',
62 | 'scss/forms/_help-text.scss',
63 | 'scss/forms/_input-group.scss',
64 | 'scss/forms/_label.scss',
65 | 'scss/forms/_select.scss',
66 | 'scss/forms/_text.scss',
67 |
68 | 'scss/grid/_classes.scss',
69 | 'scss/grid/_column.scss',
70 | 'scss/grid/_flex-grid.scss',
71 | 'scss/grid/_grid.scss',
72 | 'scss/grid/_gutter.scss',
73 | 'scss/grid/_layout.scss',
74 | 'scss/grid/_position.scss',
75 | 'scss/grid/_row.scss',
76 | 'scss/grid/_size.scss',
77 |
78 | 'scss/typography/_alignment.scss',
79 | 'scss/typography/_base.scss',
80 | 'scss/typography/_helpers.scss',
81 | 'scss/typography/_print.scss',
82 | 'scss/typography/_typography.scss',
83 |
84 | 'scss/util/_breakpoint.scss',
85 | 'scss/util/_color.scss',
86 | 'scss/util/_mixins.scss',
87 | 'scss/util/_selector.scss',
88 | 'scss/util/_unit.scss',
89 | 'scss/util/_util.scss',
90 | 'scss/util/_value.scss'
91 |
92 | ], 'client', {isImport: true});
93 | });
94 |
--------------------------------------------------------------------------------
/docs/pages/installation.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Installation
3 | description: There are many ways to install Foundation, but if you're just getting started, we have a few suggestions.
4 | ---
5 |
6 | ## Yeti Launch
7 |
8 | Yeti Launch is our Mac app for quickly spinning up blank projects for any of the three Foundation frameworks. If you're just getting started with Foundation, we recommend downloading Yeti Launch to get going right away.
9 |
10 |
Download Yeti Launch
11 |
12 | ### Command-Line Tool
13 |
14 | Not a fan of GUIs? The Node-powered Foundation CLI can install the same template projects for you. Install it with npm:
15 |
16 | ```bash
17 | npm install --global foundation-cli
18 | ```
19 |
20 |
21 |
If you already have the Foundation 5 CLI on your machine, you will only be able to access one of the commands, depending on how your command line environment is configured.
22 |
23 |
If you want to remove the old CLI, run gem uninstall foundation. After testing this new CLI, if you want to go back to the old CLI, run npm uninstall foundation-cli --global.
24 |
25 |
26 | Once you've installed the CLI, use the `new` command to start making a new project:
27 |
28 | ```bash
29 | foundation new
30 | ```
31 |
32 | ---
33 |
34 | ## CSS Download
35 |
36 | If you aren't into Sass, we have a starter template with compiled CSS and JavaScript, as well as a starting `index.html` file for you to hack on. Just unzip and get coding!
37 |
38 |
Download CSS Version
39 |
40 | ---
41 |
42 | ## CDN Links
43 |
44 | The folks at [jsDelivr](https://www.jsdelivr.com) host the compressed Foundation CSS and JavaScript for us. Just drop one of these `
52 | ```
53 |
54 | ---
55 |
56 | ## Package Managers
57 |
58 | Foundation is available on npm, Bower, Meteor, and Composer. The package includes all of the source Sass and JavaScript files, as well as compiled CSS and JavaScript, in uncompressed and compressed flavors.
59 |
60 | - npm: `npm install foundation-sites`
61 | - Bower: `bower install foundation-sites`
62 | - Meteor: `meteor add zurb:foundation-sites`
63 | - Composer: `php composer.phar require zurb/foundation`
64 |
65 | ### Package Contents
66 |
67 | Here's what comes in the package.
68 |
69 | - `scss/`: Source Sass files. Use this folder as a load path in Sass.
70 | - `js/`: Source JavaScript files. If you're using a build system, make sure `foundation.core.js` is loaded first.
71 | - `dist/`: Compiled files.
72 | - `css/`: Compiled CSS files. Includes minified and unminified files.
73 | - `js/`: Concatenated JavaScript files. Includes minified and unminified files.
74 |
75 | ---
76 |
77 | ## Other Integrations
78 |
79 | The Foundation community has helped us integrate the framework into Rails, WordPress, Django, and more. Head to our [resources page](http://foundation.zurb.com/sites/resources) to find even more ways to use Foundation.
80 |
--------------------------------------------------------------------------------
/scss/grid/_classes.scss:
--------------------------------------------------------------------------------
1 | // Foundation for Sites by ZURB
2 | // foundation.zurb.com
3 | // Licensed under MIT Open Source
4 |
5 | ////
6 | /// @group grid
7 | ////
8 |
9 | /// Outputs CSS classes for the grid.
10 | /// @access private
11 | @mixin foundation-grid(
12 | $row: 'row',
13 | $column: 'column',
14 | $column-row: 'column-row',
15 | $push: 'push',
16 | $pull: 'pull',
17 | $center: 'centered',
18 | $uncenter: 'uncentered',
19 | $collapse: 'collapse',
20 | $uncollapse: 'uncollapse',
21 | $offset: 'offset',
22 | $end: 'end',
23 | $expanded: 'expanded'
24 | ) {
25 | // Row
26 | .#{$row} {
27 | @include grid-row;
28 |
29 | // Collapsing
30 | &.#{$collapse} {
31 | > .#{$column} { @include grid-col-collapse; }
32 | }
33 |
34 | // Nesting
35 | & & {
36 | @include grid-row($behavior: nest, $cf: false);
37 |
38 | &.#{$collapse} {
39 | @include grid-row($behavior: nest collapse, $cf: false);
40 | }
41 | }
42 |
43 | // Expanded (full-width) row
44 | &.#{$expanded} {
45 | max-width: none;
46 | }
47 | }
48 |
49 | // Column
50 | .#{$column} {
51 | @include grid-col;
52 |
53 | @if $grid-column-align-edge {
54 | &.#{$end} {
55 | @include grid-col-end;
56 | }
57 | }
58 | }
59 |
60 | // Column row
61 | // The double .row class is needed to bump up the specificity
62 | .#{$column}.#{$row}.#{$row} {
63 | float: none;
64 |
65 | // To properly nest a column row, padding and margin is removed
66 | .#{$row} & {
67 | padding-left: 0;
68 | padding-right: 0;
69 | margin-left: 0;
70 | margin-right: 0;
71 | }
72 | }
73 |
74 | @include -zf-each-breakpoint {
75 | @for $i from 1 through $grid-column-count {
76 | // Column width
77 | .#{$-zf-size}-#{$i} {
78 | @include grid-col-size($i);
79 | }
80 |
81 | // Source ordering
82 | @if $i < $grid-column-count {
83 | .#{$-zf-size}-#{$push}-#{$i} {
84 | @include grid-col-pos($i);
85 | }
86 |
87 | .#{$-zf-size}-#{$pull}-#{$i} {
88 | @include grid-col-pos(-$i);
89 | }
90 | }
91 |
92 | // Offsets
93 | $o: $i - 1;
94 |
95 | .#{$-zf-size}-#{$offset}-#{$o} {
96 | @include grid-col-off($o);
97 | }
98 | }
99 |
100 | // Block grid
101 | @for $i from 1 through $block-grid-max {
102 | .#{$-zf-size}-up-#{$i} {
103 | @include grid-layout($i);
104 | }
105 | }
106 |
107 | // Responsive collapsing
108 | &.#{$-zf-size}-#{$collapse} {
109 | > .#{$column} { @include grid-col-collapse; }
110 | }
111 |
112 | &.#{$-zf-size}-#{$uncollapse} {
113 | > .#{$column} { @include grid-col-uncollapse; }
114 | }
115 |
116 | // Positioning
117 | .#{$-zf-size}-#{$center} {
118 | @include grid-col-pos(center);
119 | }
120 |
121 | // Gutter adjustment
122 | .#{$-zf-size}-#{$uncenter},
123 | .#{$-zf-size}-#{$push}-0,
124 | .#{$-zf-size}-#{$pull}-0 {
125 | @include grid-col-unpos;
126 | }
127 | }
128 |
129 | @if $column == 'column' {
130 | .columns {
131 | // scss-lint:disable PlaceholderInExtend
132 | @extend .column;
133 | }
134 | }
135 | }
136 |
--------------------------------------------------------------------------------
/scss/components/_accordion.scss:
--------------------------------------------------------------------------------
1 | // Foundation for Sites by ZURB
2 | // foundation.zurb.com
3 | // Licensed under MIT Open Source
4 |
5 | ////
6 | /// @group accordion
7 | ////
8 |
9 | /// Default background color of an accordion group.
10 | /// @type Color
11 | $accordion-background: $white !default;
12 |
13 | /// If `true`, adds plus and minus icons to the side of each accordion title.
14 | /// @type Boolean
15 | $accordion-plusminus: true !default;
16 |
17 | /// Default text color for items in a Menu.
18 | /// @type Color
19 | $accordion-item-color: foreground($accordion-background, $primary-color) !default;
20 |
21 | /// Default background color on hover for items in a Menu.
22 | /// @type Color
23 | $accordion-item-background-hover: $light-gray !default;
24 |
25 | /// Default padding of an accordion item.
26 | /// @type Number | List
27 | $accordion-item-padding: 1.25rem 1rem !default;
28 |
29 | /// Default background color of tab content.
30 | /// @type Color
31 | $accordion-content-background: $white !default;
32 |
33 | /// Default border color of tab content.
34 | /// @type Color
35 | $accordion-content-border: 1px solid $light-gray !default;
36 |
37 | /// Default text color of tab content.
38 | /// @type Color
39 | $accordion-content-color: foreground($accordion-background, $primary-color) !default;
40 |
41 | /// Default padding for tab content.
42 | /// @type Number | List
43 | $accordion-content-padding: 1rem !default;
44 |
45 | /// Adds styles for an accordion container. Apply this to the same element that gets `data-accordion`.
46 | @mixin accordion-container {
47 | list-style-type: none;
48 | background: $accordion-background;
49 | border: $accordion-content-border;
50 | border-radius: $global-radius;
51 | margin-#{$global-left}: 0;
52 | }
53 |
54 | /// Adds styles for the title of an accordion item. Apply this to the link within an accordion item.
55 | @mixin accordion-title {
56 | display: block;
57 | padding: $accordion-item-padding;
58 | line-height: 1;
59 | font-size: rem-calc(12);
60 | color: $accordion-item-color;
61 | position: relative;
62 | border-bottom: $accordion-content-border;
63 |
64 | &:hover,
65 | &:focus {
66 | background-color: $accordion-item-background-hover;
67 | }
68 |
69 | // Remove the border on the last title
70 | :last-child > & {
71 | border-bottom-width: 0;
72 | }
73 |
74 | @if $accordion-plusminus {
75 | &::before {
76 | content: '+';
77 | position: absolute;
78 | #{$global-right}: 1rem;
79 | top: 50%;
80 | margin-top: -0.5rem;
81 | }
82 |
83 | .is-active > &::before {
84 | content: '–';
85 | }
86 | }
87 | }
88 |
89 | /// Adds styles for accordion content. Apply this to the content pane below an accordion item's title.
90 | @mixin accordion-content {
91 | padding: $accordion-content-padding;
92 | display: none;
93 | border-bottom: $accordion-content-border;
94 | background-color: $accordion-content-background;
95 | }
96 |
97 | @mixin foundation-accordion {
98 | .accordion {
99 | @include accordion-container;
100 | }
101 |
102 | .accordion-item {
103 | // This class doesn't need styles!
104 | }
105 |
106 | .accordion-title {
107 | @include accordion-title;
108 | }
109 |
110 | .accordion-content {
111 | @include accordion-content;
112 | }
113 | }
114 |
--------------------------------------------------------------------------------
/docs/pages/global.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Global Styles
3 | description: Our global CSS includes helpful resets to ensure consistent styling across browsers.
4 | sass: scss/_global.scss
5 | ---
6 |
7 | ## Font Sizing
8 |
9 | The default font size is set to 100% of the browser style sheet, usually 16 pixels. This ensures compatibility with browser-based text zoom or user-set defaults.
10 |
11 | Since the typical default browser font size is 16 pixels, that makes the calculation for grid size. If you want your base font size to be different and not have it affect the grid breakpoints, set `$rem-base` to `$global-font-size` and make sure `$global-font-size` is a pixel value.
12 |
13 | ---
14 |
15 | ## Colors
16 |
17 | All interactive elements in Foundation, such as links and buttons, use the same color. The default shade of blue you see all over Foundation comes from the `$primary-color` Sass variable.
18 |
19 | Many components can also be colored with four other colors: secondary, alert, success, and warning. Use these colors to give more context to UI elements and actions.
20 |
21 |
22 |
28 |
34 |
40 |
46 |
52 |
58 |
59 |
60 |
61 |
Light Gray
62 |
63 |
64 |
65 |
66 |
67 |
Medium Gray
68 |
69 |
70 |
76 |
82 |
83 |
84 |
85 | ---
86 |
87 | To color a component, add the name of the color as a class.
88 |
89 | ```html_example
90 |
Primary Action
91 |
Secondary Action
92 | ```
93 |
94 | ---
95 |
96 | ```html_example
97 |
98 |
Created a new folder.
99 |
100 |
101 |
Error fetching stick.
102 |
103 | ```
104 |
--------------------------------------------------------------------------------
/scss/grid/_column.scss:
--------------------------------------------------------------------------------
1 | // Foundation for Sites by ZURB
2 | // foundation.zurb.com
3 | // Licensed under MIT Open Source
4 |
5 | ////
6 | /// @group grid
7 | ////
8 |
9 | /// Calculates the width of a column based on a number of factors.
10 | ///
11 | /// @param {Number|List} $columns
12 | /// Width of the column. Accepts multiple values:
13 | /// - A percentage value will make the column that exact size.
14 | /// - A single digit will make the column span that number of columns wide, taking into account the column count of the parent row.
15 | /// - A string of the format "x of y" will make a column that is *x* columns wide, assuming *y* total columns for the parent.
16 | ///
17 | /// @returns {Number} A calculated percentage value.
18 | @function grid-column($columns) {
19 | $width: 0%;
20 |
21 | // Parsing percents, decimals, and column counts
22 | @if type-of($columns) == 'number' {
23 | @if unit($columns) == '%' {
24 | $width: $columns;
25 | }
26 | @else if $columns < 1 {
27 | $width: percentage($columns);
28 | }
29 | @else {
30 | $width: percentage($columns / $grid-column-count);
31 | }
32 | }
33 |
34 | // Parsing "n of n" expressions
35 | @else if type-of($columns) == 'list' {
36 | @if length($columns) != 3 {
37 | @error 'Wrong syntax for grid-column(). Use the format "n of n".';
38 | }
39 | @else {
40 | $width: percentage(nth($columns, 1) / nth($columns, 3));
41 | }
42 | }
43 |
44 | // Anything else is incorrect
45 | @else {
46 | @error 'Wrong syntax for grid-column(). Use a number, decimal, percentage, or "n of n".';
47 | }
48 |
49 | @return $width;
50 | }
51 |
52 | /// Creates a grid column.
53 | ///
54 | /// @param {Mixed} $columns [$grid-column-count] - Width of the column. Refer to the `grid-column()` function to see possible values.
55 | /// @param {Number} $gutter [$grid-column-gutter] - Spacing between columns.
56 | @mixin grid-column(
57 | $columns: $grid-column-count,
58 | $gutter: $grid-column-gutter
59 | ) {
60 | $gutter: rem-calc($gutter) / 2;
61 |
62 | @include grid-column-size($columns);
63 | float: $global-left;
64 | padding-left: $gutter;
65 | padding-right: $gutter;
66 |
67 | @if $grid-column-align-edge {
68 | &:last-child:not(:first-child) {
69 | float: $global-right;
70 | }
71 | }
72 | }
73 |
74 | /// Creates a grid column row. This is the equivalent of adding `.row` and `.column` to the same element.
75 | ///
76 | /// @param {Number} $gutter [$grid-column-gutter] - Width of the gutters on either side of the column row.
77 | @mixin grid-column-row(
78 | $gutter: $grid-column-gutter
79 | ) {
80 | @include grid-row;
81 | @include grid-column($gutter: $gutter);
82 |
83 | &,
84 | &:last-child {
85 | float: none;
86 | }
87 | }
88 |
89 | /// Shorthand for `grid-column()`.
90 | /// @alias grid-column
91 | @function grid-col(
92 | $columns: $grid-column-count
93 | ) {
94 | @return grid-column($columns);
95 | }
96 |
97 | /// Shorthand for `grid-column()`.
98 | /// @alias grid-column
99 | @mixin grid-col(
100 | $columns: $grid-column-count,
101 | $gutter: $grid-column-gutter
102 | ) {
103 | @include grid-column($columns, $gutter);
104 | }
105 |
106 | /// Shorthand for `grid-column-row()`.
107 | /// @alias grid-column-row
108 | @mixin grid-col-row(
109 | $gutter: $grid-column-gutter
110 | ) {
111 | @include grid-column-row($gutter);
112 | }
113 |
--------------------------------------------------------------------------------
/docs/pages/equalizer.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Equalizer
3 | description: Equalizer makes it dead simple to give multiple items equal height.
4 | js: js/foundation.equalizer.js
5 | ---
6 |
7 | ## Basics
8 |
9 | To set up an Equalizer group, you need a container, which gets the attribute `data-equalizer`, and then a series of child elements, which get the attribute `data-equalizer-watch`. The child elements will all be resized to have the same height.
10 |
11 | ```html_example
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
Pellentesque habitant morbi tristique senectus et netus et, ante.
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 | ```
30 |
31 | ## Nesting
32 |
33 | To use one Equalizer inside another, each container needs a unique ID, assigned with the `data-equalizer` attribute. Each `data-equalizer-watch` element should then have a value that matches its parent.
34 |
35 | In the below example, the first set of Equalizer elements have the value `foo`, while the inside elements have the value `bar`.
36 |
37 | ```html
38 |
39 |
40 |
41 |
Parent panel
42 |
43 |
44 |
45 |
46 |
47 |
50 |
53 |
54 | ```
55 |
56 |
57 |
58 |
59 |
Parent panel
60 |
61 |
Pellentem, feugiat vitae, ultricies eget, tempor sit amet, ante.
62 |
63 |
64 |
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.
65 |
66 |
67 |
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.
68 |
69 |
70 |
71 |
72 |
73 |
Pellentesque habitant morbi tristique senectus et netus et, ante.
74 |
75 |
76 |
77 |
78 |
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.
79 |
80 |
81 |
82 |
--------------------------------------------------------------------------------
/docs/pages/tooltip.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Tooltips
3 | description: Tooltips? More like
Cooltips . But really though, tooltips are nifty for displaying extended information for a term or action on a page.
4 | sass: scss/components/_tooltip.scss
5 | js: js/foundation.tooltip.js
6 | ---
7 |
8 |
9 | ## Basic Tooltip
10 | By default, a tooltip appears below the the definition on hover.
11 |
12 | ```html_example
13 |
14 | The scarabaeus hung quite clear of any branches, and, if allowed to fall, would have fallen at our feet. Legrand immediately took the scythe, and cleared with it a circular space, three or four yards in diameter, just beneath the insect, and, having accomplished this, ordered Jupiter to let go the string and come down from the tree.
15 |
16 | ```
17 |
18 | ---
19 |
20 | ## Tooltip Top
21 | To get a tip-top top tooltip (lol), just add the class
top the
span tag.
22 |
23 | ```html_example
24 |
25 | ...clearing away the brambles with the
26 | scythe.
27 | At the spot thus attained a second peg was driven, and about this, as a centre, a rude circle, about four feet in diameter, described. Taking now a spade himself, and giving one to Jupiter and one to me, Legrand begged us to set about one to digging as quickly as possible.
28 |
29 | ```
30 |
31 | ---
32 |
33 | ## Tooltip Right and Left
34 |
35 | You can also position the tooltips to the right and left of the word by adding the classes `.right` or `.left` to the `
` element.
36 |
37 |
38 |
When using Foundation in right-to-left mode, "right" still means right, and "left" still means left.
39 |
43 | To speak the truth, I had no especial relish for such amusement at any time, and, at that particular moment, would most willingly have declined it; for the night was coming on, and I felt much fatigued with the exercise already taken; but I saw no mode of escape, and was fearful of disturbing my poor friend's equanimity by a refusal. Could I have depended, indeed, upon Jupiter's aid, I would have had no hesitation in attempting to get the
44 | lunatic
45 | home by force; but I was too well assured of the old negro's disposition, to hope that he would assist me, under any circumstances, in a personal contest with his master. I made no doubt that the latter had been infected with some of the innumerable Southern superstitions about money buried, and that his phantasy had received confirmation by the finding of the scarabaeus, or, perhaps, by Jupiter's obstinacy in maintaining it to be "a bug of real gold." A mind disposed to lunacy would readily be led away by such suggestions -especially if chiming in with favorite preconceived ideas -and then I called to mind the poor fellow's speech about the beetle's being "the
46 | index
47 | of his fortune." Upon the whole, I was sadly vexed and puzzled, but, at length, I concluded to make a virtue of necessity -to dig with a good will, and thus the sooner to convince the visionary, by ocular demonstration, of the fallacy of the opinions he entertained.
48 | ```
49 |
--------------------------------------------------------------------------------
/test/sass/_value.scss:
--------------------------------------------------------------------------------
1 | @import 'util/value';
2 |
3 | @include describe('Has Value') {
4 | @include it('returns false if the value is not falsey') {
5 | $boolean: has-value(true);
6 | $number: has-value(1px);
7 | $color: has-value(#000);
8 | $list: has-value(1px solid black);
9 |
10 | @include should(expect($boolean), to(be(true)));
11 | @include should(expect($number), to(be(true)));
12 | @include should(expect($color), to(be(true)));
13 | @include should(expect($list), to(be(true)));
14 | }
15 | @include it('returns false if the value is falsey') {
16 | $zero: has-value(0px);
17 | $null: has-value(null);
18 | $none: has-value(none);
19 | $empty: has-value(());
20 |
21 | @include should(expect($zero), to(be(false)));
22 | @include should(expect($null), to(be(false)));
23 | @include should(expect($none), to(be(false)));
24 | @include should(expect($empty), to(be(false)));
25 | }
26 | }
27 |
28 | @include describe('Get Side') {
29 | @include it('returns correct sides when given one side value') {
30 | $value: 1rem;
31 | $actual: (
32 | get-side($value, top),
33 | get-side($value, right),
34 | get-side($value, bottom),
35 | get-side($value, left),
36 | );
37 | $expected: (1rem, 1rem, 1rem, 1rem,);
38 |
39 | @include should(expect($actual), to(be($expected)));
40 | }
41 | @include it('returns correct sides when given two side values') {
42 | $value: 1rem 2rem;
43 | $actual: (
44 | get-side($value, top),
45 | get-side($value, right),
46 | get-side($value, bottom),
47 | get-side($value, left),
48 | );
49 | $expected: (1rem, 2rem, 1rem, 2rem,);
50 |
51 | @include should(expect($actual), to(be($expected)));
52 | }
53 | @include it('returns correct sides when given three side values') {
54 | $value: 1rem 2rem 3rem;
55 | $actual: (
56 | get-side($value, top),
57 | get-side($value, right),
58 | get-side($value, bottom),
59 | get-side($value, left),
60 | );
61 | $expected: (1rem, 2rem, 3rem, 2rem,);
62 |
63 | @include should(expect($actual), to(be($expected)));
64 | }
65 | @include it('returns correct sides when given four side values') {
66 | $value: 1rem 2rem 3rem 4rem;
67 | $actual: (
68 | get-side($value, top),
69 | get-side($value, right),
70 | get-side($value, bottom),
71 | get-side($value, left),
72 | );
73 | $expected: (1rem, 2rem, 3rem, 4rem,);
74 |
75 | @include should(expect($actual), to(be($expected)));
76 | }
77 | }
78 |
79 | @include describe('Get Border Value') {
80 | @include it('returns the right value of a border property') {
81 | $value: 10px dashed green;
82 | $width: get-border-value($value, width);
83 | $style: get-border-value($value, style);
84 | $color: get-border-value($value, color);
85 |
86 | @include should(expect($width), to(be(10px)));
87 | @include should(expect($style), to(be(dashed)));
88 | @include should(expect($color), to(be(green)));
89 | }
90 | @include it('returns a default value if a property is missing') {
91 | $defaultWidth: get-border-value(solid black, width);
92 | $defaultStyle: get-border-value(10px black, style);
93 | $defaultColor: get-border-value(10px solid, color);
94 |
95 | @include should(expect($defaultWidth), to(be(0)));
96 | @include should(expect($defaultStyle), to(be(solid)));
97 | @include should(expect($defaultColor), to(be(black)));
98 | }
99 | }
100 |
101 | // TODO: Add spec for pow()
102 |
--------------------------------------------------------------------------------
/docs/pages/callout.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Callout
3 | description: Callouts combine panels and alerts from Foundation 5 into one generic container component.
4 | sass: scss/components/_callout.scss
5 | tags:
6 | - panel
7 | - alert
8 | ---
9 |
10 | ## Basics
11 |
12 | A callout is just an element with a `.callout` class applied. You can put any kind of content inside.
13 |
14 | ```html_example
15 |
20 | ```
21 |
22 | ---
23 |
24 | ## Coloring
25 |
26 | Callouts can be colored using the `.secondary`, `.primary`, `.success`, `.warning`, or `.alert` classes. Links inside the callout will be tinted to match the color of the callout.
27 |
28 | ```html
29 |
34 | ```
35 |
36 |
41 |
42 |
47 |
48 |
53 |
54 |
59 |
60 |
65 |
66 | ---
67 |
68 | ## Sizing
69 |
70 | Callouts can be sized using the `.small` and `.large` classes. These will affect the padding around content to be smaller and larger respectivly.
71 |
72 | ```html_example
73 |
78 |
79 |
84 | ```
85 |
86 | ---
87 |
88 | ## Making Closable
89 |
90 | Pair the callout with the [close button](close-button.html) component and `data-closable` attribute to create a dismissable alert box.
91 |
92 |
93 |
Any element can be used as a close trigger, not just close button. Adding the attribute data-close to any element within the callout will turn it into a close trigger.
94 |
98 |
This is Important!
99 |
But when you're done reading it, click the close button in the corner to dismiss this alert.
100 |
101 | ×
102 |
103 |
2 |
--------------------------------------------------------------------------------
/docs/assets/partials/interchange-medium.html:
--------------------------------------------------------------------------------
1 | 
11 | ```
12 |
13 | 
19 | 
22 |