Webknife - a web user interface framework (version 1.6.0)
Reference Guide Release Notes

Webknife is a web user interface framework for rapid design on the client side.

  • Browser reset

    Ships with normalize.css for consistent default styles across browsers.

  • Semantic layout

    A gridless framework that still provides support for layouts, alignment, and positioning.

  • Intuitive navigation

    Structure your site with built-in tabs, breadcrumbs, and pagination.

  • Beautiful forms

    Consistent inputs, buttons, and forms. Includes a datepicker, CAPTCHA, and multiselect.

  • Flexible tables

    Fixed or flexible width tables, with word-wrap, zebra shading, and icon cells included.

  • Stylable SVG icons

    SVG injection allows icons to be scaled and styled with CSS, without the pain of inline SVG.

  • Images

    Add borders, shadows, and corners to images. Support for image captions.

  • Modal dialogs

    Includes a jQuery plugin that adds animated modal dialog windows for dynamic interfaces.

  • Code syntax highlighting

    Use Highlight.js for code syntax highlighting, with automatic language detection.

  • Libraries included

    Ships with jQuery, and Moment.js.

  • Configurable

    Customize, configure, and minify with a sass, node and gulp asset pipeline.

  • Modern browser support

    Tested in Internet Explorer 9+, and the latest versions of Chrome, Firefox, and Safari.

Webknife provides an HTML5, CSS3 and JavaScript component library for building any modern web application.

Getting started

Webknife is server-side agnostic and will work with any backend framework. There are two ways to use Webknife in a project:

  • Pre-built (recommended for getting started)
  • Custom builds (full customization, see below)

To use pre-built Webknife:

  • Download the framework

    Download a copy of the framework, and keep the framework directory as part of your project.

  • Edit the template pages

    Edit template.html (a blank canvas for any new web pages). Copy and paste from reference.html (production-tested HTML snippets).

  • Customize and publish

    Attach other stylesheets and further customise pages. Publish your web project.

The key point is to attach the framework CSS and JavaScript files:

<link rel="stylesheet" href="framework/framework.min.css" type="text/css" />
<link rel="stylesheet" href="framework/highlight.min.css" type="text/css" />

<script src="framework/framework.min.js"></script>
<script src="framework/framework.icons.js"></script>
<script src="framework/highlight.min.js"></script>
  • framework.min.css and framework.min.js are required
  • framework.icons.js is optional (only required for using icons)
  • highlight.min.css and highlight.min.js are optional (only required for code syntax highlighting)

Warn users with unsupported browsers

Webknife supports modern browsers only. However, the framework will automatically warn users of old versions of Internet Explorer, providing a link with information on how to upgrade. Example:

Customization

Custom builds allow all parts of the framework to be customized for a project. This is entirely optional and only for advanced use. Webknife uses a JavaScript build toolchain based on node, npm, and gulp.

Install the build toolchain

The build step requires node and npm. Follow the node installation instructions for your platform. For Ubuntu, enter these commands in the terminal: 
curl -sL https://deb.nodesource.com/setup | sudo bash -
sudo apt-get install -y nodejs

Install the dependencies

Use npm to install all dependencies required for building Webknife (including gulp), into your project src directory. These dependencies are specified in src/package.json. 
cd src
npm install

Custom build

Run the gulp build script (gulpfile):

gulp

Customizing the framework

Webknife uses SASS for CSS preprocessing. Styles and JavaScript can be extended by working with the file structure described below:

  • src/ (the source directory)
    • images/svg/ (icon svg files)
    • js/ (framework and dependency JavaScript)
    • style/ (framework and dependency SASS/CSS styles)
    • gulpfile.js (the build script with gulp tasks)
    • package.json (npm package file with build dependencies)
  • framework/ (build output directory for minified framework files)
  • docs/ (this user guide)