How to display RDF data described by Fresnel vocab

I am studying Semantic web while trying to create a simple single page application (SPA).

The SPA should be able to display various rdf data (and also allow the user to create new ontologies in a user friendly way).

I have full controll of the format of the ontologies (meaning I can state if they are represented as RDF/XML, ntripples, turtle etc. and also I can decide, if I want to use ontologies to describe how the data should be displayed).

From what I read in the Fresnel Manual I think this can be a good way to describe the "look" of the ontologies.

I discovered what looks like a JQuery fresnel engine, but am missing some examples on how to use this.

Questions:

How can I use such an engine to display the data below?
Is Fresnel something that is recommended to use for this issue?
If not, what do you recommend?

An example from the Fresnel manual:

RDF object to be displayed

:Chris rdf:type foaf:Person ;
       foaf:name "Chris Bizer" ;
       foaf:mbox <mailto:chris@bizer.de> ;
       foaf:mbox <mailto:bizer@gmx.de> ;
       foaf:depiction <http://www.wiwiss.fu-berlin.de/suhl/ueber_uns/team/Fotos/ChrisPassbild.jpg> .

Fresnel styling information:

:foafGroup rdf:type fresnel:Group ;
           fresnel:stylesheetLink <http://www.example.org/example.css> ;
           fresnel:containerStyle "background-color: white;"^^fresnel:stylingInstructions ; 

:foafPersonFormat rdf:type fresnel:Format ;
                  fresnel:classFormatDomain foaf:Person ;
                  fresnel:resourceStyle "background-color: gray;"^^fresnel:stylingInstructions ;
                  fresnel:group :foafGroup .

:nameFormat rdf:type fresnel:Format ;
            fresnel:propertyFormatDomain foaf:name ;
            fresnel:propertyStyle "border-top: solid black;"^^fresnel:stylingInstructions ;
            fresnel:labelStyle "font-weight: bold;"^^fresnel:stylingInstructions ;
            fresnel:group :foafGroup .

:urlFormat rdf:type fresnel:Format ;
           fresnel:propertyFormatDomain foaf:homepage ;
           fresnel:propertyFormatDomain foaf:mbox ;
           fresnel:value fresnel:externalLink ;
           fresnel:propertyStyle "border-top: solid black;"^^fresnel:stylingInstructions ;
           fresnel:labelStyle "font-weight: bold;"^^fresnel:stylingInstructions ;
           fresnel:group :foafGroup .

:depictFormat rdf:type fresnel:Format ;
              fresnel:propertyFormatDomain foaf:depiction ;
              fresnel:label fresnel:none ;
              fresnel:value fresnel:image ;
              fresnel:propertyStyle "border-top: solid black;"^^fresnel:stylingInstructions ;
              fresnel:group :foafGroup .