Category: foundation

Foundation – Motion UI ”; Previous Next Foundation provides Motion UI library for creating UI transitions and animations and is used by Foundation components such as Toggler, Reveal and Orbit. Installing Motion UI You can install Motion UI library in your project by using npm or bower as shown in the following line of code − $ npm install motion-ui –save-dev bower install motion-ui –save-dev You can add a path for Motion UI library in the Compass by using config.rb as shown in the following line of code − add_import_path ”node_modules/motion-ui/src” You can include the path in the gulp-sass using the following lines of code − gulp.src(”./src/scss/app.scss”) .pipe(sass( { includePaths: [”node_modules/motion-ui/src”] })); Import the Motion UI library 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 library. Let us create one simple example using transition effects. Custom Transitions You can set the custom transition classes using Motion UI library. 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. Click this link to check how animation works on the modal using data-animation class. Print Page Previous Next Advertisements ”;

Foundation – Typography Helpers ”; Previous Next 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 lists the Typography Helpers, which are used in Foundation. Sr.No. Typography helper & Description 1 Text Alignment It helps in changing the element”s text alignment like left, right, center and justify. 2 Subheader Subheaders can be added to any header element by using the .subheader class. 3 Lead Paragraph It is considerably larger block of text compared to the normal text, which can be used for advertisement or other descriptive text. 4 Un-bulleted List By default, the <ul> is a bulleted list in Foundation. To remove the bullets, you can use .no-bullet class. 5 Statistics Whenever you are dealing with dashboard, you need to highlight some important numbers. You can achieve this by using .stat class. Sass Reference Variables The following table lists 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-lineheight Line height for lead paragraph by default. String 1.6 3 $subheader-lineheight Subheader”s default line 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 Print Page Previous Next Advertisements ”;

Foundation – Kitchen Sink ”; Previous Next Description It includes the Foundation elements to work with the web applications smoothly. The following table lists some of the Foundation components − Sr.No. Component & Description 1 Accordion Accordions contain vertical tabs which are used on websites to expand and collapse large amount of data. 2 Accordion Menu It displays the collapsible menu with accordion effects. 3 Badge Badges are similar to labels, which are used to highlight the information such as important notes and messages. 4 Breadcrumbs It specifies the current location for a site within navigational hierarchy. 5 Buttons Foundation supports standard buttons with different styles. 6 Callout Callout is an element, which can be used to place the content inside. 7 Close Button It is used to dismiss the alert box. 8 Drilldown Menu Drilldown menu changes the nested lists into vertical drilldown menu. 9 Dropdown Menu Dropdown menu is used for displaying links in a list format. 10 Dropdown Pane Dropdown pane displays the content when you click the button. 11 Flex Video It is used to create video objects in the web pages. 12 Float Classes It is used to add utility classes to HTML elements. 13 Forms It is used to create form layout to collect user input. 14 Label Labels are inline styles, which define a label for an input element. 15 Media Object 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 Menu It provides access to different modes in the website. 17 Pagination It is a type of navigation that divides the content into a series of related pages. 18 Slider It specifies the range of values by dragging a handle. 19 Switch It is used to switch between on and off state. 20 Table It represents the data in rows and columns format. 21 Tabs It is a navigation based tab that displays the content into different panes without leaving the page. 22 Thumbnail It styles the images in thumbnail shape. 23 Title Bar It is used to display the current screen used by the user with other menu items. 24 Tooltip It is small pop-up box that describes the information when you hover the mouse on the link. 25 Top Bar It is used to create navigation header in the website. 26 Orbit It is an easy and powerful slider that swipes the elements using the orbit class. Print Page Previous Next Advertisements ”;

Foundation – Useful Resources ”; Previous Next The following resources contain additional information on Foundation. Please use them to get more in-depth knowledge on this topic. Useful Video Courses Foundation 5 – Learn Responsive Design & Rapid Prototyping 29 Lectures 2 hours Sandra L More Detail Foundations Of Technical Analysis Essential Charting Skills For Trading And Investing 20 Lectures 2 hours Simon Milgard More Detail APMP Foundation Certificate Training 6 Lectures 1 hours Deren T. More Detail Foundational Drum Loop Basics – [Create Powerful Drum Loops] 7 Lectures 2.5 hours Riley Weller More Detail Foundations of English learning and Speaking practice 43 Lectures 1 hours Nyasha Musundire More Detail Shallow Foundation 9 Lectures 2.5 hours Vipin Chandra Joshi More Detail Print Page Previous Next Advertisements ”;

Foundation – Sass Functions ”; Previous Next Foundation provides a set of SASS utility functions, which can be used with util, color, selector, unit, value and many more. You can import all utility files at a time by using the following line of code − @import ”util/util”; You can also import individual utility 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 lightness of the color. Color None 2 $yes If the color is light, 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 lightness. Percentage 60% smart-scale It provides appropriate color for the elements according to its lightness. 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 lightness. 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 list, then wrap list 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 list. 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 Print Page Previous Next Advertisements ”;

Foundation – Installation ”; Previous Next In this chapter, we will discuss about how to install and use Foundation on website. Download the Foundation When you open the link foundation.zurb.com, you will see a screen as shown below − Click 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 library 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 click 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 individual functionality. 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 library throughout this tutorial. HTML Template A basic HTML template using Foundation is as shown below − Live Demo <!DOCTYPE html> <html> <head> <title>Foundation Template</title> <meta name = “viewport” content = “width = device-width, initial-scale = 1″> <link rel=”stylesheet” href=”https://cdn.jsdelivr.net/npm/[email protected]/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/libs/foundation/6.0.1/js/vendor/jquery.min.js”></script> <script src=”https://cdn.jsdelivr.net/npm/[email protected]/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 applied out of the box. Initialization of components The jQuery script is required in Foundation for components like modals and dropdown. <script src = “https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/foundation.min.js”> </script> <script src = “https://cdnjs.cloudflare.com/ajax/libs/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. Print Page Previous Next Advertisements ”;

Foundation – Basic Controls ”; Previous Next In this chapter, we will study about basic controls. Foundation provides basic controls such as buttons, sliders and switches. The following table lists the basic controls used in Foundation. Sr.No. Basic control & Description 1 Button Foundation supports many button styles that can be customized according to your needs. 2 Button Group They are containers for corresponding action elements. It works fine when group of actions is displayed in a bar. 3 Close Button Close button is used when you want something to go away by clicking on it. 4 Slider Sliders are very useful for setting certain values inside a range. 5 Switch It allows you to turn off or turn on the switch by clicking on it. Print Page Previous Next Advertisements ”;

Foundation – Flex Grid ”; Previous Next The grid depends on the flex display property. It consists of a number of features that are available with the flexbox, like automatic stacking, source ordering, vertical alignment and horizontal alignment. 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 Importing It includes the export mixin for the flex grid to use the default CSS. 2 Basics The Flex grid structure is similar to that of float grid. 3 Advanced Sizing If the sizing class is not included in the column, then it expands itself and fills the remaining space in the column. 4 Responsive Adjustments If the explicit size of column in flex grid is not given, then it will auto-size the columns 5 Column Alignment The flex grid columns can be aligned horizontal or vertical axis in the parent row. 6 Source Ordering Source ordering helps to rearrange the column in different size of screens. 7 Sass Reference SASS (Syntactically Awesome Stylesheet) is a CSS pre-processor which helps to reduce repetition with CSS and saves time. Print Page Previous Next Advertisements ”;

Foundation – The Grid ”; Previous Next 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 − <div class = “row”> <div class = “small-*”></div> <div class = “medium-*”></div> <div class = “large-*”></div> </div> <div class = “row”> … </div> 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 Large The large-* classes is used for the large devices. 2 Medium The medium-* class is used for the medium devices. 3 Small 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 Combined Column/Row The column and row classes are used on the same element to get the full width column to use as a container. 2 Nesting We can nest the grid columns inside another columns. 3 Offsets Using large-offset-* or small-offset-* class, you can move the columns to the right. 4 Incomplete Rows Foundation floats the last element automatically to the right when the rows do not include columns up to 12. 5 Collapse/Uncollapse Rows Using the media query size, the collapse and uncollapse classes are included to the row element to show the paddings. 6 Centered Columns By including the class small-centered in the column, you can make the column at the center. 7 Source Ordering Source ordering class is used to shift the columns between the breakpoint. 8 Block Grids Block-grid is used to split 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 click here SASS Reference The following are the SASS reference for grid used in Foundation. Sr.No. Basic Grids & Description 1 Variables Using the sass variables we can modify the default styles of this component. 2 Mixins The final CSS output is build using the mixin. Print Page Previous Next Advertisements ”;

Foundation Tutorial PDF Version Quick Guide Resources Job Search Discussion 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 plugin. The tutorial is divided into sections such that each section contains related topics with simple and useful examples. Audience This tutorial has been prepared for anyone who has a basic knowledge of HTML and CSS and has an urge to develop websites. After completing this tutorial, you will find yourself at a moderate level of expertise in developing web projects using Zurb Foundation Bootstrap. Prerequisites Before you proceed with this tutorial, we are assuming that you are already aware about the basics of HTML and CSS. If you are not well aware of these concepts then we will suggest you to go through our short tutorials on HTML Tutorial and CSS Tutorial. Print Page Previous Next Advertisements ”;