<commit_before># Approaches To Styling
Example code for styling web apps at multiple skill levels. Examples include CSS
frameworks, pre-processors, and postCSS.

## Getting Started

This repository contains three project folders, each containing an approach to
styling. To open a project in your browser, install its package dependencies and
and run the start script. For example:

```
cd 01-for-beginners/
npm install
npm start
```

Now open your web browser to [http://localhost:3000](http://localhost:3000).

## Essential Links

[css guidelines](http://csswizardry.com/2014/08/css-guidelines-2-0-0/)

[About HTML semantics and front-end architecture](http://nicolasgallagher.com/about-html-semantics-front-end-architecture/)

[CSS Modules](http://glenmaddern.com/articles/css-modules)

## CSS Frameworks

#### Bootstrap
##### upsides
* Gets you up and going with styles for free
* Most popular -> very good support
##### downsides
* Hard to make work for heavily customized sites
* Most popular -> your apps look a lot like everyone elses
* Heavy, lots of code that gets unused

Link: [bootstrap](http://getbootstrap.com/)

#### Foundation
##### upsides
* Up and going with styles for free
* Different styles than bootstrap
##### downsides
* Hard to make work for heavily customized sites

Link: [foundation](http://foundation.zurb.com/)

#### Materialize
##### upsides
* Visually appealing styles out of the box<commit_msg>spacing issues w/ MD<commit_after># Approaches To Styling
Example code for styling web apps at multiple skill levels. Examples include CSS
frameworks, pre-processors, and postCSS.

## Getting Started

This repository contains three project folders, each containing an approach to
styling. To open a project in your browser, install its package dependencies and
and run the start script. For example:

```
cd 01-for-beginners/
npm install
npm start
```

Now open your web browser to [http://localhost:3000](http://localhost:3000).

## Essential Links

[css guidelines](http://csswizardry.com/2014/08/css-guidelines-2-0-0/)

[About HTML semantics and front-end architecture](http://nicolasgallagher.com/about-html-semantics-front-end-architecture/)

[CSS Modules](http://glenmaddern.com/articles/css-modules)

## CSS Frameworks

#### Bootstrap
##### upsides
* Gets you up and going with styles for free
* Most popular -> very good support

##### downsides
* Hard to make work for heavily customized sites
* Most popular -> your apps look a lot like everyone elses
* Heavy, lots of code that gets unused

Link: [bootstrap](http://getbootstrap.com/)

#### Foundation
##### upsides
* Up and going with styles for free
* Different styles than bootstrap

##### downsides
* Hard to make work for heavily customized sites

Link: [foundation](http://foundation.zurb.com/)

#### Materialize
##### upsides
* Visually appealing styles out of the box

{'fraction_non_alphanumeric': 0.10998603351955308, 'fraction_numerical': 0.013268156424581005, 'mean_word_length': 4.707171314741036, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 7, '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': '4166165', 'n_tokens_mistral': 855, 'n_tokens_neox': 775, 'n_words': 318}