              
                <div class="row">
                  <div class="col-6 sm-col-2">
                    col-1
                  </div>
                  <div class="col-6 sm-col-2 last">
                    col-2
                  </div>
                </div>

This example code shows how to allow for two <div> tags to split evenly across the screen on both grid systems. rows and columns can also be nested.

The Grid system has two parts. The 12 column portion is a 12 column grid system based on viewport width percentages. This portion is used for screens wider than 800 px. The second portion is the 4 column portion. This is for screens 800 px in width or less. This is demonstrated above by resizing your browser window. all grid columns on THIS PAGE ONLY are shown with hover to clearly show where a column starts and stops.

col-1

col-2

col-3

col-4

col-5

col-6

col-7

col-8

col-9

col-10

col-11

col-12

col-1

col-11

col-2

col-10

col-3

col-9

col-4

col-8

col-5

col-7

col-6

regular column

A nested grid

col-1

col-2

col-3

col-4

col-5

col-6

col-7

col-8

col-9

col-10

col-11

col-12

col-1

col-11

col-2

col-10

col-3

col-9

col-4

col-8

col-5

col-7

col-6

Test H1

Test H2

Test H3

Test H4

Test H5

Test H6

The header tags all have font properties in common to better assosiate them to each other & the framework.

This feature is implemented by using the <h1> tag as you normally would in html.

Header tags are auto Styled, simply use the header tag as you typlically would.

Header Test

That was written using <header>Header Test</header>

My Link

Links are also formatted automatically using the Link tag

              
                <nav>
                    <a href="#">
                        link
                    </div>
                    <a href="#">
                        link
                    </div>
                    <a href="#">
                        link
                    </div>
                </nav>

This class shows how easy it is to create your own responsive navigation.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lorem libero, aliquet in posuere a, maximus vel justo. Quisque consectetur mauris quis quam euismod, et sodales neque dictum. Donec vestibulum libero id congue maximus. Aenean ultrices, nisl a imperdiet egestas, lectus ante blandit magna, et sagittis dui diam eu ante. Vivamus eget semper nisl. Etiam non varius purus. Integer ultrices porta vestibulum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis facilisis ut libero sed cursus. Fusce dignissim nec nulla et facilisis. Duis auctor, ipsum id cursus efficitur, ante arcu consectetur metus, at vestibulum mauris enim et magna. Donec enim elit, tincidunt vel ante eu, molestie sollicitudin lacus.

Mauris eget felis a risus feugiat consequat et non massa. Vestibulum non arcu interdum, rhoncus velit eget, suscipit magna. Sed non lectus eget augue luctus auctor. Vivamus sit amet tempus libero, id lacinia velit. Nulla eget laoreet diam, eget porta sem. Curabitur rhoncus ligula libero, a viverra eros dictum et. Sed scelerisque mauris ac massa blandit vehicula sed eget metus. Aliquam id vestibulum tortor, eu malesuada elit. Fusce gravida iaculis tempor. Quisque sed pulvinar orci. Nulla nulla justo, tempor ac luctus at, aliquam quis felis. Nunc vestibulum justo vel magna dapibus lobortis. Morbi rhoncus id lectus vitae dictum. Curabitur sed neque eu nibh maximus commodo vel in dolor. Morbi ornare urna enim, ut egestas nunc accumsan nec. Etiam eu quam dictum, tempor nulla porttitor, bibendum ligula. Vestibulum placerat libero vitae convallis hendrerit. Nam et vulputate urna, sit amet rutrum sem. Donec vitae turpis faucibus, finibus ligula ut, blandit nulla. Maecenas a lacus luctus, commodo urna eu, malesuada elit.

Images auto respond based on the width of their container. As a result images never distort.

this text hides & shows

The object to click is in the btnHead class, while the object to hide is in the hsStuff class. these classes must be adjacent in your html code.

Image slider not available on mobile devices, as these devices cannot detect hover.

This example code is how it's implemented in html. Css background images determine the Image

              
                <div class="slider">
                  <div class="picLeft">
                  </div>
                  <div class="picRight">
                  </div>
                </div>

click here!

The object to click is in the .btnModal class, while the object to hide is in the .modal class. These classes must be adjacent in your html code. .modalExit class is used to close the modal.

Quotes are auto loaded with the qoutes class.

              
                <div class="slideShow">
                  <div class="prev">Prev</div>
                  <div class="slides">
                      <img class="ssImg" src="Images/24FlyEdit.jpg">
                      <img class="ssImg" src="Images/sliderRight.jpg">
                      <img class="ssImg" src="Images/MobileCoatOfArms.jpg">
                  </div>
                  <div  class="next">Next</div>
                </div>