HeaderText
TopicText
CENTER Column 1
- Numbered Outline
- Line 2
CENTER text in the Div
**** Div with a picture in it. ****
This Div has a background-image set to one of my pictures
This Div has a background-image set to one of my pictures
This Div has a background-image set to one of my pictures
The Div background-color names can be found here: https://www.w3schools.com/colors/colors_names.asp
**** Classes ****
**** Center Text class="uk-text-center" ****
This is centered text with class="uk-text-center"
**** Small Text ****
This is <small>Small Text</small> and this is back to normal
**** uk-article-lead ****
This is uk-article-lead text using <p class="uk-article-lead">
**** tm-text-uppercase ****
This is uppercase text using <p class="tm-text-uppercase">
**** Color Div backgrounds with color names ****
Go here: https://www.w3schools.com/colors/colors_names.asp
**** Using Div Grid ****
**** A Single Div ****
This container has a number of Divs in it. It has the class="uk-grid data-uk-grid-margin"
This is Div has the class="uk-width-1-1"
ad lkfjasdlkfasdkl sad sad flksadf asdlk fsad f asdfd fja sdf dl fsdlkf sdkl flakd fad fasd fklad fla df df ad lkfjasdlkfasdkl sad sad flksadf asdlk fsad f asdfd fja sdf dl fsdlkf sdkl flakd fad fasd fklad fla df df ad lkfjasdlkfasdkl sad sad flksadf asdlk fsad f asdfd fja sdf dl fsdlkf sdkl flakd fad fasd fklad fla df df
**** Two Panels 1-2 - class="uk-width-medium-1-2" ****
This is Div has the class="uk-width-medium-1-2 uk-grid-margin"
ad lkfjasdlkfasdkl sad sad flksadf asdlk fsad f asdfd fja sdf dl fsdlkf sdkl flakd fad fasd fklad fla df df
This is Div has the class="uk-width-medium-1-2 uk-grid-margin"
ad lkfjasdlkfasdkl sad sad flksadf asdlk fsad f asdfd fja sdf dl fsdlkf sdkl flakd fad fasd fklad fla df df
**** Three Panels - class="uk-width-medium-2-5 2-5 1-5" ****
This is Div has the class="uk-width-medium-2-5"
ad lkfjasdlkfasdkl sad sad flksadf asdlk fsad f asdfd fja sdf dl fsdlkf sdkl flakd fad fasd fklad fla df df
This is Div has the class="uk-width-medium-2-5"
ad lkfjasdlkfasdkl sad sad flksadf asdlk fsad f asdfd fja sdf dl fsdlkf sdkl flakd fad fasd fklad fla df df
This is Div has the class="uk-width-medium-1-5"
ad lkfjasdlkfasdkl sad sad flksadf asdlk fsad f asdfd fja sdf dl fsdlkf sdkl flakd fad fasd fklad fla df df
**** Three Panels - class="uk-width-medium-3-10" ****
This is Div #1 and has the class="uk-width-medium-3-10"
ad lkfjasdlkfasdkl sad sad flksadf asdlk fsad f asdfd fja sdf dl fsdlkf sdkl flakd fad fasd fklad fla df df d jaflkd alk dlkf aldsk jflksd flksd jf;l asdf jsdfl; dsf;l asdflk sdf jsadlfkj sdlkf j
This is Div #2 and has the class="uk-width-medium-3-10"
ad lkfjasdlkfasdkl sad sad flksadf asdlk fsad f asdfd fja sdf dl fsdlkf sdkl flakd fad fasd fklad fla df df d jaflkd alk dlkf aldsk jflksd flksd jf;l asdf jsdfl; dsf;l asdflk sdf jsadlfkj sdlkf j
This is Div #3 and has the class="uk-width-medium-3-10"
ad lkfjasdlkfasdkl sad sad flksadf asdlk fsad f asdfd fja sdf dl fsdlkf sdkl flakd fad fasd fklad fla df df d jaflkd alk dlkf aldsk jflksd flksd jf;l asdf jsdfl; dsf;l asdflk sdf jsadlfkj sdlkf j
**** Two Colored Panels - class="uk-width-medium-5-10" ****
This is Div #1 and has the class="uk-width-medium-3-10"
I tried to get a space between the colored Divs, but neight margin: 0 10 0 10 or padding: 0 10 0 10 work. Not sure what else to do. ad lkfjasdlkfasdkl sad sad flksadf asdlk fsad f asdfd fja sdf dl fsdlkf sdkl flakd fad fasd fklad fla df df d jaflkd alk dlkf aldsk jflksd flksd jf;l asdf jsdfl; dsf;l asdflk sdf jsadlfkj sdlkf j
This is Div #2 and has the class="uk-width-medium-3-10"
I tried to get a space between the colored Divs, but neight margin: 0 10 0 10 or padding: 0 10 0 10 work. Not sure what else to do. df df d jaflkd alk dlkf aldsk jflksd flksd jf;l asdf jsdfl; dsf;l asdflk sdf jsadlfkj sdlkf j
**** Three Colored Panels - class="uk-width-medium-3-10" ****
This is Div #1 and has the class="uk-width-medium-3-10"
I tried to get a space between the colored Divs, but neight margin: 0 10 0 10 or padding: 0 10 0 10 work. Not sure what else to do. ad lkfjasdlkfasdkl sad sad flksadf asdlk fsad f asdfd fja sdf dl fsdlkf sdkl flakd fad fasd fklad fla df df d jaflkd alk dlkf aldsk jflksd flksd jf;l asdf jsdfl; dsf;l asdflk sdf jsadlfkj sdlkf j
This is Div #2 and has the class="uk-width-medium-3-10"
I tried to get a space between the colored Divs, but neight margin: 0 10 0 10 or padding: 0 10 0 10 work. Not sure what else to do. df df d jaflkd alk dlkf aldsk jflksd flksd jf;l asdf jsdfl; dsf;l asdflk sdf jsadlfkj sdlkf j
This is Div #3 and has the class="uk-width-medium-3-10"
I tried to get a space between the colored Divs, but neight margin: 0 10 0 10 or padding: 0 10 0 10 work. Not sure what else to do. df df d jaflkd alk dlkf aldsk jflksd flksd jf;l asdf jsdfl; dsf;l asdflk sdf jsadlfkj sdlkf j
**** BOXES ****
**** Textured Boxes ****
Title for Panel is class="uk-panel-title"
<div class="uk-align-center uk-text-center uk-width-1-1">
<div id="tm-top-a" class="uk-block tm-block-top-a uk-block-muted tm-block-padding-large tm-block-texture">
<h3 class="uk-panel-title" style="color:#000;">Title for Panel is class="uk-panel-title"</h3>
<p class="uk-margin-large-bottom" style="color:#000;">This textured div has the following coding <br />
<div id="tm-top-a" class="uk-block tm-block-top-a uk-block-muted <br>
tm-block-padding-large tm-block-texture">
</p>
</div>
</div>
<div class="uk-block uk-block-primary tm-block-padding-large tm-block-texture">
<div class="uk-container uk-container-center">
<p class="uk-margin-large-bottom" style="color:#000;">This is in a div with class="uk-block uk-block-primary tm-block-padding-large tm-block-texture"</p>
</div>
</div>
<div class="uk-block uk-block-secondary tm-block-padding-large tm-block-texture">
<div class="uk-container uk-container-center">
<p class="uk-margin-large-bottom" style="color:#000;">This is in a div with class="uk-block uk-block-secondary tm-block-padding-large tm-block-texture"</p>
</div>
</div>
**** Boxes in a Textured Box ****
Top B
div class="uk-width-1-1
uk-width-medium-1-4
uk-block-default
uk-row-first"
div class="uk-panel
uk-panel-box"
style="min-height: 134px;"
Top B
div class="uk-width-1-1
uk-width-medium-1-4
uk-block-muted
uk-row-first"
div class="uk-panel
uk-panel-box"
style="min-height: 134px;"
Top B
div class="uk-width-1-1
uk-width-medium-1-4
uk-block-primary
uk-row-first"
div class="uk-panel
uk-panel-box"
style="min-height: 134px;"
Top B
div class="uk-width-1-1
uk-width-medium-1-4
uk-block-secondary
uk-row-first"
div class="uk-panel
uk-panel-box"
style="min-height: 134px;"
Top B
div class="uk-width-1-1
uk-width-medium-1-4
uk-block-default
uk-row-second"
div class="uk-panel
uk-panel-box"
style="min-height: 134px;"
Top B
div class="uk-width-1-1
uk-width-medium-1-4
uk-block-muted
uk-row-second"
div class="uk-panel
uk-panel-box"
style="min-height: 134px;"
Top B
div class="uk-width-1-1
uk-width-medium-1-4
uk-block-primary
uk-row-second"
div class="uk-panel
uk-panel-box"
style="min-height: 134px;"
Top B
div class="uk-width-1-1
uk-width-medium-1-4
uk-block-secondary
uk-row-second"
div class="uk-panel
uk-panel-box"
style="min-height: 134px;"
**** OPEN Boxes ****
H3 with class="uk-panel-title"
This is in a div with class="uk-panel"
H3 with class="uk-panel-title"
This is in a div with class="
uk-panel
uk-panel-divider"
Notice the line above it.
H3 with class="uk-panel-title"
This is in a div with class="
uk-panel
uk-panel-header"
Notice the Header is above the line.
**** Box, Primary Box, Secondary Box ****
Box #1: Default
This is a Div with the class="
uk-panel
uk-panel-box"
Box #2: Muted
This is a Div with the class="
uk-panel
uk-panel-box"
uk-panel-box-muted
Box #3: Primary
This is a Div with the class="
uk-panel
uk-panel-box
uk-panel-box-primary"
Box #4: Secondary
This is a Div with the class="
uk-panel
uk-panel-box
uk-panel-box-secondary"
**** Text ****
**** Two Columns of Text ****
To do this, you place a Div and a paragraph in it likes this:
<div class="uk-column-medium-1-2 uk-margin-large-top">
<p class="uk-text-left">
This this text....Lorem ipsum dolor sit amet, consectetuer ipsum elit. Aenean commodo ligula eget dolor. Aenea dis massa. Cum sociis natoque penatibus et magnis parturient montes, nascetur ridiculus mus. Donec quam felis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec Lorem ipsum dolor sit amet, consectetuer ipsum elit. Aenean commodo ligula eget dolor. Aenea dis massa. Cum sociis natoque penatibus et magnis parturient montes, nascetur ridiculus mus. Donec quam felis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer ipsum elit. Aenean commodo ligula eget dolor. Aenea dis massa. Cum sociis natoque penatibus et magnis parturient montes, nascetur ridiculus mus. Donec quam felis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec Lorem ipsum dolor sit amet, consectetuer ipsum elit. Aenean commodo ligula eget dolor. Aenean commodo ligula eget dolor.
Then end with </p> and </div>
**** Blockquote ****
Nick Vujicic class="uk-article-lead tm-text-uppercase"
"I encourage you to accept that you may not be able to see a path right now, but that doesn't mean it's not there. To do this us this:
<div class="uk-text-center">
<p class="tm-text-uppercase uk-article-lead">Nick Vujicic</p>
“<blockquote class="uk-margin-large-bottom">text</blockquote></div>
**** Lines ****
The next code is: <hr />
The next code is: <hr class="uk-article-divider" /> which should include a little more space around the line.
Then we will have another article to show the spacing before it.
**** Text Elements ****
<span class="uk-text-primary" >
<span class="uk-text-success" >
<span class="uk-text-warning" >
<span class="uk-text-danger" >
<strong> strong / bold < /strong >
<code>
even spacing for letters
< /code ><del>
<mark> Use Mark to highlight < /mark >
<q>q
Quotations are italics w quotation marks< /q >
<abbr> abbr element < /abbr >
<dfn> dfn element < /dfn >
<span class="uk-badge">Badge</span>
<span class="uk-badge uk-badge-notification">1</span>
<span class="uk-badge uk-badge-success">Success</span>
<span class="uk-badge uk-badge-warning">Warning</span>
<span class="uk-badge uk-badge-danger">Danger</span>
**** Headers ****
This inside the container div, you have the following 3 div that have this coding:
<div class="uk-panel">
h1 -- < h1 class="uk-display-inline">h1</h1>
h2 -- < h2 class="uk-display-inline">h2</h2>
h3 -- < h3 class="uk-display-inline">h3</h3>
h4 -- < h4 class="uk-display-inline">h4</h4>
h5 -- < h5 class="uk-display-inline">h5</h5>
h6 -- < h6 class="uk-display-inline">h6</h6>
**** Blockquote ****
This is text inside a blockquote.
<div class="uk-width-medium-1-2 uk-grid-margin">
<blockquote>
<p>This is the blockquote.</p>
<small>This is the small</small>
</blockquote>
</div>
**** Form Fields ****
**** Info Message in Box ****
- List item 1
- List item 2
- List item 3
- List item 1
- List item 2
- List item 3
Table | Heading |
---|---|
Table | Data |
Table | Data |
- Description lists
- Description text.
- Description lists
- Description text.