Resources for how to grow your Sunday School class

Subscribe to our Teaching Tips Newsletter, and learn simple, practical, step-by-step principles from the Teaching To Transform Not Inform series!

M28:20 can help you grow your Sunday school class with simple, practical, step-by-step, teacher training resources that equip teachers to fulfill the Great Commission (Matt.28:19-20) by teaching lessons that are more transformational than informational.

HeaderText

TopicText

HeaderText NOTE!!!! Place above both Div so it is centered over both of them!!!

TEXT HERE

 


 

 
 
 
 

CENTER Column 1

  1. Numbered Outline
  2. 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

Warp Layout System

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

**** 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 />
&lt;div id=&quot;tm-top-a&quot; class=&quot;uk-block tm-block-top-a uk-block-muted <br>
tm-block-padding-large tm-block-texture&quot;&gt;
</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-muted" >
<span class="uk-text-primary" >
<span class="uk-text-success" >
<span class="uk-text-warning" >
<span class="uk-text-danger" >
<em> emphasis / italics < /em >
<strong> strong / bold < /strong >
<code> even spacing for letters < /code >
<del> delete < /del >
<ins> inserted text (used w <del>) < /ins >
<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 ****

Info message in div with class="uk-alert" data-uk-alert

Inside Div with class="uk-alert uk-alert-success" data-uk-alert

Inside Div with class="uk-alert uk-alert-warning" data-uk-alert

Inside Div with class="uk-alert uk-alert-danger"

Danger message

55%
55%
55%
55%
Form states
Form styles

  • List item 1
  • List item 2
  • List item 3
  • List item 1
  • List item 2
  • List item 3
Table caption
Table Heading
Table Data
Table Data
Description lists
Description text.
Description lists
Description text.