dev-local-test-page

zone > zone-item
zone > zone-item
zone > zone-item
zone > zone-item
This text sits inside of a zone.
There is not a zone item inside of this box… just some text and we want to see how it formats

abcd efg hijk lmnop qrs tuv wxyz abcd efg hijk lmnop qrs tuv wxyz abcd efg hijk lmnop qrs tuv wxyz abcd efg hijk lmnop qrs tuv wxyz abcd efg hijk lmnop qrs tuv wxyz abcd efg hijk lmnop qrs tuv wxyz. 123 456 7890 123 456 7890 123 456 7890 123 456 7890 123 456 7890.

fbox-wrap > fbox

fwrap > fbox
abcd efg hijk lmnop qrs tuv wxyz
123 456 7890

here is an fbox footer

fwrap > fbox
abcd efg hijk lmnop qrs tuv wxyz abcd efg hijk lmnop qrs tuv wxyz
123 456 7890 123 456 7890

here is an fbox footer

fwrap > fbox
abcd efg hijk lmnop qrs tuv wxyz abcd efg hijk lmnop qrs tuv wxyz abcd efg hijk lmnop qrs tuv wxyz
123 456 7890 123 456 7890 123 456 7890 123 456 7890

here is an fbox footer

fwrap > fbox
abcd efg hijk lmnop qrs tuv wxyz abcd efg hijk lmnop qrs tuv wxyz abcd efg hijk lmnop qrs tuv wxyz abcd efg hijk lmnop qrs tuv wxyz
123 456 7890 123 456 7890 123 456 7890 123 456 7890 123 456 7890

here is an fbox footer
  • .fxrow { display: flex; justify-content: space-between; border:2px solid green;}
  • .fxrow > li { list-style-type:none; padding:5px 10px; margin:5px 10px; border:1px solid lime; }
  • .fxrow > p { margin:5px 0 20px 0; border:1px solid red; }
  • .fxrow > img { margin:5px; padding:5px border:1px solid purple; }
  • .fxrow > a {text-decoration: none;color: #000;border: 2px solid rgb(96, 139, 168);border-radius: 5px;background-color: rgba(96, 139, 168, .2);padding: 10px;display: block; }
  • abcd efg hijk lmnop qrs tuv wxyz

    ul.fboxes > .footer
  • abcd efg hijk lmnop qrs tuv wxyz abcd efg hijk lmnop qrs tuv wxyz

    ul.fboxes > .footer
  • abcd efg hijk lmnop qrs tuv wxyz abcd efg hijk lmnop qrs tuv wxyz abcd efg hijk lmnop qrs tuv wxyz

    ul.fboxes > .footer
  • abcd efg hijk lmnop qrs tuv wxyz abcd efg hijk lmnop qrs tuv wxyz abcd efg hijk lmnop qrs tuv wxyz abcd efg hijk lmnop qrs tuv wxyz

    ul.fboxes > .footer

H1. Test Page

box-md
box-md
box-md
box-md-10
box-md-15
box-md-25
box-md-30
box-md-20
box-md-100

Grid Floats

Wrapper: div class=”examplegrids border bg-blue gap-md”

col-md-9 float-md-right
col-md-3 float-md-left

H1 Sample – Abcde Fghijk Lmnop Qrstuv Wxyz 123456789

H2 A Bit Of H2 Text: 123456789 Abcdefg Hijklmnop Qrstuv Wxyz

H3 Some H3 text Abcdefg Hijklmnop Qrstuv Wxyz 123456789!

H4 Here is  some stuff lets see what we can do with it

H5 Here is  some stuff lets see what we can do with it
H6 Here is  some h6 text a b c d e f g h i j k l m n o p q r s t u v w x y z

bold text: Here is  some bold text 123456789

H1.cooltitle span.HUGE

H2.cooltitle span.HUGE

H3.cooltitle span.HUGE

H4.cooltitle span.HUGE

H5.cooltitle span.HUGE
H6.cooltitle span.HUGE

b.cooltitle span.HUGE

H1 Class=Red

H2 Class=Red

Here is some p class=”lime” – Abcde Fghijk Lmnop Qrstuv Wxyz 123456789

Here is some p class=”red” – Abcde Fghijk Lmnop Qrstuv Wxyz 123456789

Here is some p class=”blue” – Abcde Fghijk Lmnop Qrstuv Wxyz 123456789

Here is some p class=”black” – Abcde Fghijk Lmnop Qrstuv Wxyz 123456789

H1 With Spans With Color Classes

This is some regular p text with some span tests like span=lime The rest of this page is has a myriad of SCRATCH classes and HTML elements. We are using this to test all the theme’s styles.

This is an intro paragraph. Here is a test page with a myriad of HTML elements. We are using this to test all of our theme’s styles. As far as I can tell it uses almost every HTML element known to humankind. If you find a better HTML elements sample page, let us know.

First Header h1

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos.

Second header h2

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Third header h3

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.

Fourth header h4

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?”

Fifth header h5

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

Sixth header h6

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos.

Links

Link no class / default
Link class=blue
btn bg-blue white

Here are our hr horizontal rules. lets use an hr and an hr-class=gradient.


So, above and below this line of text there is an hr.



And above and below this line of text there is an hr class=gradient.


UL list with no classes added

  • li with no classes added
  • li with no classes added
  • li with no classes added. But lets make this a long line of text so we can see how the text wraps inside of a line item. We might have to expand and collapse the browser window to also view this on small screens.
  • li with no classes added. This is another long line of text sitting below. Is the spacing good?
  • This li has a class of “class=blue”. Is there a blue square bullet? is the text also blue?
  • This li has a class of “class=sq-blue”. Now there should be a blue square bullet but the text should be normal color.

OL Ordered list

  1. ol li 1. I dont use these too often, I probably should
  2. ol li Second
  3. ol li Third
  4. ol li Fourth
  5. ol li Fifth
  6. ol li Sixth

Definition lists. Inever use these things I wonder why?

DT This is a DT
DD This is a DD
DT Again
DD Again
DT Oregon
DD Salem
DT New York
DD Albany
dl > dt
dl > dd of certain lowercase letters that the x-height of a font.
dl > dt
dl > dd particular type size. Often used for “typeface”.
dl > dt Section
dl > dd of this proportion is called a “golden rectangle”. Golden rectangles can be found in the pro and many medieval manuscripts.

Forms

Legend Example

Helper text if necessary.

Error messages when appropriate.


Buttons



An Example Article

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis anon proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This is a GREAT pull quote.

– Author

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?”

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.

ZONE
This is text inside of a div class=”zone” tag. How does it look? We want to know the padding and margins as well as the background colors.
this is just a plain link inside a div class=”zone”.
The zone class can be modified the separate itself from other styles.
CALLOUT
This is text inside of a div class=”callout” tag. How does it look? We want to know the padding and margins as well as the background colors.
this is just a plain link inside a div class=”callout”.
The callout class can be modified the separate itself from other styles.

Blockquotes

Lets take a look at the base blockquote tag and then the zone classes that I added in the SCRATCH theme. W will start with the blockquote and then move on to other tests.

This is text inside of a blockquote tag. How does it look? We want to know the padding and margins as well as the background colors.
this is just a plain link inside a blockquote
a class=”Author”

This is just some fill text to separate the blockquoute, zone, and callout examples. adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?”
At vero eos et accusamus et iusto odio is culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.

Pre and Code examples

this is some pre text. if we put html code in here like is this bold? It should not be

this is some code text. if we put html code in here like is this bold? It should not be

This text is "code" wrapped inside a "pre" tag. I think it will expand the page
Does this div render?

 

This text pre text. below is a div with inline style added.
Does this div render?
This is a caption for a table
Table TH Table TH Table TH Table TH
Table TD Table TD Table TD Table TD
Table TD Table TD Table TD Table TD