<commit_before><h1>Sass Styleguide</h1>

<h2>Folder Structure</h2>

<p>This is folder structure we use for organising our Sass files</p>

<%= Terminal256 do %>
├── base
│   ├── _fonts.scss
│   ├── _forms.scss
│   ├── _tables.scss
│   ├── _typography.scss
│   └── _utilities.scss
├── components
│   ├── _breadcrumb.scss
│   ├── _button.scss
│   └── _icon.scss
├── layout
│   └── _header.scss
├── lib
│   ├── _functions.scss
│   ├── _mixins.scss
│   ├── _placeholders.scss
│   └── _variables.scss
<% end %>

<p>These are used to output the following files:</p>

<%= Terminal256 do %>
  ├── basic.css.scss
  ├── enhanced_fixed.css.scss
  ├── enhanced_responsive.css.scss
<% end %>
<p><strong>basic.css.scss</strong> - This contains the basic styles present in the base folder and should work in all
  browsers including legacy browsers</p>
<p><strong>enhanced_responsive.css.scss</strong> - This contains the enhanced and responsive styles and will only be used by browsers
that understand media queries.</p>
<p><strong>enhanced_fixed.css.scss</strong> - This contains a fixed width version of the enhanced styles of the website
  which is served to IE 7/8. It cIE 7/8 fixes are only included in this file.</p>

<h2>Variable naming convention</h2>

<p>To make variable names more understandable we use the convention <code>category-some-name</code>.  This is also great
  for RubyMine as it can then auto-suggest available variables.</p>

<p>Example:</p><commit_msg>Updated docs on Sass folder structure<commit_after><h1>Sass Styleguide</h1>

<h2>Folder Structure</h2>

<p>This is the folder structure we use for organising our Sass files</p>

<%= Terminal256 do %>
├── base
├── components
├── layout
├── lib
└── utilities
<% end %>

<p>And a selection of the files found inside these: </p>
<%= Terminal256 do %>
  ├── base
  │   ├── _default.scss
  │   ├── _fonts.scss
  │   ├── _forms.scss
  │   ├── _links.scss
  │   ├── _media.scss
  │   └── _typography.scss
  ├── components
  │   ├── _button.scss
  │   ├── _header.scss
  │   ├── _icon.scss
  │   ├── _lists.scss
  ├── layout
  │   ├── _common.scss
  │   └── _pages.scss
  ├── lib
  │   ├── _functions.scss
  │   ├── _grid.scss
  │   ├── _mixins.scss
  │   ├── _placeholders.scss
  │   └── _variables.scss
  └── utilities
      └── _utils.scss
<% end %>

<p><strong>base</strong> - base rules are the defaults. They are almost
  exclusively single element selectors but it could include attribute selectors,
  pseudo-class selectors, child selectors or sibling selectors. Essentially, a
  base style says that wherever this element is on the page, it should look like this.</p>

<p><strong>components</strong> - components are the blocks that make up your page.
  The modular parts of our design. They should be built in such a way that they can
  be dropped into any page or layout. Components should define how they look, but not
  their layout or position</p>

<p><strong>layout</strong> - layouts hold one or more components together and
  are responsible for positioning components.</p>

<p><strong>lib</strong> -  library of variables, functions, mixing and placeholders.
  They output no css until used.</p>

<p><strong>utilities</strong> - utilities are reusable helper classes</p>

<h2>Output Files</h2>

<%= Terminal256 do %>
  ├── basic.css.scss
  ├── enhanced_fixed.css.scss
  ├── enhanced_responsive.css.scss
<% end %>

<p><strong>basic.css.scss</strong> - This contains the basic styles present in the base folder and should work in all
  browsers including legacy browsers</p>
<p><strong>enhanced_responsive.css.scss</strong> - This contains the enhanced and responsive styles and will only be used by browsers
that understand media queries.</p>
<p><strong>enhanced_fixed.css.scss</strong> - This contains a fixed width version of the enhanced styles of the website
  which is served to IE 7/8. It cIE 7/8 fixes are only included in this file.</p>

<h2>Variable naming convention</h2>

<p>To make variable names more understandable we use the convention <code>category-some-name</code>.  This is also great
  for RubyMine as it can then auto-suggest available variables.</p>

<p>Example:</p>
{'fraction_non_alphanumeric': 0.1288771339264246, 'fraction_numerical': 0.008896369319547967, 'mean_word_length': 3.8259860788863107, 'pattern_counts': {'":': 0, '<': 91, '<?xml version=': 0, '>': 91, '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': '5618151', 'n_tokens_mistral': 1473, 'n_tokens_neox': 1424, 'n_words': 520}