nilla-js

A factory script used to create page components for University of North Texas websites.

Intro

NillaJS is a factory script used to generate a consistent HTML structure for various block and card level page components. Block-level components are added to the page using <section> tags. Card-level components are added as children to block-level tags using <article> tags. Attributes are added using a specific list of data-* attributes. NillaJS processes these data-* attributes and outputs the raw HTML that can then be styled. Having consistent markup across all components allows for easier long-term management of CSS and code.

The Concept

The purpose of NillaJS is to provide consistent HTML structure for page modules/components. Block-level modules are constructed from <section> tags while Card-level modules are constructed from <article> tags. No actual contect is added; NillaJS will use the values from the data- attributes to construct the HTML output. For example, the following input:

<section class="u-block" 
         data-block-type="Image_block iblA" 
         data-headline="Don't lose your Aid" 
         data-leader="Did you know factors such as grades, residency, course load, and attendance can affect your loans, scholarships and more? Learn how to stay eligible for your financial aid" 
         data-img-url="/templating/img/20_0304_Fall-stock0070_1200w.jpg" 
         data-img-alt="Fall Campus colors." 
         data-img-format="landscape" 
         data-link-urls="https://financialaid.unt.edu" 
         data-link-titles="Learn about Award Requirements" 
         ></section>

…produces the following output:

<section class="u-block Image_block">
    <div class="block-content">
        <figure>
            <div class="media-frame" style="">
                <div class="crop-box landscape">
                    <img srcset="/templating/img/20_0304_Fall-stock0070_600w.jpg 600w,
                         /templating/img/20_0304_Fall-stock0070_1200w.jpg 1200w,
                         /templating/img/20_0304_Fall-stock0070_1600w.jpg 1600w" sizes="(max-width: 600px) 600px, (max-width: 1200px) 1200px, 1600px" src="/templating/img/20_0304_Fall-stock0070_1200w.jpg" alt="Fall Campus colors." style="width:100%; height:100%; top:0; object-fit:cover; object-position:50% 50%; position:absolute;" loading="lazy">
                </div><!-- /.crop-box -->
            </div><!-- /.media-frame -->
            <figcaption></figcaption>
        </figure>
        <header>
            <h2>Don't lose your Aid</h2>
            <hr>
            <p class="leader">Did you know factors such as grades, residency, course load, and attendance can affect your loans, scholarships and more? Learn how to stay eligible for your financial aid</p>
            <ul class="btn-list"><li><a class="btn" href="https://financialaid.unt.edu" title="Learn about Award Requirements" target="">Learn about Award Requirements<span class="material-icons">chevron_right</span></a></li></ul><!-- /.btn-list -->
        </header>
        <div class="cards"></div><!-- /.cards -->
    </div><!-- /.block-content -->
</section>

The following input for a typical Grid_block:

<section class="u-block Grid_block">
    <div class="block-content">
        <header>
            <h2>[title]</h2>
            <p>[leader]</p>
        </header>
        <div class="cards">
            <article>
                <header>
                    <h3>[title]</h3>
                    <p>[leader]</p>
                    <ul>[link list]</ul>
                </header>
            </article>
            <article></article>
            <article></article>
        </div>
    </div>
</section>

…produces the following HTML output:

<section class="u-block" 
         data-block-type="Grid_block gbl3" 
         data-headline="Students" 
         data-leader="Find out what you need to know for registering courses and making the most of your time at UNT.">

            <article 
                    data-block-type="Title_card" 
                    data-headline="Registering for Classes" 
                    data-leader="Find out what to do before, during and after registration to stay on track towards your degree." 
                    data-link-urls="https://registrar.unt.edu" 
                    data-link-titles="About Registering"></article>

            <article data-block-type="Title_card" 
                    data-headline="Transcripts and Records" 
                    data-leader="Order a transcript or update your personal or residency information." 
                    data-link-urls="https://registrar.unt.edu" 
                    data-link-titles="About Transcripts"></article>

            <article data-block-type="Title_card" 
                     data-headline="Online Degree Audit" 
                     data-leader="Find out what you still have to take to stay on track." 
                     data-link-urls="https://registrar.unt.edu" 
                     data-link-titles="About Degree Audits"></article>

         </section>

…produces the following HTML output:

<section class="u-block Grid_block gbl3">
   <div class="block-content">
      <header>
        <h2>Students</h2>
        <hr>
        <p class="leader">Find out what you need to know for registering courses and making the most of your time at UNT.</p>
      </header>
      <div class="cards">
          <article class="card Title_card ">
            <h3>Registering for Classes</h3>
            <hr>
            <p class="leader">Find out what to do before, during and after registration to stay on track towards your degree.</p>
            <ul class="btn-list">
                <li>
                    <a class="btn" href="https://registrar.unt.edu" title="About Registering" target="">About Registering<span class="material-icons">chevron_right</span>
                    </a>
                </li>
            </ul><!-- /.btn-list -->
          </article>
          <article class="card Title_card ">
              <h3>Transcripts and Records</h3>
              <hr>
              <p class="leader">Order a transcript or update your personal or residency information.</p>
              <ul class="btn-list">
                  <li>
                      <a class="btn" href="https://registrar.unt.edu" title="About Transcripts" target="">About Transcripts<span class="material-icons">chevron_right</span>
                      </a>
                  </li>
              </ul><!-- /.btn-list -->
          </article>
          <article class="card Title_card ">
              <h3>Online Degree Audit</h3>
                <hr>
                <p class="leader">Find out what you still have to take to stay on track.</p>
                <ul class="btn-list">
                    <li>
                        <a class="btn" href="https://registrar.unt.edu" title="About Degree Audits" target="">About Degree Audits<span class="material-icons">chevron_right</span>
                        </a>
                    </li>
                </ul><!-- /.btn-list -->
          </article>
        </div><!-- /.cards -->
      </div><!-- /.block-content -->
</section>

Code Examples

To get a feel for how to construct a module, cut and paste the examples below into the HTML of your page.

Example 1:

<section class="u-block" 
         data-block-content="Image_block" 
         data-block-layout="iblA" 
         data-headline="An Image Block"
         data-leader="This is an Image_block, layout A"
         data-link-titles="Link1 to info | Link2 to info"
         data-link-urls="/url1 | /url2"
         data-img-url=""
         data-img-alt=""
         data-img-format=""
> </section>

Attribute List

Select-Option: Select from one of the supported options.
User-Input: Value will be used in the output.

data-block-content — REQUIRED, Select-Option

Blocks

Blocks span the width of the page and contain any combination of Headline, Leader Text and Links. Images can be included and layout variants can place the image on the left or right of the text content. Blocks can also contain Cards displayed in a grid with 2-, 3- and 4-column options.

Use one of these values for the `data-block-content` attribute in your `<section class="u-block">`.
Value*	Content description
`Contact_block`	Information on how to contact a department.
`Date_block`	Container for a collection of Date_cards
`Grid_block`	Container for a collection of Image_cards or Text_cards
`Image_block`	Displays a single image with text
`Link_block`	Displays a set of quick-links to resources
`Quote_block`	Displays a block with a quote
`Stat_block`	Container for a collection of Stat_cards
`Text_block`	Displays a block with just text
* Listed values are case-sensitive.

Cards

Cards are smaller boxes displayed within a block typically arranged on a 2-, 3- or 4-column grid Cards contain a Headline, Leader Text, Links and an optional image.

Use one of these values for the `data-block-content` attribute in your `<article class="u-card">`.
Value*	Content description
`Standard_card`	A box containing text and an optional image. (See Card Layout options)
`Date_card`	A box containing information about an individual Date appearing within a `Date_block`.
`Stat_card`	A box containing a statistic appearing within a `Stat_block`
* Listed values are case-sensitive.

data-block-layout — REQUIRED, Select-Option

Blocks

`Grid_block` Layout Options

Use one of these values for the `data-block-layout` attribute.
Value*	Description
`gbl2`	Two-column grid of image or text cards.
`gbl3`	Three-column grid of image or text cards.
`gbl4`	Four-column grid of image or text cards.
* Listed values are case-sensitive.

Example: data-block-content="Grid_block" data-block-layout="gbl3"

`Image_block` Layout Options

Use one of these values (case-sensitive) for the `data-block-layout` attribute.
Value*	Description
`iblA`	50-50 Split with image on left.
`iblB`	50-50 Split with image on right.
`iblC`	Enlarged image on left.
`iblD`	Enlarged image on right.
* Listed values are case-sensitive.

Example: data-block-content="Image_block" data-block-layout="iblA"

`Link_block` Layout Options

Use one of these values (case-sensitive) for the `data-block-layout` attribute.
Value*	Description
`lbl2`	Two-column grid of links.
`lbl3`	Three-column grid of links.
`lbl4`	Four-column grid of links.
* Listed values are case-sensitive.

Example: data-block-content="Link_block" data-block-layout="lbl3"

`Stat_block` Layout Options

Use one of these values (case-sensitive) for the `data-block-layout` attribute.
Value*	Description
`sblA`	Stat_cards stacked vertically on the right of the descriptive text.
`sblB`	Stat_cards spread horizontally with/without descriptive text.
* Listed values are case-sensitive.

Example: data-block-content="Stat_block" data-block-layout="sblA"

`Text_block` Layout Options

Use one of these values (case-sensitive) for the `data-block-layout` attribute.
Value*	Description
`tblA`	Left aligned text, typically with links stacked on the right.
`tblB`	Centered text, typically without links.
* Listed values are case-sensitive.

Example: data-block-content="Text_block" data-block-layout="tblA"

Card Layout Options

`Standard_card` Layout Options

Use one of these values (case-sensitive) for the `data-block-layout` attribute.
Value*	Description
`sclA`	Image (optional) with text and a border to the left.
`sclB`	Text-only block with a shadow.
* Listed values are case-sensitive.

Example: data-block-content="Standard_card" data-block-layout="sclA"

data-header-variant (optional) Select-Option

The data-header-variant attribute can be used to select different header styles.

Use one of these values (case-sensitive) for the `data-header-variant` attribute.
Value*	Description
`hvA`	Left-aligned, green text with bottom rule.
`hvB`	Center-aligned green text with bottom rule.
* Listed values are case-sensitive.

data-mobile-compact (optional) Select-Option (boolean)

Use one of these values for the `data-mobile-compact` attribute.
Value*	Description
`true`	On small screens, the cards can be scrolled through horizontally and take up less vertical space.
`false`	Cards are stacked vertically on small screens.
* Listed values are case-sensitive.

data-headline (optional) User-Input

The text provided will be inserted into the block inside an <h2> tag for blocks, <h3> tag for cards.

data-headline-color (optional) User-Input

This value won't be inserted into the content but will be applied inside a style attribute.

data-headline-url (optional) User-Input

If you wish for the headline itself to function as the link, provide the URL with this attribute.

data-headline-date (optional) User-Input

Promote a specific date in your block. The provided text will be inserted along with the headline inside the appropriate tag but wrapped in a <span class="promote-date"> element.

data-leader (optional) User-Input

The provided text will be inserted into the block inside a <p> element.

data-leader-list-tag (optional) Select-Option

Choose from <ul> for a bullet list, or <ol> for a numbered list. The default is <ul>.

data-leader-list-class (optional) User-Input

You may enter a custom class name here if you need to target this list to modify the default characteristics.

data-leader-list-items (optional) User-Input

If you have a list of data points to include (such as in a Stat_block), list the text here. Separate each list item with space-pipe-space (' | '). Nilla will break this string into an array and wrap each value inside <li> tags.

data-link-titles (optional) User-Input

Add links to your block or card by providing a list of titles in the order you want them to display. These titles will display as the linked text. Separate each title using space-pipe-space (' | '). Nilla will break this string into an array and wrap each value inside <li> tags.

data-link-urls (optional) User-Input

In the same order as the link titles, provide the list of URLs to match with link-titles. Separate each URL with space-pipe-space (' | '). Nilla will break this string into an array that will be used when processing the link-titles.

data-link-classes (optional) Select-Option

In the same order as the link titles, you may provide a list of classes for each link. Separate each class name with a space-pipe-space (' | '). Nilla will break this string into an array that will be used when processing the link-titles. Each value can be comprised from the available class names listed below separated by a space (' ').
Example: [size] [color] [icon]
"small clean chevron | small green arrow | (etc)"

Size Classes

Available these values for the `data-link-classes` attribute.
Value*	Description
`small` (default)	Small text, best for blocks and cards displaying several other elements.
`standard`	Larger, works best in text-only blocks. Not recommended for cards.
`large`	Need ample space, not a best choice for blocks. Not recommende for cards.
* Listed values are case-sensitive.

Color Classes

Available these values for the `data-link-classes` attribute.
Value*	Description
`clean`	No background color with dark text.
`gray` (default)	Light gray background with dark text.
`green`	Green background with white text.
* Listed values are case-sensitive.

Icon Classes

Available values for the `data-link-classes` attribute.
Value*	Description
`chevron` (default)	inserts a chevron icon.
`arrow`	Inserts an arrow icon.
* Listed values are case-sensitive.

data-img-url (optional) User-Input

Provide the URL of the image you wish to have inserted. Only processed with Image_block sections, or Standard_card articles with the sclA layout attribute value.

data-img-alt (optional) User-Input

Provide the alt text to be inserted into the HTML for accessibility.

data-img-format (optional) Select-Option

Select how the image should be formatted from the options listed below.

Available formats for the `data-img-format` attribute.
Value*	Description
`portrait`	Formats the image as a vertical 8x10. Good for people. (ratio 3:4)
`square`	Formats the image as a square. (ratio 1:1)
`landscape` (default)	Formats the image as a horizontal 8x10. (ratio 4:3)
`wide`	Formats the image similar to a 1980 X 1020. (ratio 16:9)
`circle`	Clips the image to a circle. (ratio 1:1)
* Listed values are case-sensitive.

data-img-caption (optional) Select-Option (boolean)

Available values for the `data-img-caption` attribute.
Value*	Description
`true` (default)	Displays the alt text as a figure caption.
`false`	No figure caption, but alt text will still be inserted into the markup.
* Listed values are case-sensitive.

data-img-border-width (optional) User-Input

In some blocks, you can provide a border width for the image in pixels. Provide only the number, no units. Nilla will add the 'px' unit when processing. Max width is 10.

data-img-shadow (optional) Select-Option (boolean)

In some blocks, you can display a shadow around the image. Provide only the number of in terms of spread (shadow size), no units. Nilla will add the 'px' unit when processing.

data-img-x (optional) User-Input

default value: 50
If necessary, you can move the image horizontally within the display frame. Small numbers move the image left; large numbers move the image right. Nilla provides a default of 50 which is centered.

data-img-y (optional) User-Input

default value: 50
If necessary, you can move the image vertically within the display frame. Small numbers move the image up; large numbers move the image down. Nilla provides a default of 50 which is centered.

data-bg-colr (optional) User-Input

If you need to provide a specific background color to a block, add the Hex here. Nilla will insert it into a style="" attribute in the tag.

data-bg-img (optional) User-Input

You can provide a URL of a background image for your block.

data-bg-grad (optional) User-Input

You can provide the CSS gradient markup to be applied to the background if necessary.

data-bg-attach optional, Select-Option

By default, background images will scroll with the element. You can also choose to have it fixed.

Available options for the `data-bg-attach` attribute.
Value*	Description
`scroll` (default)	Background image scrolls with the element.
`fixed`	Image is fixed to the background while text and other elements scroll over the top.
* Listed values are case-sensitive.

Package detail

nilla-js

readme

nilla-js

Intro

The Concept

Code Examples

Attribute List

Blocks

Cards

Blocks

`Grid_block` Layout Options

`Image_block` Layout Options

`Link_block` Layout Options

`Stat_block` Layout Options

`Text_block` Layout Options

Card Layout Options

`Standard_card` Layout Options

Size Classes

Color Classes

Icon Classes

Package detail

readme

nilla-js

Intro

The Concept

Code Examples

Attribute List

Blocks

Cards

Blocks

Grid_block Layout Options

Image_block Layout Options

Link_block Layout Options

Stat_block Layout Options

Text_block Layout Options

Card Layout Options

Standard_card Layout Options

Size Classes

Color Classes

Icon Classes

`Grid_block` Layout Options

`Image_block` Layout Options

`Link_block` Layout Options

`Stat_block` Layout Options

`Text_block` Layout Options

`Standard_card` Layout Options