HTML Embed CSS Framework

Grove CMS allows us to insert custom content through iframes, Pym Modules, and HTML Embeds. Of these options, HTML Embeds are entered directly into the document and inherit styles just like any other HTML would. We've created a small CSS Framework to style these HTML Embeds. All rules are prefixed with .HtmlModule to avoid conflicting with other styles on the site.

To manage custom stylesheets on the site, go to:

Site Settings / Front-End / Advanced / Custom Scripts and Styles

This project makes use of Bootstrap's Reboot reset and Bulma CSS's Grid System.

Base Styles

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5

Heading Level 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pharetra dignissim tortor, a aliquet nulla dignissim eget. Curabitur iaculis, dui sit amet placerat cursus, nulla tortor auctor neque, quis eleifend ligula orci id magna. Curabitur faucibus justo eget velit volutpat, a mollis nisl fringilla. Proin nec dolor arcu. Sed at arcu commodo, porttitor libero eget, maximus risus. Praesent at cursus enim. Donec nec egestas ante ^{(vel ornare lectus)}. Curabitur metus augue, pellentesque vitae purus vel, tristique laoreet augue. Quisque gravida nisl vitae commodo auctor. Sed sollicitudin velit ut ultricies dictum. Curabitur cursus nisl ac ex porta, eu fermentum lectus gravida.

Duis quis justo ac dui sagittis facilisis a quis diam. Nulla sed sem at _{diam rhoncus} pharetra sed ac neque. Sed id ullamcorper tellus. Donec luctus erat quis enim posuere, eget dictum lectus pellentesque. Quisque varius ex in ante euismod malesuada. Praesent urna erat, placerat in orci eu, venenatis semper enim. Donec eu nisi eu tortor laoreet maximus id luctus nibh. Nunc cursus, dui mollis aliquet ultrices, sapien orci laoreet urna, eu rhoncus urna nisl maximus metus. Maecenas in lorem vel ex venenatis finibus. Suspendisse a lorem finibus, volutpat risus non, varius nisi. Nunc et tempor tellus. Cras eget blandit dolor. Nam a urna id justo semper dignissim nec sit amet elit. Ut feugiat urna id convallis rhoncus. Aliquam commodo erat sit amet lacus blandit, sed consequat magna euismod. Praesent ultricies lectus a ligula mollis, id malesuada arcu consequat.

Semantically speaking, disclaimers should use the <small> tag.

Item 1
Item 2
- Sub-Item 1
- Sub-Item 2
- Sub-Item 3
Item 3

Item 1
Item 2
1. Sub-Item 1
2. Sub-Item 2
3. Sub-Item 3
Item 3

# Here is a pre block

Label here# This one is labelled

Base Styles<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>

<p><strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Mauris pharetra…dui sit amet placerat cursus, <a href="#">nulla tortor auctor neque</a>, quis eleifend ligula orci id…enim. Donec nec egestas ante <sup>(vel ornare lectus)</sup>. Curabitur metus augue, pellentesque vitae…porta, eu fermentum lectus gravida.</p>

<p><em>Duis quis justo ac dui</em> sagittis facilisis a quis diam. Nulla sed sem at <sub>diam rhoncus</sub> pharetra sed ac neque. Sed…mollis, id malesuada arcu consequat.</p>

<p><small>Semantically speaking, disclaimers should use the <code><small></code> tag.</small></p>

<hr>


<ul>
  <li>Item 1</li>
  <li>Item 2
  <ul>
    <li>Sub-Item 1</li>
    <li>Sub-Item 2</li>
    <li>Sub-Item 3</li>
  </ul>
  </li>
  <li>Item 3</li>
</ul>

<ol>
  <li>Item 1</li>
  <li>Item 2
  <ol>
    <li>Sub-Item 1</li>
    <li>Sub-Item 2</li>
    <li>Sub-Item 3</li>
  </ol>
  </li>
  <li>Item 3</li>
</ol>

<pre>
# Here is a pre block
</pre>

<pre>
<label>Label here</label># This one is labelled
</pre>

Layout

Grid

This project makes use of Bulma's Grid.

By default, Bulma uses containers called columns with children called column. For many use cases, this is enough to work with, and no customization is needed.

Bulma columns collapse automatically on small screens in an attempt to be automatically responsive.

Column One

Column Two

Column Three

<div class="columns">
  <div class="column">
    <div class="fill-color(primary) text-color(white) pad">Column One</div>
  </div>
  <div class="column">
    <div class="fill-color(breaking) text-color(white) pad">Column Two</div>
  </div>
  <div class="column">
    <div class="fill-color(info) text-color(white) pad">Column Three</div>
  </div>
</div>

Columns can be given the is-narrow class to only take up the width they need. This can be used to create fluid layouts where we don't need to know how much space our columns will take up.

Column One

Column Two has more text than the other columns and should be given more space.

Column Three

<div class="columns">
  <div class="column">
    <div class="fill-color(primary) text-color(white) pad">Column One</div>
  </div>
  <div class="column">
    <div class="fill-color(breaking) text-color(white) pad">Column Two has more text than the other columns and should be given more space.</div>
  </div>
  <div class="column">
    <div class="fill-color(info) text-color(white) pad">Column Three</div>
  </div>
</div>

The is-full class can be used to make a column take up the full width. Wrap the other columns after it by using is-multiline.

Column One is Full

Column Two

Column Three

<div class="columns is-multiline">
  <div class="column is-full">
    <div class="fill-color(primary) text-color(white) pad">Column One is Full</div>
  </div>
  <div class="column">
    <div class="fill-color(breaking) text-color(white) pad">Column Two</div>
  </div>
  <div class="column">
    <div class="fill-color(info) text-color(white) pad">Column Three</div>
  </div>
</div>

Bulma Documentation

columns and column compose the Basic Structure of a Layout.
is-full, is-one-fifth, is-two-fifths, is-three-fifths, is-four-fifths, is-one-quarter, is-half, is-three-quarters, is-one-third, and is-two-thirds define Fractional Column Widths.
is-1, is-2, is-3, is-4, is-5, is-6, is-7, is-8, is-9, is-10, is-11, and is-12 define A 12-Column Grid. A 12-Column Grid is seldom the best layout. Usually a Fractional Width or Auto-Sizing based on content are preferred.
is-offset-{x}, in which x matches a valid pattern for column sizing, defines an Offset gap. This is seldom useful.
is-narrow defines a Narrow Column, fixed to only as much space as it needs.
is-narrow-mobile, is-narrow-tablet, is-narrow-touch, is-narrow-desktop, is-narrow-twidescreen, is-narrow-fullhd define Narrow Columns based on the viewport. For this project, viewports have been customized to be slimmer, since we're coding within embedded content, rather than the full screen.
is-mobile overrides Bulma's Auto-Collapse on Mobile and is-desktop collapses onanything smaller than the desktop viewport.
There are A Number of Responsive Variants for different column sizes on different viewports.
Columns Can Be Nested.
is-gapless Removes Gaps Between Columns.
is-vcentered Vertically-Centers Columns.
is-multiline Forces Columns to Wrap. This may be mostly useful when creating a column that should be full-length on one viewport but beside other content on others.
is-centered can be used to Center Columns.

Row

The row class is a helper for aligning content which doesn't need as much structure as a grid. It is a loose abstraction of the CSS justify-content property.

rowMiddleLast

row(start)MiddleLast

row(center)MiddleLast

row(end)MiddleLast

row(space-around)MiddleLast

row(space-between)MiddleLast

row(space-evenly)MiddleLast

<div class="border-color(default) pad row">
  <strong>row</strong><em>Middle</em><small>Last</small>
</div>

<div class="border-color(default) pad row(start)">
  <strong>row(start)</strong><em>Middle</em><small>Last</small>
</div>

<div class="border-color(default) pad row(center)">
  <strong>row(center)</strong><em>Middle</em><small>Last</small>
</div>

<div class="border-color(default) pad row(end)">
  <strong>row(end)</strong><em>Middle</em><small>Last</small>
</div>

<div class="border-color(default) pad row(space-around)">
  <strong>row(space-around)</strong><em>Middle</em><small>Last</small>
</div>

<div class="border-color(default) pad row(space-between)">
  <strong>row(space-between)</strong><em>Middle</em><small>Last</small>
</div>

<div class="border-color(default) pad row(space-evenly)">
  <strong>row(space-evenly)</strong><em>Middle</em><small>Last</small>
</div>

Here's a practical Example:

Classical90.7 KWMU-3 and 90.3 WQUB-3

<h2 class="row(space-between)">
  <strong>Classical</strong><span class="text-muted">90.7 KWMU-3 and 90.3 WQUB-3</span>
</h2>

Utilities

Spacing

Spacing utilities allow us to add margins or padding between elements that need adjusted spacing

Pad

pad - all sides

pad(x) - left and right

pad(y) - top and bottom

pad(top)

pad(right)

pad(bottom)

pad(left)

<div class="fill-color(black) text-color(white) margin(bottom) pad">pad - all sides</div>
<div class="fill-color(black) text-color(white) margin(bottom) pad(x)">pad(x) - left and right</div>
<div class="fill-color(black) text-color(white) margin(bottom) pad(y)">pad(y) - top and bottom</div>
<div class="fill-color(black) text-color(white) margin(bottom) pad(top)">pad(top)</div>
<div class="fill-color(black) text-color(white) margin(bottom) pad(right)">pad(right)</div>
<div class="fill-color(black) text-color(white) margin(bottom) pad(bottom)">pad(bottom)</div>
<div class="fill-color(black) text-color(white) margin(bottom) pad(left)">pad(left)</div>

Override Padding of a Component

Button(black) pad(0)

<div class="Button(black) pad(0)">Button(black) pad(0)</div>

Margin

Margin has the same options as Pad:

margin: Add margin to all sides
margin(x): Add margin to left and right sides
margin(y): Add margin to top and bottom sides
margin(top): Add margin to top side
margin(right): Add margin to right side
margin(bottom): Add margin to bottom side
margin(left): Add margin to left side
margin(0): Remove margin from a Component

Other Spacing Utilities

sidebar-spacer: Creates an invisible rectangle. Place at the top of the sidebar as <div class="sidebar-spacer"></div> to align the sidebar with the content area.

Typography

Text Align

text-align(left)

text-align(center)

text-align(right)

<p class="text-align(left)">text-align(left)</p>
<p class="text-align(center)">text-align(center)</p>
<p class="text-align(right)">text-align(right)</p>

Muted Text

Sentence with muted text.

<p>Sentence with <span class="text-muted">muted text</span>.</p>

Colors

We can style our components with six colors, pulled from the Grove colors

default ($secondaryColor3) primary ($primaryColor2) breaking ($breakingColor) info ($linkColor) black ($primaryTextColor) white ($primaryTextColorInverse)

These colors are used in the following contexts:

Text Colors

Default Text Color

Primary Text Color

Breaking Text Color

Info Text Color

Black Text Color

White Text Color

Text Colors<p class="text-color(default)">Default Text Color</p>
<p class="text-color(primary)">Primary Text Color</p>
<p class="text-color(breaking)">Breaking Text Color</p>
<p class="text-color(info)">Info Text Color</p>
<p class="text-color(black)">Black Text Color</p>
<p class="text-color(white) fill-color(black) pad">White Text Color</p>

Fill Colors

Default Fill Color

Primary Fill Color

Breaking Fill Color

Info Fill Color

Black Fill Color

White Fill Color

Fill Colors<div class="fill-color(default) pad">Default Fill Color</div>
<div class="fill-color(primary) text-color(white) pad">Primary Fill Color</div>
<div class="fill-color(breaking) text-color(white) pad">Breaking Fill Color</div>
<div class="fill-color(info) text-color(white) pad">Info Fill Color</div>
<div class="fill-color(black) text-color(white) pad">Black Fill Color</div>
<div class="fill-color(white) border-color(default) pad">White Fill Color</div>

Border Color

Default Border Color

Primary Border Color

Breaking Border Color

Info Border Color

Black Border Color

White Border Color

Border Colors<div class="border-color(default) pad">Default Fill Color</div>
<div class="border-color(primary) pad">Primary Border Color</div>
<div class="border-color(breaking) pad">Breaking Border Color</div>
<div class="border-color(info) pad">Info Border Color</div>
<div class="border-color(black) pad">Black Border Color</div>
<div class="border-color(white) fill-color(default) pad">White Border Color</div>

Other

Box

.box combines both .border-color(default) and .pad. It can be overridden with the border-color and pad helpers.

<address class="box">
  <strong>Membership Department</strong>
  <br><a href="mailto:membership@stlpublicradio.org">membership@stlpublicradio.org</a>
  <br>314-516-7474
</address>

Membership Department
membership@stlpublicradio.org
314-516-7474

Components

Button

Modelled from BrightSpot's .Button.

The Button component only has hover effects when placed on anchor <a> tags.

Default Button Primary Button Breaking Button Info Button Black Button White Button

Buttons<a href="." class="Button(default)">Default Button</a>
<a href="." class="Button(primary)">Primary Button</a>
<a href="." class="Button(breaking)">Breaking Button</a>
<a href="." class="Button(info)">Info Button</a>
<a href="." class="Button(black)">Black Button</a>
<a href="." class="Button(white)">White Button</a>

List

List defines styles for a list of content

Unordered List

90.7 KWMU-1
Jazz KWMU-2
Classical KWMU-3

Unordered List<ul class="List">
  <li>90.7 KWMU-1</li>
  <li>Jazz KWMU-2</li>
  <li>Classical KWMU-3</li>
</ul>

Ordered List

90.7 KWMU-1
Jazz KWMU-2
Classical KWMU-3

Ordered List<ol class="List">
  <li>90.7 KWMU-1</li>
  <li>Jazz KWMU-2</li>
  <li>Classical KWMU-3</li>
</ol>

Nested List

Lists can be nested in one another

Sharing America
- Fixed Odds
- Profiles
We Live Here
- Nuisance or Nonsense

Nested Lists<ul class="List">
  <li>Sharing America
    <ul>
      <li>Fixed Odds</li>
      <li>Profiles</li>
    </ul>
  </li>
  <li>We Live Here
    <ul>
      <li>Nuisance or Nonsense</li>
    </ul>
  </li>
</ul>

Notice

Default Notice

Primary Notice

Breaking Notice

Info Notice

Black Notice

White Notice

Notices<div class="Notice(default)">Default Notice</div>
<div class="Notice(primary)">Primary Notice</div>
<div class="Notice(breaking)">Breaking Notice</div>
<div class="Notice(info)">Info Notice</div>
<div class="Notice(black)">Black Notice</div>
<div class="Notice(white)">White Notice</div>

Pill

Modelled from BrightSpot's .StreamPill.

The Pill component only has hover effects when placed on anchor <a> tags.

Pill Default Pill Primary Pill Breaking Pill Info Pill Black Pill White Pill

Pills<a class="Pill">Pill</a>
<a class="Pill(default)">Default Pill</a>
<a class="Pill(primary)">Primary Pill</a>
<a class="Pill(breaking)">Breaking Pill</a>
<a class="Pill(info)">Info Pill</a>
<a class="Pill(black)">Black Pill</a>
<a class="Pill(white)">White Pill</a>

Tag

Modelled from BrightSpot's .ArticlePage-tags .Link

The Tag component only has hover effects when placed on anchor <a> tags.

Tag Default Tag Primary Tag Breaking Tag Info Tag Black Tag White Tag

Tag<a class="Tag">Tag</a>
<a class="Tag(default)">Default Tag</a>
<a class="Tag(primary)">Primary Tag</a>
<a class="Tag(breaking)">Breaking Tag</a>
<a class="Tag(info)">Info Tag</a>
<a class="Tag(black)">Black Tag</a>
<a class="Tag(white)">White Tag</a>

Icons

Icons used by the Grove CMS can be accessed as an icon library

TODO: Icons don't inherit font color. Adapt into an icon font.

<i class="icon-heart"></i>

General Icons

bars
bookmark
chevron
close
email

email-alt
filter
grid
heart
stream

link
magnify
more
print
share

Audio Icons

play
pause

volume-mute
volume-low

volume-mid
volume-high

Brand Icons

alexa
facebook
flipboard

instagram
linkedin
pinterest

tumblr
twitter
youtube