Foundation CSS is an open-source and responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to layout stunning responsive websites, apps, and emails that appear amazing and can be accessible to any device. It is used by many companies such as Facebook, eBay, Mozilla, Adobe, and even Disney. The framework is built on SaaS-like bootstrap. It is more sophisticated, flexible, and easily customizable. It also comes with CLI, so it’s easy to use it with module bundlers. It offers the Fastclick.js tool for faster rendering on mobile devices. In this article, we will discuss the Kitchen Sink Grid in Foundation CSS. Foundation CSS Kitchen Sink has the foundation elements to work well in our websites and applications. The Kitchen Sink Grid is used to make responsive layout designs both for web app as well as the mobile app.
Foundation CSS Kitchen Sink Grid Classes:
- [size]-n: This class is used to specify the alignment of various column in a row at different screen sizes. Here size can be small, medium or large and n can be 1,2,3,4,5,6,7,8.
- column: This class is used to define the current element as a column.
Syntax:
<div class ="row callout">
<div class="callout small-n medium-n large-n column">
...........
</div>
</div>Example 1: Below is the example that illustrates the use of Kitchen Sink Grid using various screen sizes class.
<!DOCTYPE html> <html lang="en">
<head>
<title>Foundation CSS Kitchen Sink Grid</title>
<link rel="stylesheet" href=
crossorigin="anonymous">
<link rel="stylesheet"
href=
crossorigin="anonymous">
<link rel="stylesheet" href=
crossorigin="anonymous">
<link rel="stylesheet" href=
crossorigin="anonymous">
<script src=
</script>
<script crossorigin="anonymous" src=
</script>
<script src=
</script>
</head>
<body>
<center>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h5>Foundation CSS Kitchen Sink Grid</h5>
<div class="row callout">
<div class="callout small-2
medium-3 large-4 columns">
small-2 medium-3 large-4 columns
</div>
<div class="callout small-4
medium-3 large-4 columns">
small-4 medium-3 large-4 columns
</div>
<div class="callout small-6
large-4 columns">
small-6 medium-3 large-4 columns
</div>
</div>
</center>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
</body>
</html>
|
Output:
Example 2: Below is the another example that illustrates the use of Kitchen Sink Grid using various screen sizes class.
<!DOCTYPE html> <html lang="en">
<head>
<title>Foundation CSS Kitchen Sink Grid</title>
<link rel="stylesheet" href=
crossorigin="anonymous">
<link rel="stylesheet"
href=
crossorigin="anonymous">
<link rel="stylesheet" href=
crossorigin="anonymous">
<link rel="stylesheet" href=
crossorigin="anonymous">
<script src=
</script>
<script crossorigin="anonymous" src=
</script>
<script src=
</script>
</head>
<body>
<center>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h5>Foundation CSS Kitchen Sink Grid</h5>
<div class="row callout">
<div class="callout large-3 columns">
small-12 medium-12 large-3 columns
</div>
<div class="callout large-6 columns">
small-12 medium-12 large-6 columns
</div>
<div class="callout large-3 columns">
small-12 medium-12 large-3 columns
</div>
</div>
</center>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
</body>
</html>
|
Output:
Reference: https://get.foundation/sites/docs/kitchen-sink.html#grid