Introduction

JustWF is a set of HTML5, CSS, and jQuery (javascript) files, layouts, and elements designed to help developers to gain the upper hand in the web projects

The goal of the project is to provide a basic set of components and helper methods that developers can use to build sites that are fast and user-friendly.

JustWF is a modern framework and has a lot of advantages. It differences itself from other CSS/JS frameworks by focusing on the following features:

• small and fast
• easy to learn, and easy to use
• uses standard CSS3 and HTML5, jQuery and JavaScript library
• speeds up and simplifies web development
• provides CSS equality for all browsers. Chrome, Firefox, IE, Safari, and more
• provides CSS equality for all devices. PC, laptop, tablet, and mobile
• small payload size
• it is free to use. No license is necessary

Instructions

1. Download JustWF
2. Include jQuery and HTML
3. Copy Elements into your HTML document
4. Wrap everything into class .wrapper
5. Now you can build rows by simply adding class .row to parent element
6. It's time to add columns: JustWF is based on 12 columns structure and 5 break points
7. Columns name:
   • desktop: 1169px(dt-1 To dt-12)
   • max-width: 1169px(tl-1 To tl-12)
   • max-width: 1023px (tp-1 To tp-12)
   • max-width: 767px(ml-1 To ml-12)
   • max-width: 667px(mp-1 To mp-12)
8. We also have support classes to indent the content, such as:
   • indent-dt-1 To indent-dt-12
   • indent-tl-1 To indent-tl-12
   • indent-tp-1 To indent-tp-12
   • indent-ml-1 To indent-ml-12
   • indent-mp-1 To indent-mp-12

Code

<link rel="stylesheet" href="css/justWF.css" " /> <!-- JustWF -->

If you want to use icons with JustWF, don't forget to include Font Awesome:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="scripts/main.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js" type="text/javascript"></script>

1. Download JustWF
2. Include jQuery and HTML
3. Copy Elements into your HTML document
4. Wrap everything into class .wrapper
5. Now you can build rows by simply adding class .row to parent element
6. It's time to add columns: JustWF is based on 12 columns structure and 5 break points
7. Columns name:
   • desktop: 1169px(dt-1 To dt-12)
   • max-width: 1169px(tl-1 To tl-12)
   • max-width: 1023px (tp-1 To tp-12)
   • max-width: 767px(ml-1 To ml-12)
   • max-width: 667px(mp-1 To mp-12)
8. We also have support classes to indent the content, such as:
   • indent-dt-1 To indent-dt-12
   • indent-tl-1 To indent-tl-12
   • indent-tp-1 To indent-tp-12
   • indent-ml-1 To indent-ml-12
   • indent-mp-1 To indent-mp-12

We included a HTML “reset” library that standardizes all HTML tags across the browsers. It targets only the styles that need normalizing. It provides better cross-browser consistency in the default styling of HTML elements. It’s a modern, HTML5-ready, alternative to the traditional CSS reset.

JustWF framework includes classes that define a grid system. The grid helps you layout your page in an ordered, easy fashion. Our Grid is based on 12 columns structure and 5 break points including one for mobile portrait, mobile landscape, tablet portrait, tablet landscape and desktop. No matter the size of the browser, each of these columns will always have an equal width.

The classes used in JustWf grid use a very simple naming convention.

Grid

Wrapper

The wrapper class retains all of the content within it. The width is 1280 pixels.

Row

A row is used to help separate your content within columns.

Rows are very useful when you need to nest columns within one another. The row will deduct the padding so every column will line up nicely.

Columns help to divide your content into multiple variations. You can set your column width by entering a value where the # is.

If for example you are using a 12 column grid, then .dt-12 would be 100% within the .wrapper. .dt-6 would be 50% and .dt-3 would be 25%.

1. .dt-# stands for desktop
2. .tl-# stands for tablet landscape
3. .tp-# stands for tablet portrait
4. .ml-# stands for mobile landscape
5. .mp-# stands for mobile portrait

You can set various combinations depending on the device your project is viewed on. For instance if you would like your grid to show four columns on desktop but then two on a tablet landscape, then you could use the following.

Typography

Tables

Tables are a nice way to organize a lot of data. JustWF provide a few utility classes to help you style your table as easily as possible.

Forms

Forms are the standard way to receive user inputted data. JustWF defines styling for all form elements including text boxes, drop down lists, text areas, radio buttons, check boxes, fieldsets and labels. JustWF form fields have unique styling applied to them such as width, height, padding, shadows, and corner radius.

Website Design Request

Fill out the form to request a design

Media

Images

Responsive Images

To make images resize responsively to page width, you can add the class imageResponsive to your image tag.

Circle Images

To shape the image to a circle, you can add imgCircle class to your image tag.

Rounded Corner

To make images resize responsively to page width, you can add the class imgRounded to your image tag.

Thumbnail

To make images resize responsively to page width, you can add the class imgThumbnail to your image tag.

Javascript

Gallery

Click an image for larger version

Accordion

Progress Registration Bar