We Really Mean “Full Control over HTML & CSS”

Published: over 1 year ago
by: Mathias Biilmann
with: 0 Comments

One thing we've noticed during the first 4 months of beta testing is how surprised our testers get once they realize that when we say, “Full control over HTML and CSS” we really mean full control.

Lots of CMSs, site builders and e-commerce platforms like to claim that you get full access to the CSS and HTML, when what they really mean is that you can touch a snippet here or there, decide on a header or tweak a general layout. That's not what we mean. When we say full control we really mean that there is no part of the HTML, CSS or even javascript that you cannot write exactly as you want.

There's no specific layout structure that you have to comply to. No blocks of markup generated by a blog or calendar module that you can only decide where to put. No pre-made navigation blocks that you can only position, but not tweak. No auto-generated javascript that gets injected into your page outside your control.

With Webpop the output is exactly what you put in. No exceptions.

What really makes this possible is the combination of our easy to customize content types and our flexible templating language.

A really simple example

Barebones Template

We start by creating a new project from our “Blank” project template. This sets up a completely empty project. There's a single template called index.tpl and if you preview the website you'll get a completely blank page. Since we've put nothing in yet, the output is empty.

Now lets turn the template into a simple html5 document:

<!DOCTYPE html>
<html>
 <head>
   <title>What goes in, comes out</title>
 </head>
 <body>
   <h1>When we say full control, we mean full control</h1>
 </body>
</html>

Once we go to preview the page we'll see exactly this html. Apart from being just about the fastest way to get a static mockup online on it's own domain, this is not that interesting in itself. So lets make it more so.

Hooking into the CMS

Lets start putting in some tags and customizing our content a bit. First we'll simply replace the h1 with the title from the current content. We change index.tpl to look like this:

<!DOCTYPE html>
<html>
 <head>
   <title>What goes in, comes out</title>
   <pop:admin />
 </head>
 <body>
   <pop:content>
     <h1><pop:title /></h1>
   </pop:content>
 </body>
</html>

The <pop:admin /> tag tells Webpop to include a tiny javascript when a logged in client is viewing his site. It will insert a small gear icon in the upper right corner of the page that he can click to edit content and add new entries.

The <pop:content> and <pop:title /> tags tell Webpop to take the content based on the current URL and show the title. The pop tags behave like XHTML tags -- when you open one you need to make sure you close it again.

Clicking on the gear will bring up the on-site client interface that a client would use to edit his content. Changing the title is now so easy that anybody could do it.

Client side editing

In case you haven't seen it yet, take a quick look at our On-Site Editing screencast to get a feel for just how easy this is.

Getting your own pop tags to play with

So far we've been looking at tags that are always there to use, but Webpop is not about a set of predefined tags you can play with, it's all about setting up exactly the tags you need for your website.

Lets say we want an image on the homepage that can be changed by your client. In the "Content" tab you'll see a button saying "Customize form" at the top of any content. Clicking this lets us reshape the form for this content to suit our needs. In this case we'll delete the default body field in the "Home" and add a new image field with the name image.

Customizing content with the formbuilder

Now when we go back to the template we can use <pop:image /> within the content tag. Again, this simply means: show me the image field from the current content. By now the complete template looks like this:

<!DOCTYPE html>
<html>
 <head>
   <title>What goes in, comes out</title>
   <pop:admin />
 </head>
 <body>
   <pop:content>
     <h1><pop:title /></h1>
     <div class="image">
       <pop:image />
     </div>
   </pop:content>
 </body>
</html>

"Hey! But you said there are no blocks of auto-generated html — where did the <img> tag for the image come from then?"

Well actually, using the image field like this is just a convenient shortcut. The full control is still there, right at your fingertips:

<div class="image">
 <pop:image>
   <img id="look-ma" class="my own markup" src="<pop:src />" alt="<pop:alt />" />
 </pop:image>
</div>

Notice that now we open up the image tag, effectively saying “show me the src and the alt from the image field in the current content”. Our templating language is quite forgiving, so if you are showing a content with no image the whole tag will just be ignored.

Go to the content tab and upload an image for our new image field. It should show up on the website straight away, and can easily be changed from the on-site editor.

Simple page with photo

In this post we've barely scratched the surface of what Webpop can do, but no matter how deep you dig you'll find the same basic principle: the output is exactly what you put in. This is what we mean with “Full Control over HTML and CSS.”