<commit_before><!-- Copyright 2015. Author: <NAME>. All Rights Reserved. MIT License -->

# AngularWidthQuery

AngularWidthQuery is a set of directives which applies HTML classes to 
one or more elements based upon a container element's width.

It was created to support fluid layouts in situations where the container
element's width changes due to the user opening and closing other panels in 
the UI.

AngularWidthQuery is a substitute for CSS media queries which applies
CSS rules based upon the screen width, rather than an element's width.


## Table of Contents

- [Features](#features)
- [Installation](#installation)
- [Example](#example)
- [Usage](#usage)
    - [Factory Method](#factory-method)
    - [WidthQuery Directive](#widthquery-directive)
    - [WidthQueryClass Directive](#widthqueryclass-directive)
   
## Features

* Less than 4K minified.
* CSS transition and animation aware.
* Customizable directive names.
* Compatible with CommonJS, AMD, and non-module build environments.

## Installation

To install the package:

    npm install angular-width-query
    
To require the package:    

```javascript
var widthQueryDirective = require("angular-width-query");
```     

## Example

The easiest way to understand AngularWidthQuery is to walk 
through a quick example of creating a fluid layout consisting of 6 
equally sized sections. At small width, the sections are stacked. 
At medium width, the sections are arranged in two columns. At large width,
the sections are arranged in three columns.

### 1. Add the Directives

First, add the directives from AngularWidthQuery to an Angular module.

```javascript
widthQueryDirective('app');
```    

### 2. Create the HTML Structure

Next, create the HTML structure for the container and the 6 sections.
The values passed to the directives are the base HTML classes that will
be initially added to the elements.

```html
<div width-query="container">
    <div width-query-class="section">Section 1</div>
    <div width-query-class="section">Section 2</div>
    <div width-query-class="section">Section 3</div>
    <div width-query-class="section">Section 4</div>
    <div width-query-class="section">Section 5</div>
    <div width-query-class="section">Section 6</div>
</div>

```
### 3. Create the CSS

Lastly, create the CSS rules.

```css
.container {
    font-size: 0;
}

.section {
    border: 1px solid #c0c0c0;
    display: inline-block;
    font-size: 1rem;
    height: 300px;
}

.section-large {
    width: 33.33%;
}

.section-medium {
    width: 50%;
}

.section-small {
    width: 100%;
}
```

That's it. You're done. 

Of course, the classes, and how they are applied, are fully customizable.
See the Usage section below for the details.

## Usage

### Factory Method
<commit_msg>README update.<commit_after><!-- Copyright 2015. Author: <NAME>. All Rights Reserved. MIT License -->

# AngularWidthQuery

AngularWidthQuery is a set of directives which applies HTML classes to 
one or more elements based upon a container element's width.

It was created to support fluid layouts in situations where the container
element's width changes due to the user opening and closing other panels in 
the UI.

AngularWidthQuery is a substitute for CSS media queries which applies
CSS rules based upon the screen width, rather than an element's width.


## Table of Contents

- [Features](#features)
- [Installation](#installation)
- [Example](#example)
- [Usage](#usage)
    - [Factory Method](#factory-method)
    - [WidthQuery Directive](#widthquery-directive)
    - [WidthQueryClass Directive](#widthqueryclass-directive)
   
## Features

* Less than 4K minified.
* CSS transition and animation aware.
* Customizable directive names.
* Compatible with CommonJS, AMD, and non-module build environments.

## Installation

To install the package:

    npm install angular-width-query
    
To require the package:    

```javascript
var widthQueryDirective = require("angular-width-query");
```     

## Example

The easiest way to understand AngularWidthQuery is to walk 
through a quick example of creating a fluid layout consisting of 6 
equally sized sections. At small width, the sections are stacked. 
At medium width, the sections are arranged in two columns. At large width,
the sections are arranged in three columns.

### 1. Add the Directives

First, add the directives from AngularWidthQuery to an Angular module.

```javascript
widthQueryDirective('app');
```    

### 2. Create the HTML Structure

Next, create the HTML structure for the container and the 6 sections.

```html
<div width-query="container">
    <div width-query-class="section">Section 1</div>
    <div width-query-class="section">Section 2</div>
    <div width-query-class="section">Section 3</div>
    <div width-query-class="section">Section 4</div>
    <div width-query-class="section">Section 5</div>
    <div width-query-class="section">Section 6</div>
</div>
```

The values passed to the directives are the base HTML classes that will
be initially added to the elements.

Based upon the current container element width, classes are dynamically 
added to the elements to reflect the current width.

For example, "container-small" and "section-small" will be added to their
respective elements when the width of the container element is considered
to be small.

Of course, the width ranges and class modifiers are fully customizable.
See the Usage section below for details.

### 3. Create the CSS

Lastly, create the CSS rules.

```css
.container {
    font-size: 0;
}

.section {
    border: 1px solid #c0c0c0;
    display: inline-block;
    font-size: 1rem;
    height: 300px;
}

.section-large {
    width: 33.33%;
}

.section-medium {
    width: 50%;
}

.section-small {
    width: 100%;
}
```

That's it. You're done. 

## Usage

### Factory Method

{'fraction_non_alphanumeric': 0.09790089470061941, 'fraction_numerical': 0.01169993117687543, 'mean_word_length': 3.95144804088586, 'pattern_counts': {'":': 0, '<': 35, '<?xml version=': 0, '>': 35, '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': '1581310', 'n_tokens_mistral': 1738, 'n_tokens_neox': 1594, 'n_words': 676}