foundation Archives - Donotsad where can learn any thing work project and make money

Aug 10

Foundation – Plugins

Foundation – Plugins ”; Previous Next Description Plugin is a software that provides additional functionality which was not originally completed by Foundation core functionality. Foundation Plugins can be uploaded to expand the functionality 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 Abide is used in the HTML5 form validation library with native API using the required attributes and patterns. 2 Equalizer Equalizer is a way to create multiple content with equal heights on your page. 3 Interchange It is used to load the responsive content according to the user”s device. 4 Toggler Toggle is used to switch from one setting to another. 5 Sticky Sticky plugin is used to create a constant content or image in the website. Print Page Previous Next Advertisements ”;

Aug 10

Foundation – Containers

Foundation – Containers ”; Previous Next 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 lists the down some of the containers used in Foundation − Sr.No. Container & Description 1 Accordion Accordions contain vertical tabs which are used on websites to expand and collapse large amount of data. 2 Callout It places the content inside the component. 3 Dropdown-panes It displays the content when you click the button. 4 Media Object It adds media objects such as images, videos, blogs comments, etc. along with some content. 5 Off-canvas It sets off the navigation menu from the visible area and displays the main content. 6 Reveal-Modal Foundation allows creating modal dialogs or pop-up windows using reveal class. 7 Tables Foundation provides layouts for displaying data in tabular format. 8 Tabs It is a navigation based tab that displays the content into different panes without leaving the page. Print Page Previous Next Advertisements ”;

Aug 10

Foundation – JavaScript

Foundation – JavaScript ”; Previous Next In this chapter, we will study about JavaScript. It is easy to set up JavaScript in Foundation; only thing you require is jQuery. JavaScript Installing You can use ZIP download, package manager, or CDN to get Foundation JavaScript file. In your code you can provide links to jQuery and Foundation as <script> tags, placed before the closing <body> and check that Foundation is loaded after jQuery. For more information click here. File Structure When you install Foundation through command line, Foundation plugins downloads as individual files such as foundation.tabs.js, foundation.dropdownMenu.js, foundation.slider.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 utility libraries, which come with Foundation installation. You can study in detail about specific plugin requirements in the next chapter JavaScript Utilities. Loading individual files creates network overhead, specifically for mobile users. For faster page loading, use of grunt or gulp is recommended. Initializing The foundation() function is used to initialize 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 link is created by adding data-tooltip. For more information click here. Configuring Plugins Plugins can be customized by using its configuration settings. For instance, you can set the speed of the accordion slides up and down. The plugin settings can be globally changed using the plugin”s DEFAULTS property. For more information click here. Adding Plugins after Page Load When new HTML is added to the DOM, any of the plugins on those elements will not be initialized by default. You can check for new plugins by re-calling 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”), { slideSpeed: 600, multiExpand: true }); Majority of the plugins are provided with public 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 like 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 listened and create a return response to it. Each plugin can trigger list of events, which will be documented in plugin”s documentation. In Foundation 6, callback plugins are removed and must be taken as event listeners. For instance − $(”[data-tabs]”).on(”change.zf.tabs”, function() { console.log(”Tabs are changed!”); }); Print Page Previous Next Advertisements ”;

Aug 10

Foundation – Starter Projects

Foundation – Starter Projects ”; Previous Next You can start with your project development with some available templates which can be installed through Yeti Launch 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 like 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 Github. 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 Github. 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 Panini flat file compiler that creates layouts for pages by using templates, pages, HTML partials. This process can be done by using Handlebars templating language. SASS Compilation You can compile the SASS to CSS using Libsass 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 like normal CSS, which is in the nested style. You can compress the CSS with clean-css and removes the unused CSS from the stylesheet using UnCSS. 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 BrowserSync 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. Print Page Previous Next Advertisements ”;

Aug 10

Foundation – Quick Guide

Foundation – Quick Guide ”; Previous Next 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, California. 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 sliders, lightbox and many more. It comes with development package like 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 like 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 like 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 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. Foundation – Starter Projects You can start with your project development with some available templates which can be installed through Yeti Launch 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 like 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 Github. ZURB Template It is a combination of CSS/SCSS, JavaScript, Handlebars template, markup structure, image compression and

Aug 10

Foundation – Sass Mixins

Foundation – Sass Mixins ”; Previous Next 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 line 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 individual 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 sibling selectors. Keyword li DISABLE-MOUSE-OUTLINE It is used to disable the outline around the element when it identifies the mouse input action. It uses the following format − @include disable-mouse-outline; 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; Print Page Previous Next Advertisements ”;

Aug 10

Foundation – Media

Foundation – Media ”; Previous Next In this chapter, we will study about media in Foundation. The Foundation consists of several media types like Flex Video, Label, orbit, progress bar and tooltip. The following table lists all the media types. Sr.No. Media Type & Description 1 Flex Video It is used to embed videos in a flex video container to keep the right aspect ratio despite the screen size. 2 Label It can be used for inline styling which can be put into body to invoke specific section or to attach metadata. 3 Orbit It is a powerful and responsive slider, allowing a user to swipe on touch-screen devices. 4 Progress Bar It is used to display your progress and can be added to your layouts. 5 Tooltips It is used to display extra information for a term or action on a page. Print Page Previous Next Advertisements ”;

Aug 10

Foundation – Navigation

Foundation – Navigation ”; Previous Next Description Foundation provides a few different options for styling 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 Overview Navigation contains links to the other section and consists of many navigation patterns. 2 Menu Menu is used to build many navigation components. 3 Dropdown Menu The dropdown menu plugin is used to create submenus below the main menu. 4 Drilldown Menu The drilldown menu plugin is used to create submenus in main menu in the slider format. 5 Accordion Menu It displays the collapsible menu with accordion effects and provides support for auto collapse using the Accordion Menu plugin. 6 Top Bar Top bar helps to display the complex navigation bar easily on different size of the screen. 7 Responsive Navigation Responsive menu plugin allocates the menu in different sizes of the screen. 8 Magellan Magellan creates a navigation, which is in a fixed position; it automatically tracks the navigation list on a page, based on scroll position. 9 Pagination Pagination, an unordered list is handled by Bootstrap like a lot of other interface elements. 10 Breadcrumbs A breadcrumb specifies the current location for a site within navigational hierarchy. Print Page Previous Next Advertisements ”;

Aug 10

Foundation – Discussion

Discuss Foundation ”; Previous Next 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. Print Page Previous Next Advertisements ”;

Aug 10

Foundation – Sass

Foundation – Sass ”; Previous Next SASS helps to make the code more flexible and customizable in Foundation. Compatibility To install SASS based version for foundation, Ruby should be installed on Windows. Foundation can be compiled with Ruby SASS and libsass. 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 line 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 line code, you will get the following lines − Compiling 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 line 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. <link rel = “stylesheet” href = “node_modules/foundation-sites/dist/foundation-sites.css”> <link 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 line of code to include all the components at once. @include foundation-everything; The following is the list 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 lines 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/visibility”; @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 styling of buttons. $button-padding: 0.85em 1em; $button-margin: 0 $global-margin $global-margin 0; $button-fill: solid; $button-background: $primary-color; $button-background-hover: scale-color($button-background, $lightness: -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; Print Page Previous Next Advertisements ”;