<commit_before># ZURB Foundation Building Blocks

**Piece together amazing sites faster with Foundation Building Blocks.** ZURB Building Blocks is a pattern library for Foundation UI components. These HTML, CSS, and JS snippets can be plugged into any Foundation project to build faster. Enjoy!

[![devDependency Status](https://david-dm.org/zurb/foundation-zurb-template/dev-status.svg)](https://david-dm.org/zurb/foundation-zurb-template#info=devDependencies)

# What is a Building Block?
Building Blocks are coded UI components designed to be dropped into Foundation projects. Many Building Blocks are based on tried and true patterns that we’ve used in our client projects over the last five years using Foundation.

### Building Blocks are:
- Code that works in any Foundation project (matching version)
- Lightly styled components
- Easy to extend or customize
- Common solutions to layout or component challenges that are not core to the Framework

### A Building Block is NOT:
- A template 
- A theme
- A place to dump code
- Overly stylized

We want these to be code you can add to your website to solve common patterns, build faster, and integrate with your existing styles.

# How to use a Building Block

Building Blocks are easy to use in your projects whether you’re using a CSS version or the powerful ZURB Stack. Below, we’ve outlined how to get a Building Block into your project in a snap and build faster.

## Copy it

Like a Building Block? You can copy the HTML and CSS/SCSS and JS (if applicable) from the Building Block detail page. You’ll see a responsive preview and any relevant information at the top of the page. Below the preview you’ll find the code for the component.

The HTML, CSS, and JS toggles let you focus on one section at a time if you’d like.

![](https://drive.google.com/a/zurb.com/file/d/0B3omzFyAxfEAQTRyMzRFTnB4UFk/view?usp=drivesdk)

You can copy the the code from each code container using the handy copy button.

![](https://drive.google.com/a/zurb.com/file/d/0B3omzFyAxfEAQ1R1aXJtcGd3Nms/view?usp=drivesdk)

If you are using CSS vs SCSS, you can toggle to the compiled CSS using this handy toggle:

![](https://drive.google.com/a/zurb.com/file/d/0B3omzFyAxfEATnJJUWh1T2U5b0U/view?usp=drivesdk)

If you’re using the CSS version of Foundation, it’s best to add the CSS to your app.css file that is included with the downloaded Foundation CSS project. You can make any style overrides from there.

If you’re using the ZURB Stack Sass version, a custom SCSS partial is the best place to add the Building Block’s SCSS. The JS can be added to `app.js`. But if you’re a fan of optimization, we suggest you use the Foundation CLI install to do all this automatically for you.

## Download a kit
Looking to start with a Building Block kit? Kits are large collections of Building Blocks that are matched to each other for a specific type of Site, App, or use case. To save you time over the copy/paste method of individual Building Blocks, you can download a zip file of the kit. For each Building Block, it will come with:
- Individual HTML files
- Individual CSS files for each
- Individual SCSS files in case you want to manually add them to a Sass project
- Individual JS files (if applicable)

Again, if you’re using the ZURB Stack, the Foundation CLI can do this for you. Find out how below.

## Foundation CLI Install<commit_msg>Closes #112 - Bug Fix - Wrong Image Linking in the docs!<commit_after># ZURB Foundation Building Blocks

**Piece together amazing sites faster with Foundation Building Blocks.** ZURB Building Blocks is a pattern library for Foundation UI components. These HTML, CSS, and JS snippets can be plugged into any Foundation project to build faster. Enjoy!

[![devDependency Status](https://david-dm.org/zurb/foundation-zurb-template/dev-status.svg)](https://david-dm.org/zurb/foundation-zurb-template#info=devDependencies)

# What is a Building Block?
Building Blocks are coded UI components designed to be dropped into Foundation projects. Many Building Blocks are based on tried and true patterns that we’ve used in our client projects over the last five years using Foundation.

### Building Blocks are:
- Code that works in any Foundation project (matching version)
- Lightly styled components
- Easy to extend or customize
- Common solutions to layout or component challenges that are not core to the Framework

### A Building Block is NOT:
- A template 
- A theme
- A place to dump code
- Overly stylized

We want these to be code you can add to your website to solve common patterns, build faster, and integrate with your existing styles.

# How to use a Building Block

Building Blocks are easy to use in your projects whether you’re using a CSS version or the powerful ZURB Stack. Below, we’ve outlined how to get a Building Block into your project in a snap and build faster.

## Copy it

Like a Building Block? You can copy the HTML and CSS/SCSS and JS (if applicable) from the Building Block detail page. You’ll see a responsive preview and any relevant information at the top of the page. Below the preview you’ll find the code for the component.

The HTML, CSS, and JS toggles let you focus on one section at a time if you’d like.

![](https://i.imgur.com/R3as9Aq.png)

You can copy the the code from each code container using the handy copy button.

![](https://i.imgur.com/9WOZUQp.png)

If you are using CSS vs SCSS, you can toggle to the compiled CSS using this handy toggle:

![](https://i.imgur.com/nNjwiTm.png)

If you’re using the CSS version of Foundation, it’s best to add the CSS to your app.css file that is included with the downloaded Foundation CSS project. You can make any style overrides from there.

If you’re using the ZURB Stack Sass version, a custom SCSS partial is the best place to add the Building Block’s SCSS. The JS can be added to `app.js`. But if you’re a fan of optimization, we suggest you use the Foundation CLI install to do all this automatically for you.

## Download a kit
Looking to start with a Building Block kit? Kits are large collections of Building Blocks that are matched to each other for a specific type of Site, App, or use case. To save you time over the copy/paste method of individual Building Blocks, you can download a zip file of the kit. For each Building Block, it will come with:
- Individual HTML files
- Individual CSS files for each
- Individual SCSS files in case you want to manually add them to a Sass project
- Individual JS files (if applicable)

Again, if you’re using the ZURB Stack, the Foundation CLI can do this for you. Find out how below.

## Foundation CLI Install
{'fraction_non_alphanumeric': 0.05603383174747017, 'fraction_numerical': 0.0030206917384080953, 'mean_word_length': 4.218282111899133, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 10, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 6, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3970532', 'n_tokens_mistral': 1811, 'n_tokens_neox': 1751, 'n_words': 1018}