Ankur Singh

Frontend Developer Software Developer || Fascinated by tech trends || Building usable systems that work on web and mobile.

Foundation Framework For Responsive Design

February 26, 2021

Responsive design gets a whole lot faster. A Framework for any device, medium, and accessibility. Foundation is a family of responsive front-end frameworks.

Installation

Install with Package Managers

$ npm install foundation-sites

$ yarn add foundation-sites

$ php composer.phar require foundation/foundation

Install with Foundation CLI

npm install --global foundation-cli
or sudo npm install --global foundation-cli

Then use to create a new Foundation project:

$ foundation new

CDN Links

<!– Compressed CSS –>

<link rel=”stylesheet” href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css” integrity=”sha256-ogmFxjqiTMnZhxCqVmcqTvjfe1Y/ec4WaRj/aQPvn+I=” crossorigin=”anonymous”>

<!– Compressed JavaScript –>

<script src=”https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js” integrity=”sha256-pRF3zifJRA9jXGv++b06qwtSqX1byFQOLjqa2PTEb2o=” crossorigin=”anonymous”></script>

From Foundation 6.4, flex is enabled by default and only the new XY Grid is available. However, other CSS versions are available for backward compatibility and the most common usage cases. For others uses and advanced customization, we recommend to build Foundation with custom settings (see others installation methods).

<!– foundation-float.min.css: Compressed CSS with legacy Float Grid ?

<link rel=”stylesheet” href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation-float.min.css” integrity=”sha256-4ldVyEvC86/kae2IBWw+eJrTiwNEbUUTmN0zkP4luL4=” crossorigin=”anonymous”>

<!– foundation-prototype.min.css: Compressed CSS with prototyping classes ?

<link rel=”stylesheet” href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation-prototype.min.css” integrity=”sha256-BiKflOunI0SIxlTOOUCQ0HgwXrRrRwBkIYppEllPIok=” crossorigin=”anonymous”>

<!– foundation-rtl.min.css: Compressed CSS with right-to-left reading direction ?

<link rel=”stylesheet” href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation-rtl.min.css” integrity=”sha256-F+9Ns8Z/1ZISonBbojH743hsmF3x3AlQdJEeD8DhQsE=” crossorigin=”anonymous”>

HTML Starter Template

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Foundation Starter Template</title>
    <link rel="stylesheet" href="css/foundation.css" />
  </head>
  <body>
    <h1>Hello, world!</h1>

    <script src="js/vendor/jquery.js"></script>
    <script src="js/vendor/what-input.js"></script>
    <script src="js/vendor/foundation.min.js"></script>
    <script>
      $(document).foundation();
    </script>

  </body>
</html>

Set Up

Global Style

Font Size

The default font size is set to 100% of the browser style sheet, usually 16 pixels. This ensures compatibility with browser-based text zoom or user-set defaults. If you’re using the Sass version of Foundation, edit the $global-font-size variable to change the base font size. This can be a percentage value, or a pixel value.

Colors

     Foundation has an accessible default color palette like.

  •  Primary
  • Secondary
  • Success
  • Warning
  • Alert
  • White
  • Light Gray
  • Medium Gray
  • Dark Gray
  • Black

Color Palette Change

If you’re using the Sass version of Foundation, you can change the color palette by changing the variables in your settings file.

You can also use Foundation’s get-color() function to reference any color from the palette. This function gives you access to custom colors you’ve added to the palette.

// Create a variable for my custom color.
$custom-color: get-color(custom);

Flexbox Mode

Foundation components use a combination of floats, vertical alignment, table cells, and various other CSS.

Enabling flexbox mode replaces those css with flexbox properties, and making sizing and alignment of elements much easier.

Flexbox mode is only supported in these browsers:

  • The latest Chrome and Firefox
  • Safari 6+
  • IE/Edge 10+
  • iOS 7+
  • Android 4.4+

Enabling Flexbox Mode

If you’re using the CSS version of Foundation, you can generate a custom download of Foundation with flexbox mode enabled. If you’re using the Sass version of Foundation, you can enable flexbox mode two ways:

If you use the foundation-everything() mixin in your main Sass file, pass in the parameter true to enable flexbox mode.

@include foundation-everything(true);

If you included each component manually, open your settings file (basic template: scss/_settings.scss, ZURB template: src/assets/scss/_settings.scss) and set $global-flexbox to true, and remove the @include for the float grid and replace it with the one for the flex grid, along with the helper classes.

$global-flexbox: true;
// @include foundation-grid;
@include foundation-flex-grid;
@include foundation-flex-classes;

Supported Components

  • Button group
  • Input group – (Forms)
  • Menu
  • Top bar
  • Media object
  • Title bar
  • Card‘

Javascript

Installing

You can get the Foundation JavaScript files from a ZIP download, package manager, or CDN. Check out the Installation page to learn more.

<!– jQuery must be imported before Foundation –>

<script src=”js/jquery.min.js”></script>

<!– this will include every plugin and utility required by Foundation –>

<script src=”js/foundation.min.js”></script>

Import in HTML

<!– Example of selectively including files –>

<script src=“js/jquery.min.js”></script> <!– Required –>

<script src=“js/foundation.core.min.js”></script>  <!– Required –>

<script src=“js/foundation.util.mediaQuery.min.js”></script>

<script src=”js/foundation.tabs.min.js”></script><script src=”js/foundation.accordion.min.js”></script>

Media Queries

Foundation for Sites has three core breakpoints:

  • Small: any screen.
  • Medium: any screen 640 pixels or larger.
  • Large: any screen 1024 pixels or larger.

If you’re using the CSS version of Foundation, use these media queries to imitate the three core breakpoints:

/* Small only */

@media screen and (max-width: 39.9375em) {}

/* Medium and up */

@media screen and (min-width: 40em) {}

/* Medium only */

@media screen and (min-width: 40em) and (max-width: 63.9375em) {}

/* Large and up */

@media screen and (min-width: 64em) {}

/* Large only */

@media screen and (min-width: 64em) and (max-width: 74.9375em) {}

Grid System

Start by adding an element with a class of .row. This will create a horizontal block to contain vertical columns. Then add elements with a .column class within that row. Specify the widths of each column with the .small-#, .medium-#, and .large-# classes.

<div class="row">
  <div class="columns medium-3 large-4"><!-- ... --></div>
  <div class="columns small-4 large-4"><!-- ... --></div>
  <div class="columns small-6 large-4"><!-- ... --></div>
</div>

Conclusion:

  • Design Process and Customization:Foundation is made for customization-heavy projects. Those that want to take their web project to the next level and tweak every little detail and component should really look into Foundation for that purpose.
  • Preprocessors and Compatibility

Fully responsive as well and accessible from all web-accessing devices.

  • Documentation and Support: Foundation framework has documentation to a large extent ,which helps developers to teach its advantages.
  • Foundation’s grid system and its minimalist design and approach to the way its UI components are designed, give it the ability of extensive customization, which is what makes it one of the biggest

Reference

ZURB Foundation

https://get.foundation/

Wikipedia

Tags:

Share

You may also like...

1 Response

  1. BISACCIA97 says:
    November 10, 2021 at 4:07 am

    ???? ??????? ???!!

    ?????? ???????????????? ????????? ???? ??????? ??? ??????? ????? ???????????? ?????????. ????? ???? ????? ?????? ??? ????? ? ??????? ?? ?????????????? ????????????????? ?????? ??????? ???? ??? ????? ??? ?? ?????????? ?? ???? ??? ??????? ? ???????? ? ???????????. ???????????? ?????????????? ???? ????? ?????? ?????????? ?????? ?????? ?????? ?????????? ????? ? ??? ?????????? ?????????? ??????? ??????? ? ??????????? ??????? ? ?? 11 ???????????? ?????????????????? ? ?????????? ? ???????? ??? 98 96 ??????????? ???????. ?????????????? https://deltavfd.ru/ ????????????. ? ???? ????????? ????? ???????? ??????? ?????????? ? ????????????? ???????? ????? ? ????? ??? ?????????? ??????. ??? ??????? ???????????? ????? ??????? ???????????? ??????????? ? ??? ???????? ????????????. ????? ??????? ????? ?????????? ?????????? ?????????? ?????? ?????????? ??????????? ??????????. ? ????? ???? ?????????? ??????. ??????????? ? ?????? ????? ????? ??? ??????????? ?????? ??????????????? ?? ??? ????? ? ????????? ????? ???????? ? ????? ?????? ?????????????? ???????????? ? ????????? ??????????????? ???????? ?????? ????????????
    ???????? ???!