<commit_before>---
layout: default
---

## Display

Within **Custility**, you have an assortment of classes that change the display and appearance of elements.

### Prefixes
By default, responsive breakpoint based class names are generated for you. If you would like to generate non-responsive breakpoint class names, set the variable `$include-responsive-display` to `false`. If you do this, the only display prefix will be `.dsp--`, otherwise you will have the following:

- `.dsp--xs--`: Affects display of screens 0px wide and up
- `.dsp--sm--`: Affects display of screens 544px wide and up
- `.dsp--md--`: Affects display of screens 769px wide and up
- `.dsp--lg--`: Affects display of screens 992px wide and up
- `.dsp--xl--`: Affects display of screens 1200px wide and up

### Actions
The actions are the values you can append to the end of the _display_ prefixes (i.e., `.dsp--xs--none`), to impact the visility and appearance of the element. Unless you edit the corresponding _alias_ variable values, your options will be named the following:

- `none`: Hides the element
- `blk`: Displays the element as a block
- `inl`: Displays the element as inline
- `inl-blk`: Displays the element as an inline-block
- `sb`: Displays the element using flexbox and `space-between`
- `sa`: Displays the element using flexbox and `space-around`

### Examples

{% highlight html %}
  <div class="dsp--xs--none dsp--xl--block">
    Will only be visible on screens 1200px wide and greater
  </div>
  <div class="dsp--xs--inline-block dsp--xl--none">
    Will be an inline block up to 1200px, where it will be hidden
  </div>
  <div class="dsp--xs--sb">
    Will use flexbox's `space-between` feature on all screens
  </div>
{% endhighlight %}

### Variables<commit_msg>Fix class name<commit_after>---
layout: default
---

## Display

Within **Custility**, you have an assortment of classes that change the display and appearance of elements.

### Prefixes
By default, responsive breakpoint based class names are generated for you. If you would like to generate non-responsive breakpoint class names, set the variable `$include-responsive-display` to `false`. If you do this, the only display prefix will be `.dsp--`, otherwise you will have the following:

- `.dsp--xs--`: Affects display of screens 0px wide and up
- `.dsp--sm--`: Affects display of screens 544px wide and up
- `.dsp--md--`: Affects display of screens 769px wide and up
- `.dsp--lg--`: Affects display of screens 992px wide and up
- `.dsp--xl--`: Affects display of screens 1200px wide and up

### Actions
The actions are the values you can append to the end of the _display_ prefixes (i.e., `.dsp--xs--none`), to impact the visility and appearance of the element. Unless you edit the corresponding _alias_ variable values, your options will be named the following:

- `none`: Hides the element
- `blk`: Displays the element as a block
- `inl`: Displays the element as inline
- `inl-blk`: Displays the element as an inline-block
- `sb`: Displays the element using flexbox and `space-between`
- `sa`: Displays the element using flexbox and `space-around`

### Examples

{% highlight html %}
  <div class="dsp--xs--none dsp--xl--blk">
    Will only be visible on screens 1200px wide and greater
  </div>
  <div class="dsp--xs--inline-block dsp--xl--none">
    Will be an inline block up to 1200px, where it will be hidden
  </div>
  <div class="dsp--xs--sb">
    Will use flexbox's `space-between` feature on all screens
  </div>
{% endhighlight %}

### Variables
{'fraction_non_alphanumeric': 0.11417211019596706, 'fraction_numerical': 0.012496449872195399, 'mean_word_length': 3.615989515072084, 'pattern_counts': {'":': 0, '<': 15, '<?xml version=': 0, '>': 15, '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': '4961372', 'n_tokens_mistral': 1127, 'n_tokens_neox': 1026, 'n_words': 479}