<< Back to docs

Getting Familiar with the Demo Page

You can view the demo page here.

The demo page contains of a few parts, lets start with the first portion the header tag:





52Framework -- brought to you by the enavu network

As you can see we are using all the new HTML5 methods of starting a page. Much cleaner and simpler. We add the javascript file which builds the new elements we use in the dom. Then we have all the stylesheets, to learn more about the files we embed go to What's in the box. We have an io only tag, this is really not important and can be removed, it adds a text-shadow to the logo. Then we have a header style tag that includes styles that are specific to this page, these should usually be removed when you're developing your new site on this framework.

The header portion of the demo:

image 

    
    
    
The framework from the future!

The header contains a logo element which has the class left (the class left floats an element left). Then you have the nav element which in html 5 stands for navigation. Inside it we have nicely added a unordered list and added links to it.

Form Elements



    
Fieldset

The left column contains a form. This is a regular form with a fieldset. What is cool about this form is the types we are using. For example type url will validate url's in HTML5 compliant browsers. We will be adding JS support to make this work in current browsers soon.


  

        
This is a title h1

        
This is what a blockquote will look like, floated right.
Testing a second line inside the blockquote.

        
Lorem ipsum link one dolor sit amet, consectetur adipiscing elit. Nullam  a purus ac est dapibus feugiat eu eget nulla. Sed molestie feugiat viverra. Pellentesque consectetur, leo in faucibus congue, elit purus bibendum tellus, non tincidunt tortor mauris in sem. Suspendisse sodales metus eget sem suscipit eleifend. Proin porttitor, ante vel egestas pretium, nulla eros mollis eros, dapibus molestie lacus mi at sapien. Fusce risus risus, vulputate vel bibendum nec, accumsan non lacus.Fusce viverra mollis sapien non mattis. Suspendisse id est sapien. Aliquam quis tellus sed lorem fermentum rutrum in eget urna. Mauris ac dolor sit amet tellus tristique eleifend. Morbi venenatis ultricies eleifend. Nunc arcu lorem, feugiat pulvinar laoreet convallis, consequat sed elit. Suspendisse potenti.Vivamus a turpis augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi blandit erat eget purus gravida nec aliquam lectus sollicitudin. Aenean semper tortor nunc, dignissim malesuada arcu. Nunc nec massa a erat consectetur porta vitae eu mauris. Donec a orci dolor. Sed ac erat sed ipsum imperdiet accumsan. 

    
  
    
 
        
This is an h2

  
Nulla facilisi. Etiam eget laoreet turpis. Duis magna odio, volutpat eu varius vitae, interdum eu felis. Pellentesque luctus tincidunt urna vel dictum. Etiam facilisis purus ut lorem aliquet eleifend. Sed porttitor semper turpis mattis iaculis. Vivamus a turpis augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi blandit erat eget purus gravida nec aliquam lectus sollicitudin.
       
            
            css {

            -moz-border-radius: 5px; 

            -webkit-border-radius: 5px;

            -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);

            -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);

            }


           
            <body>

            <section class="row">

                <header>        

                    <nav>

                    </nav>

                </header>

                <aside class="col_4 col">

                </aside>

                <section class="content col_12 col">

                     <article>		

                     </article>

                </section><!-- end content -->

            </section><!-- end wrap -->

            <footer class="wrap_16">

            </footer>

            </body>

            
       
        

         Aenean semper tortor nunc, dignissim malesuada arcu. Nunc nec massa a erat consectetur porta vitae eu mauris. Donec a orci dolor. Sed ac erat sed ipsum imperdiet accumsan. Nullam commodo neque adipiscing lacus sagittis sit amet dictum urna vestibulum. Nulla sapien turpis, laoreet in lacinia sed, malesuada sit amet odio. Maecenas cursus mauris vel nunc adipiscing id bibendum ipsum faucibus.

    
    
        
This is an h3

        
Duis ac arcu ante, at lacinia dui. Ut eget justo in nulla rutrum mollis. Mauris euismod justo et quam bibendum laoreet volutpat lorem mollis. In hac habitasse platea dictumst.
        <pre>This is a pre tag</pre>
         Mauris ut eleifend neque. Duis nulla metus, tempus nec varius quis, tincidunt consectetur nisi. Donec rhoncus quam vel quam bibendum rutrum. Mauris et commodo felis. Nam varius eleifend nulla quis sagittis. Quisque id tortor at dolor dictum interdum.

  

     

        
List Elements

        
    
            
  • List item 1
    • 
            
  • List item 2
    • 
        
	
        
			
        
Other Elements Styling
	
        
        

                This is abbreviation

                This is strong

                This is emphasis

                This is bold text

                This is italic text

                This is cite

                This is small text

                This is big text

                This is deleted text

                This is inserted text

                This is defining instance

                This is user input

                This is sample output

                This is inline quotation 

                These are subscript and superscript

                This is a variable

The main column contains all the different elements that we have styled we support in the 52framework.

Posted By: agrublev

Comments

  • By Antonio Fernandes - posted: Friday, Feb 5th 2010

    I noticed you guys are using SyntaxHighlighter it never displays properly and i notice that stuff was missing from the first snippet, you guys should try:
    SyntaxHighlighter Extended

    I just mad ethe change yesterday, that how i noticed yours was missing tags

Add Comment

Name:

Email:

Remember my personal information

Notify me of follow-up comments?

Please enter the word you see in the image below:


Documentation


Interested in contributing to the framework? Wanna be famous? Check out the Community, click here.

Brief Feature List

  • rounded corners
  • text-shadow
  • box-shadow
  • html5 markup
  • grid system
  • css reset
  • and much more

Latest Tweet from 52framework

@ryanolson no unfortunately i did not get your email, ill remove activations.