The Foundation team has cut your development time in half again. Today we're thrilled to share Foundation Building Blocks with you- a comprehensive, open-source library of coded UI components you can drop into any standard Foundation project to give yourself a massive head start in your projects.
Hundreds of Coded UI Components for Your Foundation Projects
The Foundation Building Blocks library has been rebuilt from the ground up with over 100 code snippets in six categories including Navigation, Status, Control, Media, Containers and Form components. Built by the ZURB team, these are the most common and useful design patterns and UI components we've found in our two decades of web development work. Just browse the library, select the Building Block you need, and copy and paste the code into your project.
Powerful Kits to Help You Build A Diverse Range of Sites
Download ZURB-curated bundles of Building Blocks called Kits that are organized by project type so you have exactly what you need to build specific kinds of websites and apps. There are seven kit types available including Blog, Portfolio, Ecommerce, Marketing, Dashboard, Mobile App, and Travel - each containing the specific mix of Building Blocks you'll need to complete your project. Unlike a template, a kit doesn't dictate a page layout or design, but rather gives you a set of ready-to-use components that integrate naturally into your design.
Components Created by the Global Foundation Community
Battle-tested by designers and developers around the world and reviewed by ZURB, the Foundation Building Blocks library will continue to expand with components created by the Foundation community. Have an idea for component or pattern? Submit it using our easy to follow guidelines and it will be reviewed by the ZURB team and made available to the community.
Code That Will Cut Your Development Time in Half
Building Blocks are specifically built for Foundation projects, which means you won't need to worry about compatibility issues or dependencies. You won't find any pointless experiments or explorations, either. Instead, you'll find real, usable, and practical components every designer needs based on our two decades of designing for the web.
Both Kits and Building Blocks can be easily downloaded from the website. You can also copy and paste individual Building Blocks into Foundation projects. After installing the new 2.2.0 version of the Foundation CLI, Building Blocks and Kits can even be downloaded and installed automatically into ZURB stack projects, available instantly as ready-to-use partials. Simply run npm install -g [email protected] and then foundation kits install <kitname> in any project for Kits or foundation blocks install <blockname> for individual Building Blocks.
We've been using Building Blocks internally in our client work to give ourselves a head start in our projects, and we've seen our development time cut in half. We're excited to see the Foundation Building Blocks library continue to grow with new Building Blocks and Kits from the ZURB team and our amazing community of Foundation users!