<commit_before>Foundations
+++++++++++

Foundational elements are the very basic elements to create a page in Dataverse. These basic elements have been broken down to Grid Layout, Color pPalette, Typography, Logos, Icons.

Due to the use of Bootstrap and PrimeFaces, we have to do some tweeking and overriding in order to get everything as consistent as possible.


Grid Layout
===========

`Bootstrap <http://getbootstrap.com/css/#grid>`_ provides a responsive, fluid, 12-column grid system.

We use the fixed-width ``.container`` class which provides repsonive widths (i.e. auto, 750px, 970px or 1170px) based on media queries for the page layout, with a series of rows and columns for the content.

The grid layout uses ``.col-sm-*`` classes for horizontal groups of columns, inside a containing element with a ``.row`` class. Content should be placed within columns, and only columns may be immediate children of rows.

.. code-block:: html

    <div class="container">
        <div class="row">
        	<div class="col-sm-1">.col-sm-1</div>
        	<div class="col-sm-1">.col-sm-1</div>
        	<div class="col-sm-1">.col-sm-1</div>
        	<div class="col-sm-1">.col-sm-1</div>
        	<div class="col-sm-1">.col-sm-1</div>
        	<div class="col-sm-1">.col-sm-1</div>
        	<div class="col-sm-1">.col-sm-1</div>
        	<div class="col-sm-1">.col-sm-1</div>
        	<div class="col-sm-1">.col-sm-1</div>
        	<div class="col-sm-1">.col-sm-1</div>
        	<div class="col-sm-1">.col-sm-1</div>
        	<div class="col-sm-1">.col-sm-1</div>
        </div>
        <div class="row">
        	<div class="col-sm-8">.col-sm-8</div>
        	<div class="col-sm-4">.col-sm-4</div>
        </div>
    </div>

Color Palette
=============

The color palette is set in the `Bootstrap CSS <http://getbootstrap.com/css/#less-variables-colors>`_. There were some additions and some changes here and there.

Semantic include various colors assigned to meaningful contextual values. Convey meaning through color with a handful of emphasis utility classes. These may also be applied to links and will darken on hover just like our default link styles.

Primary/Brand
-------------

Colors from `Bootstrap CSS <http://getbootstrap.com/css/#less-variables-colors>`_. For the primary/brand color used in the Bootstrap stylesheet, we override (?) their blue with our orange `#C55B28` which comes from the Dataverse Project logo.

.. code-block:: css

    .text-brand {
      color:#C55B28;
      /* dataverse icon, search-include, mydata-cards_min */
    }
    .bg-brand {
      background:#C55B28;
      /* not used anywhere */
    }
    .bg-muted {
      background:#f5f5f5;
      /* header, roles-assign */
    }

.. raw:: html

  <div class="panel panel-default code-example">
    <div class="panel-body">
      <div class="color-swatches">
        <div class="color-swatch" style="background-color:#C55B28;">bg-brand dataverse</div>
        <div class="color-swatch" style="background-color:#428BCA;">dataset</div>
        <div class="color-swatch" style="background-color:grey;">file</div>
        <div class="color-swatch" style="background-color:#f5f5f5;">bg-muted</div>
      </div>
    </div>
  </div>

.. code-block:: html
  
  <!-- code comments -->
   <span class="icon-dataverse text-brand"></span>
   <span class="icon-dataset text-info"></span>
   <span class="icon-other text-muted"></span>

Text
----

Text color from `Bootstrap CSS <http://getbootstrap.com/css/#less-variables-scaffolding>`_.

.. code-block:: css

    body {
      color: #333;
    }
    
    @text-color: @black-50;

.. raw:: html

  <div class="panel panel-default code-example">
    <div class="panel-body">
      <p style="color:#333;">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
      <p style="color:#7f7f7f;">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
      <p style="color:#777;">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
    </div>
  </div>

.. code-block:: html

   <span class="icon-dataverse text-brand"></span>
   <span class="icon-dataset text-info"></span>
   <span class="icon-other text-muted"></span>


Links
-----

Link color from `Bootstrap CSS <http://getbootstrap.com/css/#less-variables-links>`_.

.. code-block:: css

    @brand-primary: darken(#428bca, 6.5%)

    @link-color: @brand-primary;

    @link-hover-color: darken(@link-color, 15%);

    a {
      color: #337AB7;
    }

    a:hover {
      color: #23527C;
    }

    .ui-widget-content a {
      color: #428BCA;
    }

    .ui-widget-content a:hover, .ui-widget-content a:focus {
      color: #2A6496;
    }

Hover state is 15% darker. There is an override in our stylesheet for ``.ui-widget-content a`` which I believe is because of PrimeFaces.

.. raw:: html

  <div class="panel panel-default code-example">
    <div class="panel-body">
      <div class="color-swatches">
        <div class="color-swatch" style="background-color:#337AB7;">a</div>
        <div class="color-swatch" style="background-color:#23527C;">a:hover</div>
        <div class="color-swatch" style="background-color:#428BCA;">.ui-widget-content a</div>
        <div class="color-swatch" style="background-color:#2A6496;">.ui-widget-content a:hover/focus</div>
      </div>
    </div>
  </div>

.. code-block:: html

  <a>...</a>

  <span class="ui-widget-content">
    <a>...</a>
  </span>


Alerts/Contextual
-----------------

Alert/Contextual text and background colors from `Bootstrap CSS <http://getbootstrap.com/css/#helper-classes>`_.

.. raw:: html

  <div class="panel panel-default code-example">
    <div class="panel-body">
      <div class="color-swatches">
        <div class="color-swatch bg-primary">bg-primary</div>
        <div class="color-swatch bg-success">bg-success</div>
        <div class="color-swatch bg-info">bg-info</div>
        <div class="color-swatch bg-warning">bg-warning</div>
        <div class="color-swatch bg-danger">bg-danger</div>
      </div>
    </div>
  </div>

.. code-block:: html

   <span class="icon-dataverse text-brand"></span>
   <span class="icon-dataset text-info"></span>
   <span class="icon-other text-muted"></span><commit_msg>Minor revisions to Style Guide draft. [ref #3635]<commit_after>Foundations
+++++++++++

Foundational elements are the very basic elements to create a page in Dataverse. These basic elements have been broken down to Grid Layout, Color pPalette, Typography, Logos, Icons.

Due to the use of Bootstrap and PrimeFaces, we have to do some tweeking and overriding in order to get everything as consistent as possible.


Grid Layout
===========

`Bootstrap <http://getbootstrap.com/css/#grid>`_ provides a responsive, fluid, 12-column grid system.

We use the fixed-width ``.container`` class which provides repsonive widths (i.e. auto, 750px, 970px or 1170px) based on media queries for the page layout, with a series of rows and columns for the content.

The grid layout uses ``.col-sm-*`` classes for horizontal groups of columns, inside a containing element with a ``.row`` class. Content should be placed within columns, and only columns may be immediate children of rows.

.. code-block:: html

    <div class="container">
        <div class="row">
        	<div class="col-sm-1">.col-sm-1</div>
        	<div class="col-sm-1">.col-sm-1</div>
        	<div class="col-sm-1">.col-sm-1</div>
        	<div class="col-sm-1">.col-sm-1</div>
        	<div class="col-sm-1">.col-sm-1</div>
        	<div class="col-sm-1">.col-sm-1</div>
        	<div class="col-sm-1">.col-sm-1</div>
        	<div class="col-sm-1">.col-sm-1</div>
        	<div class="col-sm-1">.col-sm-1</div>
        	<div class="col-sm-1">.col-sm-1</div>
        	<div class="col-sm-1">.col-sm-1</div>
        	<div class="col-sm-1">.col-sm-1</div>
        </div>
        <div class="row">
        	<div class="col-sm-8">.col-sm-8</div>
        	<div class="col-sm-4">.col-sm-4</div>
        </div>
    </div>

Color Palette
=============

The color palette is set in the `Bootstrap CSS <http://getbootstrap.com/css/#less-variables-colors>`_. There were some additions and some changes here and there.

Semantic include various colors assigned to meaningful contextual values. Convey meaning through color with a handful of emphasis utility classes. These may also be applied to links and will darken on hover just like our default link styles.

Primary/Brand
-------------

Colors from `Bootstrap CSS <http://getbootstrap.com/css/#less-variables-colors>`_. For the primary/brand color used in the Bootstrap stylesheet, we override (?) their blue with our orange `#C55B28` which comes from the Dataverse Project logo.

.. code-block:: css

    .text-brand {
      color:#C55B28;
      /* dataverse icon, search-include, mydata-cards_min */
    }
    .bg-brand {
      background:#C55B28;
      /* not used anywhere */
    }
    .bg-muted {
      background:#f5f5f5;
      /* header, roles-assign */
    }

.. raw:: html

  <div class="panel panel-default code-example">
    <div class="panel-body">
      <div class="color-swatches">
        <div class="color-swatch" style="background-color:#C55B28;">bg-brand dataverse</div>
        <div class="color-swatch" style="background-color:#428BCA;">dataset</div>
        <div class="color-swatch" style="background-color:grey;">file</div>
        <div class="color-swatch" style="background-color:#f5f5f5;">bg-muted</div>
      </div>
    </div>
  </div>

.. code-block:: html
  
  <!-- code comments -->
   <span class="text-brand"></span>
   <span class="text-info"></span>
   <span class="text-muted"></span>

Text
----

Text color from `Bootstrap CSS <http://getbootstrap.com/css/#less-variables-scaffolding>`_.

.. code-block:: css

    body {
      color: #333;
    }
    
    @text-color: @black-50;

.. raw:: html

  <div class="panel panel-default code-example">
    <div class="panel-body">
      <p style="color:#333;">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
      <p style="color:#7f7f7f;">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
      <p style="color:#777;">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
    </div>
  </div>

.. code-block:: html

   <span class="text-brand"></span>
   <span class="text-info"></span>
   <span class="text-muted"></span>


Links
-----

Link color from `Bootstrap CSS <http://getbootstrap.com/css/#less-variables-links>`_.

Hover state is 15% darker. There is an override in our stylesheet for ``.ui-widget-content a`` which I believe is because of PrimeFaces.

.. code-block:: css

    @brand-primary: darken(#428bca, 6.5%)

    @link-color: @brand-primary;

    @link-hover-color: darken(@link-color, 15%);

    a {
      color: #337AB7;
    }

    a:hover {
      color: #23527C;
    }

    .ui-widget-content a {
      color: #428BCA;
    }

    .ui-widget-content a:hover, .ui-widget-content a:focus {
      color: #2A6496;
    }

.. raw:: html

  <div class="panel panel-default code-example">
    <div class="panel-body">
      <div class="color-swatches">
        <div class="color-swatch" style="background-color:#337AB7;">a</div>
        <div class="color-swatch" style="background-color:#23527C;">a:hover</div>
        <div class="color-swatch" style="background-color:#428BCA;">.ui-widget-content a</div>
        <div class="color-swatch" style="background-color:#2A6496;">.ui-widget-content a:hover/focus</div>
      </div>
    </div>
  </div>

.. code-block:: html

  <a>...</a>

  <span class="ui-widget-content">
    <a>...</a>
  </span>


Contextual Classes
------------------

Contextual classes can be used to style text and background colors from `Bootstrap CSS <http://getbootstrap.com/css/#helper-classes>`_.

.. raw:: html

  <div class="panel panel-default code-example">
    <div class="panel-body">
      <div class="color-swatches">
        <div class="color-swatch bg-primary">bg-primary</div>
        <div class="color-swatch bg-success">bg-success</div>
        <div class="color-swatch bg-info">bg-info</div>
        <div class="color-swatch bg-warning">bg-warning</div>
        <div class="color-swatch bg-danger">bg-danger</div>
      </div>
    </div>
  </div>

.. code-block:: html

   <div class="bg-primary"></div>
   <div class="bg-success"></div>
   <div class="bg-info"></div>
   <div class="bg-warning"></div>
   <div class="bg-danger"></div>
{'fraction_non_alphanumeric': 0.17081621142534847, 'fraction_numerical': 0.01998227378938039, 'mean_word_length': 2.9241226683528296, 'pattern_counts': {'":': 0, '<': 245, '<?xml version=': 0, '>': 245, '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': '4432542', 'n_tokens_mistral': 4329, 'n_tokens_neox': 4072, 'n_words': 1058}