Fast Web UI With Webknife

Final product image
What You'll Be Creating

The modern web demands faster and faster development cycles. With this greater demand, there is a need for tools to help meet these deadlines. Webknife is a web development framework to help in creating nice layouts and designs with the least amount of coding. In this tutorial, I am creating a web-based application to help instructors at Tuts+ create their course paperwork in Markdown more easily.

Wireframing

Before coding, it is a good practice to get an idea of the application layout and how you want it to work. This application creates a properly formatted Markdown document for placing a video course into the Envato CMS. Therefore, it will mostly consist of input fields.

I used Affinity Designer to create a wireframe of the application. Here is the main Properties tab. This is the main information needed to create the CMS entry for the course.

Course Properties Form
Course Properties Form

Selecting the Lessons tab shows this form. This is where the instructor can input the chapter headings, lesson titles, lesson descriptions, and lesson links. The numbering will be automatically calculated by the program. This tutorial only shows enough demo items in order to see the layout.

Course Lessons Form
Course Lessons Form

The Export tab has a single element: a button to export the course to a Markdown document.

Course Export Form
Course Export Form

Getting Started With Webknife

To download the library, go to the website for Webknife and download the latest version. While writing this tutorial, the latest version is 1.4.0. Unzip the file in your working directory.

Webknife is a group of style sheets and some JavaScript files that make creating HTML sites fast and easy. Therefore, I will walk through the creation of the HTML first, show its outcome, and then add just enough CSS to make it look the way I want it. The Webknife toolkit does most of the work.

The top of the HTML will be the header that loads the style sheets and sets the title. Create the file index.html and add the following:

That is the beginning of the HTML file for the project. Everything else goes on between the <div id="main"></div> tags.

Tabs

The first part is the tabs. They will have icons and some text describing what that tab does. Place this piece of code in the main div:

The unordered list has a class of w-tab. This Webknife class formats the list items to be tabs. The first list item has the class of w-active. Webknife uses this to change the color of the tab to be the active colorization. All the rest do not, so they will be inactive.

Each list item has an anchor with an onclick function. These functions I will create to support switching of content panel contents.

Inside the anchor tabs, there are two spans. The first span has a class of w-icon. All spans with this class have a data-name selector with the name of the icon to insert inside that span. The Properties span has the data-name="clipboard". The Lessons span has the data-name="compose". The Export span has the data-name="share". Webknife has 77 svg icons to choose from. Refer to the HTML Reference Guide for more details.

Messages

After the Tabs Panel, place this code:

This section begins with a div that contains all of the panel contents for all three tabs. This div also contains two message areas: one for save completion and another for error messages.

WebKnife Messages - with my added formatting
Webknife Messages—with my added formatting

Webknife has the CSS style large for making the icon larger and the CSS style coloured to color it red. In both messages, I am using the data-name:"alert_circled" for a rounded triangle with an exclamation mark icon. Each message has the Webknife class w-message to have the message styling. The saved message uses w-information, and the error message uses w-error.

In the source files for this tutorial, I have these lines commented out. I will use JavaScript to inject this code into the DOM as needed.

Properties Panel

For the Properties Panel, add this code:

The Properties Panel div contains two classes: w-form and w-active. w-form defines the styling for a form and w-active designates it as being actively displayed. Since the application should start on this panel, it is set from the beginning.

Inside this div, there are divs with the class w-form-group. This class keeps everything inside it on one line. Each of these divs contains a label and an input or a textarea. Each input has a unique identifier to get the information easily from JavaScript. There is a w-form-group dev for each of the inputs on this panel.

Lessons Panel

After the div for the Properties Panel, place this code:

The structure of the Lessons Panel is the same for the Properties Panel. The labels indicate different section numbers and lesson numbers. The inputs are text inputs for the headings and titles, and are textareas for the descriptions.

Each header, lesson title, and link has a span element with the data-name of close_circled. This places a circle with an ‘x’ in the middle for deleting those items.

Each link input has a span element with the data-name of earth. This places an icon that looks like a globe.

All of the buttons have the Webknife classes w-small and w-colored. The addButton class is for adding specific styling in the CSS file.

The ids are not the final ones, but the JavaScript code will create them as needed. These just show the basic format.

Exporting Panel and JavaScript Importing

After the div for the Lessons Panel, place this code:

The Export Panel has a simple button. The Webknife classes of w-large and w-colored make the button larger and a darker blue.

After the closing divs for the panels, the three script tags load JavaScript files from Webknife and my JavaScript file. My JavaScript file contains the functions needed to switch the tabs and display the date picker, and the modal dialog for adding a link.

JavaScript Code

In the file js/basic.js, add this code:

The first function is an onload function. It will execute when the page load finishes. This function sets up the svg icon injector with the Webknife framework. After that, it sets up the date picker, also from Webknife, for the due date of the course.

The global variables and the three functions following perform the tab switching. I use the variables to keep the jQuery wrapper for the different tab elements and panels. That way, they aren’t created each time the functions are run.

The last function is for popping up the modal dialog on the Add Links button. When the user clicks the button, the following dialogue gets displayed:

Model Dialog for Adding Links - with my formating
Modal Dialog for Adding Links—with my formatting

More code needs to be written to get the application fully functional, but this is enough for this tutorial.

Custom CSS

Before adding the custom CSS, the application looks like this:

Application with Default WebKnife Styling
Application with Default Webknife Styling

This doesn’t look too bad, except that all the panels show at once and the background colors are not what I wanted. But this is easy to fix. In the file css/basic.css, place this code:

This is all the CSS needed to get the look that I wanted. Most of it is getting the icons in the proper location, properly hiding the panels that are not visible with the tab selection, and setting the background colors.

With the CSS in place, the Properties tab looks like this:

Properties Tab
Properties Tab

The Lessons tab looks like this:

Lessons Tab
Lessons Tab

And, the Exports tab looks like this:

Exports Tab
Exports Tab

They are not exactly like the wireframe, but I like the way this looks.

Conclusion

In this tutorial, I walked you through the creation of a basic web application for creating course sheets in Markdown for Envato. This project just shows the front-end graphics, but demonstrates how to use Webknife to quickly create the look and feel of your web application or web site. There are many more elements to use than I was able to make use of in this project. It’s up to you to experiment now. So, go create something new in Webknife.

Tags:

Comments

Related Articles