Building a Content Management System with Prototype

The first step involved in the creation of this Prototype-based content management system consists of defining the group of CSS styles that will provide this application with a decent look and feel, and at the same time, improve the aesthetic aspect of the different elements that comprise the front end.

In plain terms, the visual appearance that I plan to give to this application is illustrated by the image below, so take a brief look at it:

As you can see, the previous screen shot shows quite clearly how the user interface that corresponds to the CMS is going to look. The front-end of the application in question will be integrated with only two primary areas. The first one will display the full list of published articles, including some useful information, such as authors, titles, and naturally, the contents of the articles themselves. The second one will contain a simple text area for adding new articles to the system.

In addition, each article's entry will display two basic links for updating entries and eventually, deleting them. As you saw, the way that the CMS is going to work is indeed very straightforward. Now that I have explained its functionality, pay attention to the following set of CSS styles, which are tasked with creating the look and feel of the application. Here they are:

body{
   padding: 0;
   margin: 0;
   background: #fff;
}

h1{
   width: 550px;
   padding: 10px;
   background: #ffc;
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 10px;
   font: bold 22px Arial, Helvetica, sans-serif;
   color: #000;
   text-align: center;
   border: 1px solid #999;
}

h2{
   font: bold 14px Arial, Helvetica, sans-serif;
   color: #900;
}

#contents{
   width: 550px;
   height: 400px;
   background: #ffc;
   padding: 10px;
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 10px;
   border: 1px solid #999;
   overflow: auto;
}

#article{
   background: #eee;
   padding: 10px;
   margin-bottom: 10px;
   border: 1px solid #999;
}

#contents p{
   font: normal 11px Verdana, Arial, Helvetica, sans-serif;
   color: #000;      
}

#contents a:link,#contents a:visited{
   font: bold 11px Verdana, Arial, Helvetica, sans-serif;
   color: #00f;
   text-decoration: underline;
}

#contents a:hover{
   color: #c30;
}

#formcontainer{
   width: 550px;
   height: 300px;
   background: #ffc;
   padding: 10px;
   margin-left: auto;
   margin-right: auto;
   border: 1px solid #999;
}

#formcontainer p{
   text-align: right;
   margin-right: 100px;
   font: bold 11px Verdana, Arial, Helvetica, sans-serif;
   color: #000;
}

.inputbox{
   width: 300px;
   padding: 2px;
   background: #eee;
   font: normal 11px Verdana, Arial, Helvetica, sans-serif;
   color: #000;
   border: 1px solid #999;
}

.submitbox{
   font: normal 11px Verdana, Arial, Helvetica, sans-serif;
   color: #000;
   padding: 2px;
}

textarea{
   width: 300px;
   height: 150px;
   padding: 2px;
   background: #eee;
   font: normal 11px Verdana, Arial, Helvetica, sans-serif;
   color: #000;
   border: 1px solid #999;
}

As you saw above, all that I did here was add some basic CSS styles to the main elements that compose the user interface of the content management system. According to this concept, in this case I styled the DIVs that will house article-related data, as well as the respective insertion form. I also spiced up the appearance of other elements, like headers, paragraphs, and input boxes.

So far, so good. At this stage I already defined all the CSS styles corresponding to the front-end of this Prototype-based CMS. So what's next? Well, to follow a logical sequence, in this specific case it's necessary to create the structural markup that will be associated with the styles that you learned previously.

Therefore, taking into account this requirement, in the section to come I'm going to define some basic DIVs and a simple web form. All of these elements (and possibly other ones) will be responsible for creating the (X)HTML markup of this content management system.

Want to see how this process will be performed? Jump ahead and keep reading.