<commit_before># Fabric Tutorial Part 1

###Contents

- [Overview](#overview)
- [Components Overview](#components-overview)
- [Step 1 – Setting up your project](#setting-up-your-project)
- [Step 2 – Adding Fabric to a project](#adding-to-a-project)
- [Step 3 – Prepping your app](#prepping-your-app)
- [Step 4 – Using Fabric components](#using-fabric-components)
- [Step 5 – Using Fabric typography](#using-fabric-typography)
- [Step 6 – Adding more complex components](#adding-complex-components)

## Overview

Fabric is an HTML and CSS framework that works like a skin to help your experiences look and feel like Office and O365. To demonstrate how to use Fabric, let’s build a simple ToDo application. For this tutorial, we will focus mainly on using Fabric components to get our app looking solid as quickly as possible.

## Components Overview

Components are snippets of HTML and CSS that can be used in any application as a skin for common UI elements like Textfields, Toggle Switches, Lists, and People Pickers. Fabric’s components exist in Microsoft products today and are used by millions of customers. Components can be manipulated fairly easily, and in this tutorial, we will be tweaking a few of them.

Now, let's get started building our application!

## Step 1 – Setting up your project

Let's set up our project folder to look like the following:

```<commit_msg>framework -> toolkit<commit_after># Fabric Tutorial Part 1

###Contents

- [Overview](#overview)
- [Components Overview](#components-overview)
- [Step 1 – Setting up your project](#setting-up-your-project)
- [Step 2 – Adding Fabric to a project](#adding-to-a-project)
- [Step 3 – Prepping your app](#prepping-your-app)
- [Step 4 – Using Fabric components](#using-fabric-components)
- [Step 5 – Using Fabric typography](#using-fabric-typography)
- [Step 6 – Adding more complex components](#adding-complex-components)

## Overview

Fabric is an HTML and CSS toolkit that works like a skin to help your experiences look and feel like Office and O365. To demonstrate how to use Fabric, let’s build a simple ToDo application. For this tutorial, we will focus mainly on using Fabric components to get our app looking solid as quickly as possible.

## Components Overview

Components are snippets of HTML and CSS that can be used in any application as a skin for common UI elements like Textfields, Toggle Switches, Lists, and People Pickers. Fabric’s components exist in Microsoft products today and are used by millions of customers. Components can be manipulated fairly easily, and in this tutorial, we will be tweaking a few of them.

Now, let's get started building our application!

## Step 1 – Setting up your project

Let's set up our project folder to look like the following:

```
{'fraction_non_alphanumeric': 0.07745204487875498, 'fraction_numerical': 0.007962359753890699, 'mean_word_length': 4.617886178861789, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 4, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '611828', 'n_tokens_mistral': 773, 'n_tokens_neox': 704, 'n_words': 389}