CSS Demo page

FILE ICON(s) on links

You know how to make PDF file links and Excel file and WORD file and POWERPOINT files? Well now you can also use <a class="zip"...> to get a ZIP file icon! cool huh. I made three icons zip file icon zip file icon zip file icon - (using black now). Also just added <a class="dgn"...> for CADD DGN drawings to make DGN file links ; zip file icon dgn file icon 

 

COLORED BOX BACKGROUNDS w/ and w/o BORDERS

These demos also have class="debiggen" (smaller type) and manual padding (padding:8px 12px;) set. Also, see the attachments for screenshots of color contrast tests on these (using #444 dark gray as text color). Spoiler: they all meet WCAG AAA.

<p class="bkgColorG">  is GRAY

<p class="bkgColorGb">  is GRAY + border

 

<p class="bkgColor1">  is BLUE

<p class="bkgColor1b">  is BLUE + border

 

<p class="bkgColor2">  is GREEN

<p class="bkgColor2b">  is GREEN + border */

 

<p class="bkgColor3">  is  PURPLE

<p class="bkgColor3">  is  PURPLE + border */

 

<p class="bkgColor4">  is  GOLD (yellow)

<p class="bkgColor4b">  is  GOLD  + border

 

For BLOCKQUOTES that are really quotes

An idea f the blockquote element to make it a distinct call-out quote. With and without background color (off white); or with a blue background and a white quotemark. The three classes shown here are (in order below): 1. <blockquote class="gray-quote">  2. <blockquote class="gray-quote">   3. <blockquote class="blue-quote">   4. <blockquote class="white-quote">  

The default is switchable in the CSS

Life is no way to treat an animal.
Life is no way to treat an animal.
Life is no way to treat an animal.
Life is no way to treat an animal.

You can also add class="lil-shadow" to make a soft shadow on any block element (p, div, blockquote, etc.).

We are what we pretend to be, so we must be careful about what we pretend to be.

You can use class="lil-shadow" to make it like this:

HEADINGS using .titleA, .titleB, .titleC, etc.

THIS IS A TEST and a DEMO of using ".titleA, .titleB, .titleC" on headings

If the TEST BELOW is working, all the headings match (font/size/style).

h1, h2, h3, h4 class="titleA"

H1 Cupcake

Text test test text test

H2 Cupcake

Text test test text test

H3 Cupcake

Text test test text test

H4 Cupcake

Text test test text test

h1, h2, h3, h4 class="titleB"

H1 Marshmallow

Text test test text test

H2 Marshmallow

Text test test text test

H3 Marshmallow

Text test test text test

H4 Marshmallow

Text test test text test

h1, h2, h3, h4 class="titleC"

H1 Cupcake ipsum dolor

Text test test text test

H2 Marshmallow jelly beans.

Text test test text test

H3 Ipsum dolor sit amet

Text test test text test

H4 Dolor sit marshmallow jelly beans

Text test test text test

h1, h2, h3, h4 class="titleD"

H1 Cupcake ipsum dolor

Text test test text test

H2 Marshmallow jelly beans.

Text test test text test

H3 Ipsum dolor sit amet

Text test test text test

H4 Dolor sit marshmallow jelly beans

Text test test text test

 

BUTTONS testing

ACCORDIONS -- All options shown below w/ notes

Shown in sets to show how they stack. The top one has instructions inside it (toggle to see 'em).

Regular ACCORDION with bottom elements left in.

This is the default (Bootstrap) accordion. When you leave the bottom elements on there, the Javascript makes a "Read More" link out of the bottom element that is automatically placed there. Whereas if you delete the bottom elements, it uses the <h3> element as the trigger.

Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo.

Read More

Regular ACCORDION with bottom elements left in.

Hi Mom!

Read More

Regular ACCORDION with bottom elements left in.

Hi Mom!

Read More

 

Regular ACCORDION with no styling

...and with bottom elements removed (the elements below accordion-content; i.e. read-more link + hidden paragraph).   When you leave the bottom elements on there, the Javascript makes a "Read More" link out of the bottom element that is automatically placed there. Whereas if you delete the bottom elements, it uses the <h3> element as the trigger.

Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo.

Regular ACCORDION with no styling

Hi Mom.

Regular ACCORDION with no styling

Hi Mom.

 

ACCORDION class="accordion peti"

REQUIRED: ...you must delete the bottom elements (the elements below accordion-content; i.e. read-more link + hidden paragraph)

USE CASE: When you're stacking sets that fit better, smaller, like in a big set of accordions.

Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo.

ACCORDION class="accordion peti"

Hi Tammy!

ACCORDION class="accordion peti"

Hi Rebeca!

 

ACCORDION class="accordion peti-read-more"

REQUIRED:  class="accordion peti-read-more" and the bottom elements REMOVED (i.e. read-more link + hidden paragraph)

USE CASE: Usually used as a single, standalone instance, when you are hiding a long bit of text to to help the page flow better.

Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo.

ACCORDION class="accordion peti-read-more"

Like I said above - .peti-read-more is usually is NOT used in a stack of many accordions.

...WHICH IS WHY they have extra space above and below them, so they have good spacing when embedded under a paragraph.

ACCORDION class="accordion peti-read-more"

Hi Cyndi!

 

ACCORDION class="accordion hilit" (highlighted so it stands out)

REQUIRED: class="accordion hilit" and the bottom elements REMOVED (i.e. read-more link + hidden paragraph)

Styling is a work in progress; subject to change. But the USE CASE is solid (says me).

USE CASE: ...You might use this when it's a single, stand-alone accordion (so you can call extra attention to it).

Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo.

 

HELPER CLASSES -- TBD 

Misc. classes to help do things in a standard way. 

.embiggen and .debiggen

.lil-shadow - puts a soft shadow on any block element (i.e.,  p,  div, blockquote, etc.)

THE BUMP SET: 
Add to any element to "bump" space above (bumpT) or below (bumpB) using either padding (bumpTpa) or margin (bumpTma) to affect the spacing.

  • .bumpT, .bumpB      /* is the shorthand for .bumpTma and .bumpTma */ 
  • .bumpTma, .bumpBma  /* margin used to bump text */
  • .bumpTpa, .bumpBpa  /* padding used to bump text */ 
     

 

Regular Headings <h1>, <h2>, <h3>, etc.

Cupcake H1

And note the text spacing

Cupcake H2

And note the text spacing

Cupcake H3

And note the text spacing

Cupcake H4

And note the text spacing

Cupcake H5

And note the text spacing

Cupcake H6

And note the text spacing