Foundation CSS is an open-source, responsive front-end framework developed by ZURB in September 2011. It’s a powerful tool that simplifies the creation of visually appealing responsive websites, apps, and emails that function seamlessly on any device. Renowned companies such as Facebook, eBay, Mozilla, Adobe, and even Disney utilize it.
The framework is built on the principles of Bootstrap and bears similarities to SaaS. However, it offers more complexity, flexibility, and configurability. It also includes a command-line interface, making it easy to use with module bundlers.
In this Foundation CSS tutorial, you will learn how to use Foundation CSS to design and style web pages. You will begin with Foundation CSS fundamentals, such as basic Foundation CSS classes, components, and utilities. You will also learn about layout and responsiveness in Foundation CSS.
Then, you will progress to advanced Foundation CSS topics, such as using the Foundation CSS grid system, navigation, forms, buttons, and more. You will also explore how to use Foundation CSS to create dynamic and interactive web content, such as modals, tooltips, and carousels.
Why Choose Foundation CSS?
Foundation CSS offers several advantages that make it a preferred choice for developers:
- Speedy Development: It uses the Sass compiler, which is significantly faster than the default compiler, allowing for quicker development.
- Enhanced Features: It adds elements like pricing tables, switches, joyride, range sliders, lightbox, and more to your website.
- Development Packages: It includes development packages such as Grunt and Libsass for faster coding and control.
- Foundation for Apps: This feature allows you to build fully responsive web applications.
- Open Source and Community Support: Being open-source, it has robust community support.
How to use Foundation CSS?
We can use Foundation CSS in different Ways:
Method 1: Go to the official documentation https://get.foundation/ and click on the Download All button to use it offline.
Method 2: Use the following CDN Links inside the head tag.
<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">
<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>
Now let's understand how to use it using an example.
Example: This example illustrates the use of customize column for the menu.
HTML <!DOCTYPE html> <html class="no-js" lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href= "https://dhbhdrzi4tiry.cloudfront.net/cdn/sites/foundation.min.css" /> </head> <body> <style> .row { padding: 1rem 0; } .singleline { padding-right: 1rem; } </style> <div class="row"> <h2>Customize Menu using Foundation</h2> <!--Basic Menu--> <div class="columns"> <h4>Basic Menu</h4> </div> </div> <div class="row"> <div class="columns"> <ul class="menu"> <li><a href="#"> Programming Language </a></li> <li><a href="#">Articles</a></li> <li><a href="#">Blogs</a></li> <li><a href="#">DSA</a></li> </ul> </div> </div> <!--Alignment Menu--> <div class="row"> <div class="columns"> <h4>Alignment Menu</h4> <ul class="menu align-right"> <li><a href="#"> Programming Language </a></li> <li><a href="#">Articles</a></li> <li><a href="#">Blogs</a></li> <li><a href="#">DSA</a></li> </ul> <div> <ul class="menu expanded"> <li><a href="#">Articles</a></li> </ul> <ul class="menu expanded"> <li><a href="#">Blogs</a></li> <li><a href="#">DSA</a></li> </ul> <ul class="menu expanded"> <li><a href="#"> Programming Language </a></li> <li><a href="#">Blogs</a></li> <li><a href="#">DSA</a></li> </ul> <ul class="menu expanded"> <li><a href="#"> Programming Language </a></li> <li><a href="#">Articles</a></li> <li><a href="#">Blogs</a></li> <li><a href="#">DSA</a></li> </ul> </div> </div> </div> <!--Vertical Menu--> <div class="row"> <div class="column"> <h4>Vertical Menu</h4> <ul class="vertical menu"> <li><a href="#"> Programming Language </a></li> <li><a href="#">Articles</a></li> <li><a href="#">Blogs</a></li> <li><a href="#">DSA</a></li> </ul> </div> </div> <!--Simple Style--> <div class="row"> <div class="column"> <h4>Simple Style</h4> <ul class="menu simple"> <li class="singleline"> <a href="#">DSA</a> </li> <li><a href="#"> Programming Language </a></li> <li><a href="#">Articles</a></li> <li><a href="#">Blogs</a></li> </ul> </div> </div> <!--Nested Style--> <div class="row"> <div class="column"> <h4>Nested Style</h4> <ul class="vertical menu"> <li> <a href="#">DSA</a> <ul class="nested vertical menu"> <li><a href="#">Contribute</a></li> <li><a href="#"> Programming Language </a></li> <li><a href="#">Articles</a></li> <li><a href="#">Blogs</a></li> </ul> </li> <li><a href="#">Programming Language</a></li> <li><a href="#">DSA</a></li> <li><a href="#">Blogs</a></li> </ul> </div> </div> <script src="https://code.jquery.com/jquery-2.1.4.min.js"> </script> <script src= "https://dhbhdrzi4tiry.cloudfront.net/cdn/sites/foundation.js"> </script> <script> $(document).foundation(); </script> </body> </html> Output:
Differences between Foundation CSS and CSS
| Feature | Foundation CSS | Raw CSS |
|---|
| Ease of Use | High. Pre-built components and grid systems allow for rapid layout and styling | Lower. Requires manual coding of all styles and structural elements. |
| Customization | Flexible customization of components with Sass variables. | Unlimited customization potential, but requires more in-depth CSS knowledge. |
| Learning Curve | Moderate. Understanding Foundation-specific classes and structure takes some time. | Steeper. Requires a solid foundation in CSS concepts. |
| Mobile Responsiveness | Built-in responsive design capabilities. | Requires careful planning and media queries to implement responsiveness. |
| Browser Compatibility | Generally good compatibility handled by the framework. | Requires attention to cross-browser quirks and testing. |
| File Size | Can become larger if you include many components. | Smaller footprint if you only code what's needed. |
Advantages of Foundation CSS
Foundation CSS is a powerful, open-source front-end framework that offers numerous advantages for web development:
- Customizable: Foundation CSS allows you to include or exclude certain elements while working on a project, enabling you to style your project as you wish without making your website look the same as others.
- Easy to Learn and Use: If you have a basic understanding of HTML and CSS, you’ll find Foundation CSS straightforward to learn and use.
- Open Source and Free: As an open-source front-end framework, Foundation CSS is freely available for everyone to use.
- Responsive: Foundation CSS is excellent for creating responsive websites that look great on all devices.
- Cleaner Code: Foundation CSS helps make your code cleaner due to its HTML and CSS components.
- Simplifies Development: Foundation CSS comes with development packages like icon fonts, CMS templates, Grunt, Libsass, themes, tools, and more, which can help you code faster and better.
- Strong Support Community: Foundation CSS has a strong community that you can reach out to whenever you encounter any issues.
- Semantic Coding: Foundation CSS allows you to code websites semantically with its SCSS mixin features.
- Powerful Grid System: Foundation CSS helps you create outstanding multi-device layouts with its 12-column, nestable grid.
Benefits of Foundation CSS
- Rapid Development: Pre-built components and a responsive grid system streamline your workflow.
- Customization: Easily tailor styles with Sass variables, ensuring a unique look for your website.
- Mobile-First Design: Your website seamlessly adapts to different screen sizes for optimal viewing.
- Cross-Browser Compatibility: Eliminate the headache of manual fixes with Foundation's focus on rendering consistency.
- Strong Community and Resources: Get support and find helpful tutorials or documentation when needed.
Similar Reads
Web Development Technologies Web development refers to building, creating, and maintaining websites. It includes aspects such as web design, web publishing, web programming, and database management. It is the creation of an application that works over the internet, i.e., websites.Core Concepts of Web Development TechnologiesWeb
8 min read
HTML Tutorial HTML stands for HyperText Markup Language. It is the standard language used to create and structure content on the web. It tells the web browser how to display text, links, images, and other forms of multimedia on a webpage. HTML sets up the basic structure of a website, and then CSS and JavaScript
11 min read
CSS Tutorial CSS stands for Cascading Style Sheets. It is a stylesheet language used to style and enhance website presentation. CSS is one of the three main components of a webpage, along with HTML and JavaScript.HTML adds Structure to a web page.JavaScript adds logic to it and CSS makes it visually appealing or
7 min read
CSS Frameworks
Bootstrap TutorialBootstrap is a popular front-end framework for building responsive and mobile-first websites. It provides pre-designed CSS, JavaScript components, and utility classes to quickly create modern and consistent user interfaces.It Includes pre-built responsive grid systems for mobile-first design.Offers
4 min read
Bootstrap 5 TutorialBootstrap 5 is a front-end framework that helps developers create responsive and visually appealing websites quickly and efficiently. Bootstrap 5 simplifies the process of web development with its intuitive design system and extensive components. This version includes improved responsiveness, stream
6 min read
Tailwind CSS TutorialTailwind CSS is a utility-first CSS framework that makes it easy to build custom designs without writing custom CSS. It allows you to apply individual utility classes directly in your HTML, which helps create fully customized layouts with minimal effort.Tailwind provides many utility classes for bui
7 min read
Bulma TutorialBulma is an Open source CSS framework developed by Jeremy Thomas. This framework is based on the CSS Flexbox property. It is highly responsive and minimizes the use of media queries for responsive behavior.BulmaWhy Bulma?It is easy to learn.It is used to create responsive design for all devices (des
2 min read
Pure CSSPure CSS is a CSS framework. It is a set of free and open-source tools for building responsive websites and web applications. Yahoo developed this, which is used to make websites that are quicker, more elegant, and more responsive. It is a viable alternative to Bootstrap. Pure CSS is designed with k
2 min read
Materialize CSSMaterialize CSS is a design language that combines the classic principles of successful design along with innovation and technology. It is created and designed by Google. Google’s goal is to develop a system of design that allows for a unified user experience across all its products on any platform.
2 min read
Foundation CSS TutorialFoundation CSS is an open-source, responsive front-end framework developed by ZURB in September 2011. It’s a powerful tool that simplifies the creation of visually appealing responsive websites, apps, and emails that function seamlessly on any device. Renowned companies such as Facebook, eBay, Mozil
6 min read
Semantic UISemantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. It uses a class to add CSS to the elements. Semantic UIWhy Semantic UI?Semantic UI is
2 min read
Primer CSSPrimer CSS is a free open-source CSS framework built with the GitHub design system to support the broad spectrum of Github websites. It creates the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure that our patterns are steady and intero
3 min read
Spectre CSSSpectre CSS is a lightweight, responsive, and modern CSS framework that allows for speedier development and extensibility. It provides the essential elements and typographic stylings, as well as a responsive layout system based on the flexbox feature. It was created by Yan Zhu and first introduced i
4 min read
CSS Preprocessor
JavaScript Tutorial JavaScript is a programming language used to create dynamic content for websites. It is a lightweight, cross-platform, and single-threaded programming language. It's an interpreted language that executes code line by line, providing more flexibility.JavaScript on Client Side: On the client side, Jav
11 min read
JavaScript Libraries
LodashLodash is a JavaScript library that works on the top of underscore.js. It helps in working with arrays, strings, objects, numbers, etc. It provides us with various inbuilt functions and uses a functional programming approach which that coding in JavaScript easier to understand because instead of wri
7 min read
D3.jsD3.js, short for Data-Driven Documents, is a powerful JavaScript library used to create dynamic and interactive data visualizations in web browsers. Developed by Mike Bostock in 2011, it leverages HTML, CSS, and SVG for visualization. In this D3.js tutorial, you'll delve into creating dynamic and in
6 min read
Vue.js TutorialVue.js is a progressive JavaScript framework for building user interfaces. It stands out for its simplicity, seamless integration with other libraries, and reactive data binding.Built on JavaScript for flexible and component-based development.Supports declarative rendering, reactivity, and two-way d
4 min read
Underscore.jsWhat is Underscore.js? Underscore.js is a lightweight JavaScript library and not a complete framework that was written by Jeremy Ashkenas. It provides utility functions for a variety of use cases in our day-to-day common programming tasks. Underscore.js provides a lot of features that make our task
4 min read
Introduction To TensorFlow.jsTensorFlow.js is the popular library of JavaScript that helps us add machine learning functions to web applications. Tensor is the datatype which is used in the TensorFlow.Now, let us understand the TensorFlow.js and its components.What is TensorFlow.js?TensorFlow.js is the JavaScript library that a
4 min read
Collect.jsCollect.js is the javascript library for collecting data from tree-based structures. This library is used on JavaScript Array and Objects. Collect.js TutorialWhy Collect.js? It is a fluent and convenient wrapper for working with arrays and objects. It provides us with different functions that help i
1 min read
Fabric.jsFabric.js is an open-source JavaScript canvas library, that provides the interactive object model built on top of the canvas element. It is also an SVG-to-canvas & canvas-to-SVG parser. It was made by Juriy Zaytsev and was first launched in 2010. Object-based drawing is one of the sophisticated
3 min read
p5.jsp5.js is a JavaScript library for creative coding, with attention to making code accessible and inclusive for artists, designers, educators, beginners, and anyone else. It is a free and open-source library i.e. it can be accessible to everyone. In this p5.js tutorial, we will learn the essential kno
2 min read
ReactJS
React TutorialReact is a JavaScript Library known for front-end development (or user interface). It is popular due to its component-based architecture, Single Page Applications (SPAs), and Virtual DOM for building web applications that are fast, efficient, and scalable.Applications are built using reusable compon
8 min read
Next.js TutorialNext.js is a popular React framework that extends React's capabilities by providing powerful tools for server-side rendering, static site generation, and full-stack development. It is widely used to build SEO-friendly, high-performance web applications easily.Built on React for easy development of f
6 min read
React Material UIMUI or Material UI is an open-source React Components library that is based on Google's Material Design and provides the predefined UI components for React.Material UI is a UI library that provides predefined react components implementing Google's Material Design. Material UI is a design language bu
5 min read
React Bootstrap TutorialReact-Bootstrap is a popular front-end framework that combines the power of React with the simplicity of Bootstrap. It provides a modern way to build responsive and mobile-first web applications with prebuilt React components styled using Bootstrap.Easy to use React components for Bootstrap-based de
4 min read
React SuiteReact Suite is a popular front-end library with a set of React components that are designed for the middle platform and back-end products. The input component allows the user to allow the user to create a basic widget for getting the user input in a text field. We can use the following approach in R
2 min read
Ant DesignAnt Design is a React UI development system that empowers designers and developers to build beautiful, modern products with flexibility and ease. It offers a robust design system with a rich set of pre-built components, extensive customisation options, and a focus on efficiency, making it easy to us
4 min read
ReactJS ReactstrapReactstrap is a React component library for Bootstrap. Reactstrap is a bootstrap-based React UI library that is used to make good-looking webpages with its seamless and easy-to-use component. Reactstrap does not embed its style, but it depends upon the Bootstrap CSS framework for its styles and them
2 min read
BlueprintJSBlueprintJS is a React-based UI toolkit for the web. It is written in Typescript. This library is very optimized and popular for building interfaces that are complex data-dense for desktop applications that run in a modern web browser. It is optimized for building complex data-dense interfaces for d
2 min read
AngularJS
jQuery
jQuery TutorialjQuery is a lightweight JavaScript library that simplifies the HTML DOM manipulating, event handling, and creating dynamic web experiences. The main purpose of jQuery is to simplify the usage of JavaScript on websites. jQuery achieves this by providing concise, single-line methods for complex JavaSc
8 min read
jQuery UIjQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you’re building highly interactive web applications, or you just need to add a date picker to a form control, jQuery UI is a perfect choice. This JavaScript
3 min read
jQuery MobilejQuery Mobile is an HTML5-based user interface system designed to make responsive websites and apps that are accessible on all smartphone, tablet, and desktop devices. Why jQuery Mobile? jQuery Mobile framework takes the “write less, do more†mantra to the next level. Instead of writing unique appli
2 min read
jQWidgetsjQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful and optimized framework, platform-independent, and widely supported. It has more than 60 UI widgets that help to create attractive UI designs. Download and Install jQWidgets Downloa
2 min read