Category: 02. General

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…

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 − 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…

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…

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 − 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…

Foundation includes JavaScript utilities that are used to add common functionalities. It is very helpful and easy to use. This JavaScript utilities library can be found in the folder Your_folder_name/node_modules/foundation-sites/js Box The returned object specifies the dimension of the element as − Keyboard The following code is used to find all focusable elements within the given $element. Therefore, there…

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…

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…

In this chapter, we will study about Global Styles. The global CSS of Foundation framework includes useful resets that makes sure styling 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…