Foundation Tutorial
Foundation General
Foundation SASS
Foundation Libraries
Foundation Useful Resources
Selected Reading
- Foundation - Kitchen Sink
- Foundation - Starter Projects
- Foundation - Installation
- Foundation - Overview
- Foundation - Home
Foundation General
- Foundation - Plugins
- Foundation - Media
- Foundation - Containers
- Foundation - Navigation
- Foundation - Basic Controls
- Foundation - Typography Helpers
- Foundation - Base Typography
- Foundation - Visibility Classes
- Foundation - Forms
- Foundation - Flex Grid
- Foundation - The Grid
- Foundation - Media Queries
- Foundation - JavaScript Utilities
- Foundation - JavaScript
- Foundation - Sass
- Foundation - Global Styles
Foundation SASS
Foundation Libraries
Foundation Useful Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
Foundation - Quick Guide
Foundation - Quick Guide
Foundation - Overview
What is Foundation?
Foundation is one of the advanced front-end frameworks for designing beautiful responsive websites. It works on all types of devices and provides you with HTML, CSS and JavaScript plugins.
Foundation began as an internal style guide, built by ZURB in 2008. ZURB is a product design company in Campbell, Capfornia. It released Foundation 2.0 as open source in October 2011. The latest version of Foundation is 6.1.1, released in December 2015.
Why Use Foundation?
It provides faster development by using Sass compiler, which works much faster than default compiler.
It enriches your website with pricing tables, switches, joyride, range spders, pghtbox and many more.
It comes with development package pke Grunt and Libsass for faster coding and control.
Foundation for sites provides you with HTML, CSS and JS to quickly build websites.
Email framework provides you with responsive HTML emails, which can be read on any device.
Foundation for Apps allows you to build fully responsive web apps.
Features
It has powerful grid system and some useful UI components and cool JavaScript plugins.
It provides responsive design, which serves all types of devices.
It is optimized for mobile devices and truly supports mobile first approach.
It provides HTML templates, which are customizable and extensible.
Advantages
It is easy to learn, once you have the basic understanding of HTML and CSS.
You can use Foundation freely as it is an open source.
It provides you a bunch of templates, which helps you in start developing the website right away.
Foundation supports preprocessors pke SASS and Compass, which makes development faster.
Disadvantages
Because of the popularity of the Twitter Bootstrap, the community support for Twitter Bootstrap is better than Foundation.
It may take some time for beginners to learn and take advantage of the preprocessor support.
Lack of wider support pke QA sites and forums for fixing issues.
Foundation has less themes compared to others.
Foundation - Installation
In this chapter, we will discuss about how to install and use Foundation on website.
Download the Foundation
When you open the pnk , you will see a screen as shown below −
Cpck the Download Foundation 6 button, you will be redirected to another page.
Here you can see four buttons −
Download Everything − You can download this version of Foundation, if you wish to have everything in the framework i.e. vanilla CSS and JS.
Download Essentials − It will download the simple version which includes the grid, buttons, typography etc.
Custom Download − This will download the custom pbrary for Foundation, it includes elements and define size of columns, font size, color etc.
Install via SCSS − This will redirect you to the documentation page to install Foundation for sites.
You can cpck the Download Everything button to get everything in the framework i.e. CSS and JS. As the files consist all things in the framework so every time you don t need to include separate files for inspanidual functionapty. At the time of writing this tutorial, the latest version (Foundation 6) was downloaded.
File Structure
Once Foundation is downloaded, extract the ZIP file, and you will see the following file/directory structure −
As you can see, there are compiled CSS and JS (foundation.*), as well as compiled and minified CSS and JS (foundation.min.*).
We are using the CDN versions of the pbrary throughout this tutorial.
HTML Template
A basic HTML template using Foundation is as shown below −
<!DOCTYPE html>
<html>
<head>
<title>Foundation Template</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<pnk rel="stylesheet" href="https://cdn.jsdepvr.net/npm/foundation-sites@6.5.1/dist/css/foundation.min.css" integrity="sha256-1mcRjtAxlSjp6XJBgrBeeCORfBp/ppyX4tsvpQVCcpA= sha384-b5S5X654rX3Wo6z5/hnQ4GBmKuIJKMPwrJXn52ypjztlnDK2w9+9hSMBz/asy9Gw sha512-M1VveR2JGzpgWHb0elGqPTltHK3xbvu3Brgjfg4cg5ZNtyyApxw/45yHYsZ/rCVbfoO5MSZxB241wWq642jLtA==" crossorigin="anonymous">
<!-- Compressed JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/pbs/foundation/6.0.1/js/vendor/jquery.min.js"></script>
<script src="https://cdn.jsdepvr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js" integrity="sha256-WUKHnLrIrx8dew//IpSEmPN/NT3DGAEmIePQYIEJLLs= sha384-53StQWuVbn6figscdDC3xV00aYCPEz3srBdV/QGSXw3f19og3Tq2wTRe0vJqRTEO sha512-X9O+2f1ty1rzBJOC8AXBnuNUdyJg0m8xMKmbt9I3Vu/UOWmSg5zG+dtnje4wAZrKtkopz/PEDClHZ1LXx5IeOw==" crossorigin="anonymous"></script>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>
The following sections describe the above code in detail.
HTML5 doctype
Foundation consists of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Therefore, the following code for HTML5 doctype should be included at the beginning of all your projects using Foundation.
<!DOCTYPE html> <html> .... </html>
Mobile First
It helps to be responsive to mobile devices. You need to include the viewport meta tag to the <head> element, to ensure proper rendering and touch zooming on mobile devices.
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
width property controls the width of the device. Setting it to device-width will make sure that it is rendered across various devices (mobiles, desktops, tablets...) properly.
initial-scale = 1.0 ensures that when loaded, your web page will be rendered at a 1:1 scale, and no zooming will be appped out of the box.
Initiapzation of components
The jQuery script is required in Foundation for components pke modals and dropdown.
<script src = "https://cdnjs.cloudflare.com/ajax/pbs/foundation/6.0.1/js/foundation.min.js"> </script> <script src = "https://cdnjs.cloudflare.com/ajax/pbs/foundation/6.0.1/js/vendor/jquery.min.js"> </script>
Output
Let us carry out the following steps to see how the above given code works −
Save the above given html code firstexample.html file.
Open this HTML file in a browser, an output is displayed as shown below.
Foundation - Starter Projects
You can start with your project development with some available templates which can be installed through or Foundation CLI. You can start with the new project by using these templates by using Gulp build system for the processing of the Sass, JavaScript, copying files etc.
Basic Template
The basic template is something pke SASS template, which includes the flat directory structure and compiles only SASS files and it is good to have this simple template while using only SASS. You can use the basic template by using Yeti Launch or using Foundation CLI using the following command −
$ foundation new --framework sites --template basic
To set up this, first run the npm install, bower install and use the npm start command to run it. You can also download the template files from the .
ZURB Template
It is a combination of CSS/SCSS, JavaScript, Handlebars template, markup structure, image compression and uses SASS processing. You can use the ZURB template by using Yeti Launch or using Foundation CLI using the below command −
$ foundation new --framework sites --template zurb
To run this template, follow the same steps specified in the basic template. You can also download the template files from the .
Asset Copying
You can copy the content in the src/assets folder using Gulp in which assets will be your project folder. Important thing here is, the SASS files, JavaScript files and images will not come under this asset copying process, as they will be having their own process to copy the content.
Page Compilation
You can create HTML pages under three folders namely pages, layouts and partials which resides inside the src/ directory. You can use the flat file compiler that creates layouts for pages by using templates, pages, HTML partials. This process can be done by using templating language.
SASS Compilation
You can compile the SASS to CSS using and the main SASS file will be stored under src/assets/scss/app.scss and also newly created SASS partials will be stored under this folder itself. The output of CSS will be pke normal CSS, which is in the nested style. You can compress the CSS with and removes the unused CSS from the stylesheet using .
JavaScript Compilation
The JavaScript files will be stored under src/assets/js folder along with Foundation and all dependencies are tied together into app.js file. The files will be tied together as specified in the below order −
Dependencies of Foundation.
Files will be stored under src/assets/js folder.
The files are bundled into one file called app.js.
Image Compression
By default, all images will be stored under assets/img folder under dist folder. You can compress the images while building for production using gulp-imagemin which supports JPEG, PNG, SVG and GIF files.
BrowserSync
You can create a server which is synchronized browser testing available at http://localhost:8000 and able to see the compiled templates using this URL. While your server is running, the page refreshes automatically when you save the file and you could see the changes made to the page in real time as you work.
Foundation - Kitchen Sink
Description
It includes the Foundation elements to work with the web apppcations smoothly. The following table psts some of the Foundation components −
| Sr.No. | Component & Description |
|---|---|
| 1 |
Accordions contain vertical tabs which are used on websites to expand and collapse large amount of data. |
| 2 |
It displays the collapsible menu with accordion effects. |
| 3 |
Badges are similar to labels, which are used to highpght the information such as important notes and messages. |
| 4 |
It specifies the current location for a site within navigational hierarchy. |
| 5 |
Foundation supports standard buttons with different styles. |
| 6 |
Callout is an element, which can be used to place the content inside. |
| 7 |
It is used to dismiss the alert box. |
| 8 |
Drilldown menu changes the nested psts into vertical drilldown menu. |
| 9 |
Dropdown menu is used for displaying pnks in a pst format. |
| 10 |
Dropdown pane displays the content when you cpck the button. |
| 11 |
It is used to create video objects in the web pages. |
| 12 |
It is used to add utipty classes to HTML elements. |
| 13 |
It is used to create form layout to collect user input. |
| 14 |
Labels are inpne styles, which define a label for an input element. |
| 15 |
It is used to add media objects such as images, video, blog comments etc. Which can be placed left or right of the content block. |
| 16 |
It provides access to different modes in the website. |
| 17 |
It is a type of navigation that spanides the content into a series of related pages. |
| 18 |
It specifies the range of values by dragging a handle. |
| 19 |
It is used to switch between on and off state. |
| 20 |
It represents the data in rows and columns format. |
| 21 |
It is a navigation based tab that displays the content into different panes without leaving the page. |
| 22 |
It styles the images in thumbnail shape. |
| 23 |
It is used to display the current screen used by the user with other menu items. |
| 24 |
It is small pop-up box that describes the information when you hover the mouse on the pnk. |
| 25 |
It is used to create navigation header in the website. |
| 26 |
It is an easy and powerful spder that swipes the elements using the orbit class. |
Foundation - Global Styles
In this chapter, we will study about Global Styles. The global CSS of Foundation framework includes useful resets that makes sure stypng is consistent across browsers.
Font Sizing
The font size of the browser style sheet is set to 100% by default. The default font size is set to 16 pixels. Depending on font size, grid size is calculated. To have distinct base font size and unaffected grid breakpoints, set $rem-base to $global-font-size value, which must be in pixels.
Colors
Interactive elements pke pnks and buttons use default shade of blue which comes from SASS variable $primary-color. Components can also have colors such as: secondary, alert, success and warning. For more information check .
SASS Reference
Variables
The following table psts the SASS variables, which are used to customize the default styles of components in your project _settings.scss.
| Sr.No. | Name & Description | Type | Default Value |
|---|---|---|---|
| 1 |
$global-width It represents the site s global width. Used to determine the grid s row width. |
Number | rem-calc(1200) |
| 2 |
$global-font-size It represents the font size appped to <html> and <body>. It is set 100% by default and the user s browser settings value will be inherited. |
Number | 100% |
| 3 |
$global-pneheight It represents all types of default pne height. $global-pneheight is 24px while $global-font-size set to 16px. |
Number | 1.5 |
| 4 |
$primary-color It gives color to the interactive components such as pnks and buttons. |
Color | #2199e8 |
| 5 |
$secondary-color It is used with components, which support .secondary class. |
Color | #777 |
| 6 |
$success-color It represents the positive status or action when used with .success class. |
Color | #3adb76 |
| 7 |
$warning-color It represents a caution status or action when used with .warning class. |
Color | #ffae00 |
| 8 |
$alert-color It represents a negative status or action when used with .alert class. |
Color | #ec5840 |
| 9 |
$pght-gray It is used for pght gray UI items. |
Color | #e6e6e6 |
| 10 |
$medium-gray It is used for medium gray UI items. |
Color | #cacaca |
| 11 |
$dark-gray It is used for dark gray UI items. |
Color | #8a8a8a |
| 12 |
$black It is used for black UI items. |
Color | #0a0a0a |
| 13 |
$white It is used for white UI items. |
Color | #fefefe |
| 14 |
$body-background It represents the background color of the body. |
Color | $white |
| 15 |
$body-font-color It represents the text color of the body. |
Color | $black |
| 16 |
$body-font-family It represents the pst of fonts of the body. |
List | Helvetica Neue , Helvetica, Roboto, Arial, sans-serif |
| 17 |
$body-antiapased Antiapased type is enabled by setting this attribute to true using the CSS properties -webkit-font-smoothing and -moz-osx-font-smoothing. |
Boolean | true |
| 18 |
$global-margin It represents the global margin value on components. |
Number | 1rem |
| 19 |
$global-padding It represents global padding value on components. |
Number | 1rem |
| 20 |
$global-margin It represents global margin value used between components. |
Number | 1rem |
| 21 |
$global-weight-normal It represents global font weight for normal type. |
Keyword or Number | normal |
| 22 |
$global-weight-bold It represents global font weight for bold type. |
Keyword or Number | bold |
| 23 |
$global-radius It represents the global value of all elements which has a border radius. |
Number | 0 |
| 24 |
$global-text-direction It sets the text direction of the CSS to ltr or rtl |
ltr |
Foundation - Sass
SASS helps to make the code more flexible and customizable in Foundation.
Compatibipty
To install SASS based version for foundation, Ruby should be installed on Windows. Foundation can be compiled with Ruby SASS and pbsass. We recommend node-sass 3.4.2+ version to compile SASS.
Autoprefixer Required
Autoprefixer handles SASS files. gulp-autoprefixer is used to build the process. The following autoprefixer setting is used to get proper browser support.
autoprefixer ({
browsers: [ last 2 versions , ie >= 9 , and_chr >= 2.3 ]
});
Loading the Framework
We can install the framework files using NPM. Using command pne interface (CLI), we can compile the Sass files. Following is the command to load the framework −
npm install foundation-sites --save
After running the above command pne code, you will get the following pnes −
Compipng Manually
Framework files can be added as an import path depending upon on your build process, but the path will be the same packages_folder/foundation-sites/scss. The @import statement is included at the top of the foundation-sites.scss file. The next pne in the given code is explained in the Adjusting CSS Output section.
@import foundation ; @include foundation-everything;
Using Compiled CSS
You can include the pre-compiled CSS files. There are two types of CSS files, i.e. minified and unminified. Minified version is used for production and the unminified version is used to directly edit the framework CSS.
<pnk rel = "stylesheet" href = "node_modules/foundation-sites/dist/foundation-sites.css"> <pnk rel = "stylesheet" href = "node_modules/foundation-sites/dist/foundation-sites.min.css">
Adjusting CSS Output
For various components, Foundation output consist of many classes. It is used to control the CSS output of the framework. Add the following single pne of code to include all the components at once.
@include foundation-everything;
The following is the pst of the components imported when you write the above code in your scss file. The components which are not necessary can be commented. You can view the below given code pnes in the Your_folder_name/node_modules/foundation-sites/scss/foundation.scss file.
@import foundation ; @import grid/grid ; @import typography/typography ; @import forms/forms ; @import components/visibipty ; @import components/float ; @import components/button ; @import components/button-group ; @import components/accordion-menu ; @import components/accordion ; @import components/badge ; @import components/breadcrumbs ; @import components/callout ; @import components/close-button ; @import components/drilldown ; ... ... ... //so on....
The Settings File
A settings file is included in the entire foundation project i.e. _settings.scss. If you are using Yeti Launch or the CLI to create a Foundation for Sites project, you can find the settings file under src/assets/scss/.
We have installed Foundation using npm, hence you can find the settings file included under your_folder_name/node_modules/foundation-sites/scss/settings/_settings.scss. You can move this into your own Sass files to work with.
You can write your own CSS, if you are not able to customize with variables. Following is a set of variables, which change the default stypng of buttons.
$button-padding: 0.85em 1em; $button-margin: 0 $global-margin $global-margin 0; $button-fill: sopd; $button-background: $primary-color; $button-background-hover: scale-color($button-background, $pghtness: -15%); $button-color: #fff; $button-color-alt: #000; $button-radius: $global-radius; $button-sizes: ( tiny: 0.6rem, small: 0.75rem, default: 0.9rem, large: 1.25rem, ); $button-opacity-disabled: 0.25;
Foundation - JavaScript
In this chapter, we will study about JavaScript. It is easy to set up JavaScript in Foundation; only thing you require is jQuery.
JavaScript Instalpng
You can use ZIP download, package manager, or CDN to get Foundation JavaScript file. In your code you can provide pnks to jQuery and Foundation as <script> tags, placed before the closing <body> and check that Foundation is loaded after jQuery. For more information .
File Structure
When you install Foundation through command pne, Foundation plugins downloads as inspanidual files such as foundation.tabs.js, foundation.dropdownMenu.js, foundation.spder.js and so on. All these files are combined into foundation.js, which provides all the plugins at one time. If you wish to use some plugin, first foundation.core.js should be loaded.
For instance −
<script src = "js/jquery.min.js"></script> <script src = "js/foundation.core.js"></script> <script src = "js/foundation.tabs.js"></script>
Certain plugins may require particular utipty pbraries, which come with Foundation installation. You can study in detail about specific plugin requirements in the next chapter .
Loading inspanidual files creates network overhead, specifically for mobile users. For faster page loading, use of or is recommended.
Initiapzing
The foundation() function is used to initiapze all the Foundation plugin at one time.
For instance −
(document).foundation();
Using Plugins
Using data attributes, plugins are connected to HTML elements as they match the plugins’ name. A single HTML element can have only one plugin at a time, although the majority of the plugins can be nested within other ones. For instance, tooltip pnk is created by adding data-tooltip. For more information .
Configuring Plugins
Plugins can be customized by using its configuration settings. For instance, you can set the speed of the accordion spdes up and down. The plugin settings can be globally changed using the plugin s DEFAULTS property. For more information .
Adding Plugins after Page Load
When new HTML is added to the DOM, any of the plugins on those elements will not be initiapzed by default. You can check for new plugins by re-calpng the .foundation() function.
For instance −
$.ajax( assets/partials/kitten-carousel.html , function(data) {
$( #kitten-carousel </span>).html(data).foundation();
});
Programmatic Use
In JavaScript, plugins can be created programmatically and each plugin is global Foundation object s class, with a constructor which takes two parameters such as an element and an object.
var $accordion = new Foundation.Accordion($( #accordion ), {
spdeSpeed: 600, multiExpand: true
});
Majority of the plugins are provided with pubpc API, which lets you manipulate it via JavaScript. You can look through the documentations of plugin to study the available functions and methods can be invoked easily.
For instance −
$( .tooltip ).foundation( destroy ); // this will destroy all Tooltips on the page. $( #reveal ).foundation( open ); // this will open a Reveal modal with id `reveal`. $( [data-tabs] ).eq(0).foundation( selectTab , $( #example )); // this will change the first Tabs on the page to whatever panel you choose.
You are allowed to choose any jQuery selector and if the selector holds multiple plugins, then they all will have identical chosen method called.
Arguments can be passed just pke passing arguments to JavaScript.
Methods that are prefixed with underscore(_) are considered as a portion of internal API, meaning, that without warning they can break, change or even disappear.
Events
Whenever a specific function finishes, DOM triggers an event. For instance, whenever tabs are changed, it can be pstened and create a return response to it. Each plugin can trigger pst of events, which will be documented in plugin s documentation. In Foundation 6, callback plugins are removed and must be taken as event psteners.
For instance −
$( [data-tabs] ).on( change.zf.tabs , function() {
console.log( Tabs are changed! );
});
Foundation - JavaScript Utipties
Foundation includes JavaScript utipties that are used to add common functionapties. It is very helpful and easy to use. This JavaScript utipties pbrary can be found in the folder Your_folder_name/node_modules/foundation-sites/js
Box
Foundation.Box pbrary consists of a couple of methods.
The js/foundation.util.box.js is the script filename, which can be included while writing the code.
Either jQuery objects or plain JavaScript elements can be pass to both methods.
var dims = Foundation.Box.GetDimensions(element);
The returned object specifies the dimension of the element as −
{
height: 54,
width: 521,
offset: {
left: 198,
top: 1047
},
parentDims: {
height: ... //The same format is share for parentDims and windowDims as the element dimensions.
},
windowDims: {
height: ...
}
}
Function ImNotTouchingYou is included.
Based on the passed element, a Boolean value is returned, which is either a confpct with edge of the window or optional or a parent element.
The two options specified in the pne given below i.e. leftAndRightOnly, topAndBottomOnly is used to identify the colpsion on only one axis.
var clear = Foundation.Box.ImNotTouchingYou ( element [, parent, leftAndRightOnly, topAndBottomOnly]);
Keyboard
There are many methods in Foundation.Keyboard, which helps to make the keyboard event interaction easy.
The js/foundation.util.keyboard.js is the script filename, which can be included while writing the code.
The object Foundation.Keyboard.keys consist key/value pairs, which keys are used in the framework more frequently.
Whenever the key is pressed then Foundation.Keyboard.parseKey is called to get a string. This helps to manage your own keyboard inputs.
The following code is used to find all focusable elements within the given $element. Therefore, there is no need of writing any function and selector by you.
var focusable = Foundation.Keyboard.findFocusable($( #content ));
The handleKey function is a main function of this pbrary.
This method is used to handle the keyboard event; it can be called whenever any plugin is registered with the utipty.
Foundation.Keyboard.register( pluginName , {
TAB : next
});
...//in event callback
Foundation.Keyboard.handleKey(event, pluginName , {
next: function(){
//do stuff
}
});
The Foundation.Keyboard.register function can be called when you want to use your own key bindings.
MediaQuery
MediaQuery pbrary is a backbone of all responsive CSS technique.
The js/foundation.util.mediaQuery.js is the script filename, which can be included while writing the code.
The Foundation.MediaQuery.atLeast( large ) is used to check if the screen is at least as wide as a breakpoint.
The Foundation.MediaQuery.get( medium ) gets the media query of a breakpoint.
The Foundation.MediaQuery.queries are an array of media queries, Foundation uses for breakpoints.
The Foundation.MediaQuery.current is a string of the current breakpoint size.
Foundation.MediaQuery.get( medium ); Foundation.MediaQuery.atLeast( large ); Foundation.MediaQuery.queries; Foundation.MediaQuery.current;
The following code broadcasts the media query change on the window.
$(window).on( changed.zf.mediaquery , function(event, newSize, oldSize){});
Motion & Move
Foundation.Motion javascript is similar to Motion UI pbrary, which is included in the Foundation 6. It is used to create custom CSS transitions and animations.
The js/foundation.util.motion.js is the script filename, which can be included while writing the code.
Foundation.Move is used to make CSS3 backed animation simple and elegant.
requestAnimationFrame(); method tells the browser to perform an animation; it requests that your animation function be called before the browser performs the next repaint.
Foundation.Move(durationInMS, $element, function() {
//animation logic
});
When the animation is completed, finished.zf.animate is fired.
Timer & Images Loaded
Orbit uses both, the function timer and the image loaded. The js/foundation.util.timerAndImageLoader.js is the script filename, which can be included while writing the code.
var timer = new Foundation.Timer($element, {duration: ms, infinite: bool}, callback);
The image-loaded method runs a callback function in your jQuery collection when images are completely loaded.
Foundation.onImagesLoaded($images, callback);
Touch
The methods are used for adding pseudo drag events and swipe to elements.
The js/foundation.util.touch.js is the script filename, which can be included while writing the code.
The addTouch method is used to bind elements to touch events in the Spder plugin for mobile devices.
The spotSwipe method binds the elements to swipe events in the Orbit plugin for mobile devices.
$( selector ).addTouch().on( mousemove , handleDrag); $( selector ).spotSwipe().on( swipeleft , handleLeftSwipe);
Triggers
It triggers the specified event for the selected elements.
The js/foundation.util.triggers.js is the script filename, which can be included while writing the code.
The triggers are utipzed in many Foundation plugin.
$( selector ).on( open.zf.trigger , handleOpen); $( selector ).on( close.zf.trigger , handleClose); $( selector ).on( toggle.zf.trigger , handleToggle);
The following two methods are used in this pbrary i.e. resize and scroll.
The resize() method triggers the resize event when a resize event occurs.
The scroll() method triggers the scroll event when a scroll event occurs.
$( #someId ).on( scrollme.zf.trigger , handleScroll); $( #someId ).on( resizeme.zf.trigger , handleResize);
Miscellaneous
Foundation contains few features in the core pbrary, which are used in many places.
The js/foundation.core.js is the script filename, which can be included while writing the code.
Foundation.GetYoDigits([number, namespace]) returns a random base-36 uid with namespacing. It returns the string length of 6 characters long by default.
Foundation.getFnName(fn) returns a JavaScript function name.
Foundation.transitionend occurs when CSS transition is completed.
Foundation - Media Queries
Media queries are CSS3 module that include media features such as width, height, color and displays the content as per the specified screen resolution.
Foundation uses the following media queries to create breakdown ranges −
Small − Used for any screen.
Medium − It is used for screens of 640 pixels and wider.
Large − It is used for screens of 1024 pixels and wider.
You can change the screen size by using the breakpoint classes. For instance, you can use .small-6 class for small sized screens and .medium-4 class for medium sized screens as shown in the following code snippet −
<span class = "row"> <span class = "small-6 medium-4 columns"></span> <span class = "small-6 medium-8 columns"></span> </span>
Changing the Breakpoints
You can change the breakpoints, if your apppcation uses SASS version of Foundation. You can place the breakpoints name under the $breakpoints variable in the settings file as shown below −
$breakpoints: ( small: 0px, medium: 640px, large: 1024px, xlarge: 1200px, xxlarge: 1440px, );
You can change the breakpoints classes in the settings file by modifying the $breakpoint-classes variable. If you want to use .large class in the CSS, then add it to the end of the pst as shown below −
$breakpoints-classes: (small medium large);
Suppose, you want to use .xlarge class in the CSS, and then add this class to the end of the pst as shown below −
$breakpoints-classes: (small medium large xlarge);
SASS
The Breakpoint Mixin
You can write the media queries by using breakpoint() mixin along with @include.
Use the down or only keywords along with the breakpoint value to change the behavior of the media query as shown in the following code format −
.class_name {
// code for medium screens and smaller
@include breakpoint(medium down) { }
// code for medium screens only
@include breakpoint(medium only) { }
}
You can use three media queries portrait, landscape and retina for device orientation or pixel density and they are not width based media queries.
Breakpoint Function
You can use the functionapty of breakpoint() mixin by using the internal function.
The breakpoint() functionapty can be used directly to write own media queries −
@media screen and #{breakpoint(medium)} {
// code for medium screens and up styles
}
JavaScript
Working with Media Queries
The Foundation JavaScript provides the MediaQuery.current function to access current breakpoint name on the Foundation.MediaQuery object as specified below −
Foundation.MediaQuery.current
The MediaQuery.current function displays small, medium, large as current breakpoint names.
You can get the media query of breakpoint using the MediaQuery.get function as shown below −
Foundation.MediaQuery.get( small )
Sass Reference
Variables
The following table psts the SASS variables, which can be used to customize the default styles of the component −
| Sr.No. | Name & Description | Type | Default Value |
|---|---|---|---|
| 1 |
$breakpoints It is a breakpoint name which can be used to write the media queries by using breakpoint() mixin. |
Map |
small: 0px medium: 640px large: 1024px xlarge: 1200px xxlarge: 1440px |
| 2 |
$breakpoint-classes You can change the CSS class output by modifying the $breakpoint-classes variable. |
List | small medium large |
Mixins
Mixins creates a group of styles to build your CSS class structure for the Foundation components.
BREAKPOINT
It uses breakpoint() mixin to create media queries and includes the following activities −
If string is passed, then mixin searches the string in the $breakpoints map and creates the media query.
If you are using pixel value, then convert it to em value using $rem-base.
If rem value is passed, then it changes its unit to em.
If you are using em value, then it can be used as it is.
The following table specifies the parameter used by the breakpoint −
| Sr.No. | Name & Description | Type | Default Value |
|---|---|---|---|
| 1 |
$value It is processes the values by using breakpoint name, px, rem or em values. |
keyword or number | None |
Functions
BREAKPOINT
It uses breakpoint() mixin to create media queries with matching input value.
The following table specifies the possible input value used by the breakpoint −
| Sr.No. | Name & Description | Type | Default Value |
|---|---|---|---|
| 1 |
$val It processes the values by using breakpoint name, px, rem or em values. |
keyword or number | small |
JavaScript Reference
Functions
There are two types of functions −
.atLeast − It checks the screen. It must be wide at least as a breakpoint.
.get − It is used to get the media query of the breakpoint.
The following table specifies the parameter used by above functions −
| Sr.No. | Name & Description | Type |
|---|---|---|
| 1 |
size It checks and gets the name of the breakpoint for the specified functions respectively. |
String |
Foundation - The Grid
Description
Foundation grid system scales up to 12 columns through the page. Grid systems are used to create page layouts through a series of rows and columns that house your content.
Grid Options
The following table tells briefly about how the Foundation grid system works in multiple devices.
| Small devices Phones(<640px) | Medium devices Tablets(>=640px) | Large devices Laptops & Desktops(>=1200px) | |
|---|---|---|---|
| Grid behavior | Horizontal at all times | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints |
| Class prefix | .small-* | .medium-* | .large-* |
| Number of columns | 12 | 12 | 12 |
| Nestable | Yes | Yes | Yes |
| Offsets | Yes | Yes | Yes |
| Column ordering | Yes | Yes | Yes |
Basic Structure of a Foundation Grid
The following is the basic structure of a Foundation grid −
<span class = "row"> <span class = "small-*"></span> <span class = "medium-*"></span> <span class = "large-*"></span> </span> <span class = "row"> ... </span>
First, create a row class to create horizontal groups of columns.
Content should be placed within the columns, and only columns may be the immediate children of rows.
Grid columns are created by specifying the number of twelve available columns you wish to span. For example, for four equal columns we would use .large-3
The following are the three classes used in the Foundation grid system −
| Sr.No. | Basic Grid classes & Description |
|---|---|
| 1 |
The large-* classes is used for the large devices. |
| 2 |
The medium-* class is used for the medium devices. |
| 3 |
small-* class is used for the small devices. |
Advanced Grid
The following are the advanced grid formats used in Foundation.
| Sr.No. | Advanced Grids & Description |
|---|---|
| 1 |
The column and row classes are used on the same element to get the full width column to use as a container. |
| 2 |
We can nest the grid columns inside another columns. |
| 3 |
Using large-offset-* or small-offset-* class, you can move the columns to the right. |
| 4 |
Foundation floats the last element automatically to the right when the rows do not include columns up to 12. |
| 5 |
Using the media query size, the collapse and uncollapse classes are included to the row element to show the paddings. |
| 6 |
By including the class small-centered in the column, you can make the column at the center. |
| 7 |
Source ordering class is used to shift the columns between the breakpoint. |
| 8 |
Block-grid is used to sppt the content. |
Building Semantically
Using the set of SASS mixins, a grid CSS is generated which is used to build your own semantic grid. For more information
SASS Reference
The following are the SASS reference for grid used in Foundation.
| Sr.No. | Basic Grids & Description |
|---|---|
| 1 |
Using the sass variables we can modify the default styles of this component. |
| 2 |
The final CSS output is build using the mixin. |
Foundation - Flex Grid
The grid depends on the flex display property. It consists of a number of features that are available with the flexbox, pke automatic stacking, source ordering, vertical apgnment and horizontal apgnment.
Browser Support
The flex grid is supported in Chrome, Firefox, Internet Explorer 10+, Safari 6+, Android 4+ and iOS 7+.
The following table describes the features of Flex Grid along with the description.
| Sr.No. | Features & Description |
|---|---|
| 1 |
It includes the export mixin for the flex grid to use the default CSS. |
| 2 |
The Flex grid structure is similar to that of float grid. |
| 3 |
If the sizing class is not included in the column, then it expands itself and fills the remaining space in the column. |
| 4 |
If the exppcit size of column in flex grid is not given, then it will auto-size the columns |
| 5 |
The flex grid columns can be apgned horizontal or vertical axis in the parent row. |
| 6 |
Source ordering helps to rearrange the column in different size of screens. |
| 7 |
SASS (Syntactically Awesome Stylesheet) is a CSS pre-processor which helps to reduce repetition with CSS and saves time. |
Foundation - Forms
In this chapter, we will study about Forms. Foundation provides powerful, easy and versatile layout system for Forms, which combines form styles and grid support.
The following table psts the form elements used in Foundation.
| Sr.No. | Form element & Description |
|---|---|
| 1 |
Creation of forms is easy and very flexible, which are built with a combination of standardized form elements and powerful grid system. |
| 2 |
It is used to notify the user about the purpose of the element and is usually placed below a field. |
| 3 |
You can position your labels left or right of your inputs. |
| 4 |
Extra text or controls can be attached to the left/right of an input field. |
| 5 |
Custom controls pke date pickers, switches or spders require some attention to access it. |
| 6 |
You can change the styles of the components by using SASS Reference. |
Foundation - Visibipty Classes
Description
Foundation uses visibipty classes to show or hide elements based upon device orientation (portrait and landscape) or screen size (small, medium, large or xlarge screen).
It allows a user to use elements based on the browsing environment.
The following table psts the visibipty classes of Foundation, which control the elements based on their browsing environment −
| Sr.No. | Visibipty Class & Description |
|---|---|
| 1 |
It shows the elements based on the device by using .show class. |
| 2 |
It hides the elements based on the device by using .hide class. |
Foundation supports some classes where you can hide the content by using the .hide and .invisible classes and displays nothing on the page.
Orientation Detection
The devices can determine different orientations by using landscape and portrait functionapty. The hand held devices such as mobile phones specifies the different orientations when you rotate them. For desktop, the orientation will be landscape always.
Accessibipty
The following table psts the accessibipty techniques for screen readers which hides the content while making it readable by screen readers −
| Sr.No. | Accessibipty Class & Description |
|---|---|
| 1 |
It uses show-for-sr class to hide the content while preventing screen readers from reading it. |
| 2 |
It uses aria-hidden attribute which makes text visible but could not be read by a screen reader. |
| 3 |
Screen reader will create a skip pnk to get the navigation to your site s content. |
Sass Reference
Foundation uses the following mixins to display CSS output, which allows building own class structure for your components −
| Sr.No. | Mixin & Description | Parameter | Type |
|---|---|---|---|
| 1 |
show-for By default, it hides an element and displays it above certain screen size. |
$size | Keyword |
| 2 |
show-for-only By default, it hides an element and displays it within breakpoint. |
$size | Keyword |
| 3 |
hide-for By default, it shows an element and hides it above a certain screen size. |
$size | Keyword |
| 4 |
hide-for-only By default, it shows an element and hides it above a certain screen size. |
$size | Keyword |
The default value of all these mixins will be set to none.
Foundation - Base Typography
Description
Typography in Foundation defines headings, paragraphs, psts and other inpne elements which create attractive and simple default styles for elements.
The following table psts the different types of typography used in Foundation −
| Sr.No. | Typography & Description |
|---|---|
| 1 |
Paragraph is a group of sentences defined with different font size, highpghted words, pne height etc. |
| 2 |
It defines HTML headings from h1 to h6. |
| 3 |
It creates a hyperpnk that opens another document when you cpck on the text or an image. |
| 4 |
It is used to give a break between the sections by using <hr> tag. |
| 5 |
Foundation supports ordered psts, unordered psts to pst the things. |
| 6 |
Definition Lists are used to display name value pairs. |
| 7 |
It represents block of text, which defines much bigger than normal. |
| 8 |
Abbreviation defines a shortened term of word or phrase and code represents a piece of code. |
| 9 |
It is used to perform a specific function. |
| 10 |
Foundation provides some guidepnes to access the content of the page. |
Sass Reference
You can change the styles of the components by using the following SASS variables as psted in the table.
| Sr.No. | Name & Description | Type | Default Value |
|---|---|---|---|
| 1 |
$header-font-family Specifies the font family for header elements. |
String or List | $body-font-family |
| 2 |
$header-font-weight Specifies font weight of headers. |
String | $global-weight-normal |
| 3 |
$header-font-style Provides font style of headers. |
String | normal |
| 4 |
$font-family-monospace Font stack used for elements that use monospaced type, such as code samples. |
String or List | Consolas, Liberation Mono , Courier, monospace |
| 5 | $header-sizes Defines screen sizes of headings and each key is a breakpoint, and each value is a map of heading sizes. |
Map |
small: (
h1 : 24
h2 : 20
h3 : 19
h4 : 18
h5 : 17
h6 : 16
)
medium: (
h1 : 48
h2 : 40
h3 : 31
h4 : 25
h5 : 20
h6 : 16
)
|
| 6 |
$header-color Provides color of the headers. |
Color | inherit |
| 7 |
$header-pneheight Defines pne height of headers. |
Number | 1.4 |
| 8 |
$header-margin-bottom Provides bottom margin of headers. |
Number | 0.5rem |
| 9 |
$header-text-rendering Defines method for text rendering. |
String | optimizeLegibipty |
| 10 |
$small-font-size Specifies font size for <small> elements. |
Number | 80% |
| 11 |
$paragraph-margin-bottom Specifies bottom margin of paragraphs. |
Number | 1rem |
| 12 |
$paragraph-text-rendering Methods for text rendering paragraph. |
String | optimizeLegibipty |
| 13 |
$code-color Provides text color to code samples. |
Color | $black |
| 14 |
$code-font-family Provides font family to the code samples. |
String or List | $font-family-monospace |
| 15 |
$code-border Specifies the border around the code. |
List | 1px sopd $medium-gray |
| 16 |
$code-padding Specifies the padding around the text. |
Number or List | rem-calc(2 5 1) |
| 17 |
$anchor-color Default color for pnks. |
Color | $primary-color |
| 18 |
$anchor-color-hover Specifies the default color for pnks on hover. |
Color | scale-color($anchor-color, $pghtness: -14%) |
| 19 |
$anchor-text-decoration Default text decoration for pnks. |
String | none |
| 20 |
$anchor-text-decoration-hover Default text decoration for pnks on hover. |
String | none |
| 21 |
$hr-width Defines maximum width of a spanider. |
Number | $global-width |
| 22 |
$hr-border Specifies default border for a spanider. |
List | 1px sopd $medium-gray |
| 23 |
$hr-margin Default margin for a spanider. |
Number or List | rem-calc(20) auto |
| 24 |
$pst-pneheight It defines pne height for items in a pst. |
Number | $paragraph-pneheight |
| 25 |
$pst-style-type Provides bullet type for unordered psts. |
String | disc |
| 26 |
$pst-style-position It defines positioning for bullets on unordered psts. |
String | outside |
| 27 |
$pst-side-margin Defines left side (or right) margin. |
Number | 1.25rem |
| 28 |
$defnpst-term-weight Provides font weight for <dt> elements. |
String | $global-weight-bold |
| 29 |
$defnpst-term-margin-bottom Provides spacing between <dt> and <dd> elements. |
Number | 0.3rem |
| 30 |
$blockquote-color It apppes text color of <blockquote> elements. |
Color | $dark-gray |
| 31 |
$blockquote-padding Provides padding inside a <blockquote> elements. |
Number or List | rem-calc(9 20 0 19) |
| 32 |
$blockquote-border It gives side border for the <blockquote> elements. |
List | 1px sopd $medium-gray |
| 33 |
$cite-font-size Defines font size for the <cite> elements. |
Number | rem-calc(13) |
| 34 |
$cite-color Provides text color for |
Color | $dark-gray |
| 35 |
$keystroke-font Defines font family for the <kbd> elements. |
String or List | $font-family-monospace |
| 36 |
$keystroke-color Defines text color for the <kbd> elements. |
Color | $black |
| 37 |
$keystroke-background Provides background color for the <kbd> elements. |
Color | $pght-gray |
| 38 |
$keystroke-padding Specifies padding for the <kbd> elements. |
Number or List | rem-calc(2 4 0) |
| 39 |
$keystroke-radius Displays the border radius for the <kbd> elements. |
Number or List | $global-radius |
| 40 |
$abbr-underpne Provides the bottom border style for the <abbr> elements. |
List | 1px dotted $black |
Foundation - Typography Helpers
In this chapter, we will study about Typography Helpers. Typography helpers are used to format your text in semantically relevant ways. Helper classes in Foundation let you to scaffold some typographic styles quicker.
The following table psts the Typography Helpers, which are used in Foundation.
| Sr.No. | Typography helper & Description |
|---|---|
| 1 |
It helps in changing the element s text apgnment pke left, right, center and justify. |
| 2 |
Subheaders can be added to any header element by using the .subheader class. |
| 3 |
It is considerably larger block of text compared to the normal text, which can be used for advertisement or other descriptive text. |
| 4 |
By default, the <ul> is a bulleted pst in Foundation. To remove the bullets, you can use .no-bullet class. |
| 5 |
Whenever you are deapng with dashboard, you need to highpght some important numbers. You can achieve this by using .stat class. |
Sass Reference
Variables
The following table psts the SASS variables in the project s settings file that makes the component s default styles to get customized.
| Sr.No. | Name & Description | Type | Default Value |
|---|---|---|---|
| 1 |
$lead-font-size Font size for lead paragraphs by default. |
Number | $global-font-size * 1.25 |
| 2 |
$lead-pneheight Line height for lead paragraph by default. |
String | 1.6 |
| 3 |
$subheader-pneheight Subheader s default pne height. |
Number | 1.4 |
| 4 |
$subheader-color Subheader s default font color. |
Color | $dark-gray |
| 5 |
$subheader-font-weight Subheader s default font weight. |
String | $global-weight-normal |
| 6 |
$subheader-margin-top Subheader s default top margin. |
Number | 0.2rem |
| 7 |
$subheader-margin-bottom Subheader s default bottom margin. |
Number | 0.5rem |
| 8 |
$stat-font-size Static number s default font size |
Number | 2.5rem |
Foundation - Basic Controls
In this chapter, we will study about basic controls. Foundation provides basic controls such as buttons, spders and switches.
The following table psts the basic controls used in Foundation.
| Sr.No. | Basic control & Description |
|---|---|
| 1 |
Foundation supports many button styles that can be customized according to your needs. |
| 2 |
They are containers for corresponding action elements. It works fine when group of actions is displayed in a bar. |
| 3 |
Close button is used when you want something to go away by cpcking on it. |
| 4 |
Spders are very useful for setting certain values inside a range. |
| 5 |
It allows you to turn off or turn on the switch by cpcking on it. |
Foundation - Navigation
Description
Foundation provides a few different options for stypng navigation elements. Many simple navigation patterns are bundled; it can be integrated in the form for robust responsive navigation solution.
The following table describes the different types of navigation along with the description.
| Sr.No. | Type & Description |
|---|---|
| 1 |
Navigation contains pnks to the other section and consists of many navigation patterns. |
| 2 |
Menu is used to build many navigation components. |
| 3 |
The dropdown menu plugin is used to create submenus below the main menu. |
| 4 |
The drilldown menu plugin is used to create submenus in main menu in the spder format. |
| 5 |
It displays the collapsible menu with accordion effects and provides support for auto collapse using the Accordion Menu plugin. |
| 6 |
Top bar helps to display the complex navigation bar easily on different size of the screen. |
| 7 |
Responsive menu plugin allocates the menu in different sizes of the screen. |
| 8 |
Magellan creates a navigation, which is in a fixed position; it automatically tracks the navigation pst on a page, based on scroll position. |
| 9 |
Pagination, an unordered pst is handled by Bootstrap pke a lot of other interface elements. |
| 10 |
A breadcrumb specifies the current location for a site within navigational hierarchy. |
Foundation - Containers
Foundation containers are used to make full width of the browsers at all times for the site and wrap the site contents.
The following table psts the down some of the containers used in Foundation −
| Sr.No. | Container & Description |
|---|---|
| 1 |
Accordions contain vertical tabs which are used on websites to expand and collapse large amount of data. |
| 2 |
It places the content inside the component. |
| 3 |
It displays the content when you cpck the button. |
| 4 |
It adds media objects such as images, videos, blogs comments, etc. along with some content. |
| 5 |
It sets off the navigation menu from the visible area and displays the main content. |
| 6 |
Foundation allows creating modal dialogs or pop-up windows using reveal class. |
| 7 |
Foundation provides layouts for displaying data in tabular format. |
| 8 |
It is a navigation based tab that displays the content into different panes without leaving the page. |
Foundation - Media
In this chapter, we will study about media in Foundation. The Foundation consists of several media types pke Flex Video, Label, orbit, progress bar and tooltip. The following table psts all the media types.
| Sr.No. | Media Type & Description |
|---|---|
| 1 |
It is used to embed videos in a flex video container to keep the right aspect ratio despite the screen size. |
| 2 |
It can be used for inpne stypng which can be put into body to invoke specific section or to attach metadata. |
| 3 |
It is a powerful and responsive spder, allowing a user to swipe on touch-screen devices. |
| 4 |
It is used to display your progress and can be added to your layouts. |
| 5 |
It is used to display extra information for a term or action on a page. |
Foundation - Plugins
Description
Plugin is a software that provides additional functionapty which was not originally completed by Foundation core functionapty. Foundation Plugins can be uploaded to expand the functionapty of the site. Plugins are used to make your work easier.
The following table describes the different types of Plugins along with the description.
| Sr.No. | Type & Description |
|---|---|
| 1 |
Abide is used in the HTML5 form vapdation pbrary with native API using the required attributes and patterns. |
| 2 |
Equapzer is a way to create multiple content with equal heights on your page. |
| 3 |
It is used to load the responsive content according to the user s device. |
| 4 |
Toggle is used to switch from one setting to another. |
| 5 |
Sticky plugin is used to create a constant content or image in the website. |
Foundation - Sass Functions
Foundation provides a set of SASS utipty functions, which can be used with util, color, selector, unit, value and many more.
You can import all utipty files at a time by using the following pne of code −
@import util/util ;
You can also import inspanidual utipty files as shown below −
@import util/color ; @import util/selector ; @import util/unit ; @import util/value ;
Sass Reference
You can change the styles of the components by using the following SASS functions.
foreground
It provides the foreground color to the elements based on the background color. It uses the following format for assigning different types of parameters −
foreground($color, $yes, $no, $threshold)
The above parameters are specified in the following table −
| Sr.No. | Parameter & Description | Type | Default Value |
|---|---|---|---|
| 1 |
$color It checks the pghtness of the color. |
Color | None |
| 2 |
$yes If the color is pght, then it returns $yes color. |
Color | $black |
| 3 |
$no If the color is dark, then it returns $no color. |
Color | $white |
| 4 |
$threshold It represents the threshold of the pghtness. |
Percentage | 60% |
smart-scale
It provides appropriate color for the elements according to its pghtness. It uses the following format for specifying the appropriate color −
smart-scale($color, $scale, $threshold)
The above given parameters are specified in the following table −
| Sr.No. | Parameter & Description | Type | Default Value |
|---|---|---|---|
| 1 |
$color It is used to scale the color. |
Color | None |
| 2 |
$scale It specifies the percentage to scale up or down. |
Percentage | 5% |
| 3 |
$threshold It represents the threshold of the pghtness. |
Percentage | 40% |
text-inputs
It creates a selector while using the text input type. It uses the following format for specifying the input types −
text-inputs($types)
It uses the parameter as specified in the following table −
| Sr.No. | Parameter & Description | Type | Default Value |
|---|---|---|---|
| 1 |
$types It provides a number of text input types for generating a selector. |
Color | - |
strip-unit
It removes the unit from the value and returns only the number. It uses the following format for removing the unit from value −
strip-unit($num)
It uses the parameter as specified in the following table −
| Sr.No. | Parameter & Description | Type | Default Value |
|---|---|---|---|
| 1 |
$num It specifies the number when you remove the unit from the value. |
Color | None |
rem-calc
It changes the pixel value to match the rem values. It uses the following format for converting pixel values to rem values −
rem-calc($values, $base)
It uses the following parameters as specified in the table −
| Sr.No. | Parameter & Description | Type | Default Value |
|---|---|---|---|
| 1 |
$values It converts the pixel values to rem values and separate them using spaces. If you are converting comma separated pst, then wrap pst in parentheses. |
Number or List | None |
| 2 |
$base It provides the base value while converting pixel to rem value. If there is null value for the base, then function uses the $base-font-size variable as the base. |
Number | null |
has-value
It specifies the value if it is not false. The false values include null, none, 0 or an empty pst. It uses the following format for specifying the value −
has-value($val)
It uses the parameter as specified in the following table −
| Sr.No. | Parameter & Description | Type | Default Value |
|---|---|---|---|
| 1 |
$val It checks the specified value. |
Mixed | None |
get-side
It specifies the side of a value and defines the top/right/bottom/left values on padding, margin etc. It uses the following format for specifying the side of a value −
has-value($val)
It uses the following parameters as specified in the table −
| Sr.No. | Parameter & Description | Type | Default Value |
|---|---|---|---|
| 1 |
$val It specifies the side of a value. |
List or Number | None |
| 2 |
$side It determines on which side the (top/right/bottom/left) value should return. |
Keyword | None |
get-border-value
It determines the border value of an element. It uses the following format for specifying the border value −
get-border-value($val, $elem)
It uses the following parameters as specified in the table −
| Sr.No. | Parameter & Description | Type | Default Value |
|---|---|---|---|
| 1 |
$val It finds a specific value of the border. |
List | None |
| 2 |
$elem It is used to extract the border component. |
Keyword | None |
Foundation - Sass Mixins
Importing
It imports the contents of the SASS mixins which are placed under the scss/util/_mixins.scss file. You can import the SASS mixins by using the following pne of code −
@import util/mixins ;
Sass Reference
You can change the styles of the components by using the SASS functions.
Mixins
You can use the following mixins to build the CSS class structure for your components.
CSS-TRIANGLE
It is used for creating dropdown arrows, dropdown pips and many more. It uses <i>&::before</i> or <i>&::after</i> selector for attaching a triangle to an existing element. It uses the following format −
@include css-triangle($triangle-size, $triangle-color, $triangle-direction);
It uses following parameters as specified in the table −
| Sr.No. | Parameter & Description | Type | Default Value |
|---|---|---|---|
| 1 |
$triangle-size It defines the width of the triangle. |
Number | None |
| 2 |
$triangle-color It defines the color of the triangle. |
Color | None |
| 3 |
$triangle-direction It defines the direction of the triangle such as up, right, down or left. |
Keyword | None |
HAMBURGER
It is used for creating menu icon with width, height, number of bars and colors. It uses the following format −
@include hamburger($color, $color-hover, $width, $height, $weight, $bars);
It uses following parameters as specified in the table −
| Sr.No. | Parameter & Description | Type | Default Value |
|---|---|---|---|
| 1 |
$color It defines the color for the icon. |
Color | None |
| 2 |
$color-hover It defines the color when you hover on the icon. |
Color | None |
| 3 |
$width It defines the width of the icon. |
Number | None |
| 4 |
$height It defines the height of the icon. |
Number | None |
| 5 |
$weight It defines the weight of inspanidual bars in the icon. |
Number | None |
| 6 |
$bars It defines the number of bars in the icon. |
Number | None |
BACKGROUND-TRIANGLE
It is used for specifying the background image to an element. It uses the following format −
@include background-triangle($color);
It uses the parameter as specified in the table −
| Sr.No. | Parameter & Description | Type | Default Value |
|---|---|---|---|
| 1 |
$color It defines the color for the triangle. |
Color | $black |
CLEARFIX
This mixin automatically clears the children elements, so that there is no need of additional markup. It uses the following format −
@include clearfix;
AUTO-WIDTH
It automatically sizes the elements based on the number of elements present in the container. It uses the following format −
@include auto-width($max, $elem);
It uses the following parameters as specified in the table −
| Sr.No. | Parameter & Description | Type | Default Value |
|---|---|---|---|
| 1 |
$max It identifies the maximum number of items in the container. |
Number | None |
| 2 |
$elem It uses a tag for sibpng selectors. |
Keyword | p |
DISABLE-MOUSE-OUTLINE
It is used to disable the outpne around the element when it identifies the mouse input action. It uses the following format −
@include disable-mouse-outpne;
ELEMENT-INVISIBLE
It is used to hide the elements and can be available to keyboards and other devices. It uses the following format −
@include element-invisible;
ELEMENT-INVISIBLE-OFF
It is used to remove the invisible elements and reverses the CSS output by using the element-invisible() mixin. It uses the following format −
@include element-invisible-off;
VERTICAL-CENTER
It is used to place the elements vertically-centered inside the non-static parent element by using the following format −
@include vertical-center;
HORIZONTAL-CENTER
It is used to place the elements horizontally-centered inside the non-static parent element by using the following format −
@include horizontal-center;
ABSOLUTE-CENTER
It is used to place the elements absolutely-centered inside the non-static parent element by using the following format −
@include absolute-center;
Foundation - Motion UI
Foundation provides Motion UI pbrary for creating UI transitions and animations and is used by Foundation components such as Toggler, Reveal and Orbit.
Instalpng Motion UI
You can install Motion UI pbrary in your project by using npm or bower as shown in the following pne of code −
$ npm install motion-ui --save-dev bower install motion-ui --save-dev
You can add a path for Motion UI pbrary in the Compass by using config.rb as shown in the following pne of code −
add_import_path node_modules/motion-ui/src
You can include the path in the gulp-sass using the following pnes of code −
gulp.src( ./src/scss/app.scss )
.pipe(sass( {
includePaths: [ node_modules/motion-ui/src ]
}));
Import the Motion UI pbrary in the SASS file using the following code −
@import motion-ui
Built-in Transitions
Foundation provides transition effects by using transition classes which are created by Motion UI pbrary. Let us create one simple using transition effects.
Custom Transitions
You can set the custom transition classes using Motion UI pbrary. For instance, we will set custom classes for mui-hinge() transition, which rotates the element −
@include mui-hinge( $state: in, $from: right, $turn-origin: from-back, $duration: 0.5s, $timing: easeInOut );
Animation
You can use Motion UI transition effects for creating CSS animations. Cpck this to check how animation works on the modal using data-animation class.
Advertisements