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:
<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>
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.
The wrapper class retains all of the content within it. The width is 1280 pixels.
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%.
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.
<div class="dt-3 tl-6">
<h1>Getting Started with JustWF</h1>
</div>
<div class="dt-3 tl-6">
<h1>Getting Started with JustWF</h1>
</div>
<div class="dt-3 tl-6">
<h1>Getting Started with JustWF</h1>
</div>
<div class="dt-3 tl-6">
<h1>Getting Started with JustWF</h1>
</div>
The standard font JustWF uses Lato. We have included the font files with our framework.
We bundle our framework with the latest iteration of Lato Google has released. It comes with 6 different font weights you can use:
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur ut sed pariatur obcaecati veritatis quas quae doloribus, cupiditate, rerum vel dolores? Beatae quos tenetur et incidunt consequuntur nostrum, architecto consequatur!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum animi, vero in, quo fugit ratione soluta quis, pariatur unde enim sed minima culpa. Deleniti similique, ducimus incidunt temporibus quae quod.
To float an element left or right, you can add the class floatLeft or floatRight to your tag.
To fix issues related to floating child elements within a parent element, you can add the class clearfix to your tag.
To print things that aren't displayed on the screen, you can add the class noscreen to your tag.
To display text in blue color, you can add the class textBlue to your tag.
To display text in red color, you can add the class textRed to your tag.
To display text in green color, you can add the class textGreen to your tag.
To display background in green color, you can add the class bgGreen to your tag.
To display text in blue color, you can add the class bgBlue to your tag.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque itaque neque magni vitae tenetur in aliquid, quas omnis fugit. Laudantium praesentium quam, aspernatur aperiam explicabo! Sint unde id quas. Repudiandae!
Molestias provident ab culpa dolore accusantium reprehenderit porro, sit, minima sequi sapiente ad explicabo officiis. Odit sint, aut facere qui sit officiis necessitatibus quisquam aspernatur eaque eius, aperiam iste quidem.
Facere quas illum omnis totam fugiat voluptas consequatur officiis reiciendis nihil aut quasi dolore similique illo eveniet rerum, atque, quaerat harum praesentium. Neque quaerat id molestiae cupiditate, laudantium cum blanditiis?
Nesciunt odio velit quae sapiente saepe officia fugit delectus asperiores, eius temporibus expedita voluptate, placeat totam! Reprehenderit esse deserunt laboriosam, nihil architecto recusandae quas nam quo placeat, perspiciatis natus. Explicabo.
Nesciunt odio velit quae sapiente saepe officia fugit delectus asperiores, eius temporibus expedita voluptate, placeat totam! Reprehenderit esse deserunt laboriosam, nihil architecto recusandae quas nam quo placeat, perspiciatis natus. Explicabo.
Nesciunt odio velit quae sapiente saepe officia fugit delectus asperiores, eius temporibus expedita voluptate, placeat totam! Reprehenderit esse deserunt laboriosam, nihil architecto recusandae quas nam quo placeat, perspiciatis natus. Explicabo.
Voluptatum labore sapiente, expedita. Ab facere omnis sed quisquam, perferendis, delectus voluptates asperiores natus ea laudantium nemo architecto laboriosam reiciendis ipsa dignissimos. Eligendi sed, hic vitae, assumenda a dicta ullam.
<blockquote>
<abbr>
<cite>
<code>
<em>
<mark>
<del>
<strong>
<a href="">Link</a>
<address>
uppercase
lowercase
capitalize
.uppercase
.lowercase
.capitalize
A very basic definition list
<ul>
<ol>
Text aligned left:
.align-left
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit saepe accusamus, delectus accusantium temporibus ea nihil asperiores laboriosam labore facilis, ipsam est eligendi, quae odit quas blanditiis maiores, hic commodi.
Text aligned center:
.align-center
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus perferendis, suscipit illo id culpa odit recusandae eum non ad quisquam corporis, dolores fugiat nemo deserunt? Magni deserunt iste quo rem.
Text aligned right:
.align-right
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere modi qui sequi! Nesciunt repellat, minus praesentium ad corrupti aliquid quas atque, quod aut odit dolor, placeat recusandae amet natus in?
Text aligned justify style:
.align-justify
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere modi qui sequi! Nesciunt repellat, minus praesentium ad corrupti aliquid quas atque, quod aut odit dolor, placeat recusandae amet natus in?
Text aligned inherit style:
.align-inherit
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere modi qui sequi! Nesciunt repellat, minus praesentium ad corrupti aliquid quas atque, quod aut odit dolor, placeat recusandae amet natus in?
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.
Tables are borderless by default.
| Title | Title | Title |
|---|---|---|
| Table Data | Table Data | $0.89 |
| Table Data | Table Data | $0.88 |
| Table Data | Table Data | $0.87 |
| Table Data | Table Data | $0.86 |
Add class="bordered" to the table tag for a bordered table
| Title | Title | Title |
|---|---|---|
| Table Data | Table Data | $0.89 |
| Table Data | Table Data | $0.88 |
| Table Data | Table Data | $0.87 |
| Table Data | Table Data | $0.86 |
Add class="striped" to the table tag for a striped table
| Title | Title | Title |
|---|---|---|
| Table Data | Table Data | $0.89 |
| Table Data | Table Data | $0.88 |
| Table Data | Table Data | $0.87 |
| Table Data | Table Data | $0.86 |
Add class="centered" to the table tag to center align all the text in the table
| Title | Title | Title |
|---|---|---|
| Table Data | Table Data | $0.89 |
| Table Data | Table Data | $0.88 |
| Table Data | Table Data | $0.87 |
| Table Data | Table Data | $0.86 |
Add class="responsive-table" to the table tag to make the table horizontally scrollable on smaller screen widths.
| Title | Title | Title |
|---|---|---|
| Table Data | Table Data | $0.89 |
| Table Data | Table Data | $0.88 |
| Table Data | Table Data | $0.87 |
| Table Data | Table Data | $0.86 |
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.
Fill out the form to request a design
To make images resize responsively to page width, you can add the class imageResponsive to your image tag.
To shape the image to a circle, you can add imgCircle class to your image tag.
To make images resize responsively to page width, you can add the class imgRounded to your image tag.
To make images resize responsively to page width, you can add the class imgThumbnail to your image tag.
If you want to add a Gallery to your page, simply add 2 containers:
First container for small pictures we need to add id="gallery"
Next we adding links to our pictures, first we add links to large size pictures, then to small size pictures. Like this <a href="example.jpg"><img src="example.jpg" alt="image1" /></a>
The second container is for a large picture on the right side.Create an emply container <div id="bigPic"></div>
Enjoy the Gallery
If you want to add an Accordion to your page, simply add 2 containers:
First container parent will have class="accordionItem"
Here you can add an additional class .open so this tab will be open when page is loaded. Your code will look like <div class="accordionItem open">
Next, you would probably want to add tab name, just add <h2 class="accordionItemHeading">Heading</h2>
The second container is inserted in first one and looks like this<div class="accordionItemContent">
Add a content to your first tab
Add a content to your first tab
Close class="accordionItemContent" container
Open class="accordionItem open" container
You are done with your first tab. Create as many as you need.
Open Content
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, autem fugit quasi repudiandae suscipit beatae! Excepturi maxime modi totam eveniet. Veritatis dolore ad eaque fugit laborum soluta deleniti, qui magni.
Close Content
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, autem fugit quasi repudiandae suscipit beatae! Excepturi maxime modi totam eveniet. Veritatis dolore ad eaque fugit laborum soluta deleniti, qui magni.
Close Content
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, autem fugit quasi repudiandae suscipit beatae! Excepturi maxime modi totam eveniet. Veritatis dolore ad eaque fugit laborum soluta deleniti, qui magni.
To add this nice tabs on your page you would need:
Create a container with special class <div class="menu">
Inside of this container create containers for each Header, such as <div><span class="light"></span><span >Header 1</span></div> Insert as many tabs as you need.
Close the container with a class .menu
Now we begin to work on our right side. Create a <ul>list with a class <ul class="tabsAside">
Inside the <ul>create <li>Content 1 Lorem...</li> and so on for each tab in the left side.
Close </ul>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta provident ipsa quibusdam non magnam explicabo praesentium. Provident eaque expedita ea corrupti accusantium aperiam, sapiente optio, placeat ipsum ullam quasi, perspiciatis!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta provident ipsa quibusdam non magnam explicabo praesentium. Provident eaque expedita ea corrupti accusantium aperiam, sapiente optio, placeat ipsum ullam quasi, perspiciatis!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta provident ipsa quibusdam non magnam explicabo praesentium. Provident eaque expedita ea corrupti accusantium aperiam, sapiente optio, placeat ipsum ullam quasi, perspiciatis!
Create form <form id="msform">
Creating top tree <ul id="progressbar"><li class="active">Account Setup</li><li class="active">Social Profiles</li><li class="active">Personal Details</li></ul>
Creating the form #1<fieldset><h2 class="fs-title">Create your account</h2><h3 class="fs-subtitle">This is step 1</h3> Add fields that you require. and close </fieldset>
Creating the form #2<fieldset><h2 class="fs-title">Social Profiles</h2><h3 class="fs-subtitle">Your presence on the social network</h3> Add fields that you require and close </fieldset>
Creating the form #3<fieldset><h2 class="fs-title">Personal Details</h2><h3 class="fs-subtitle">We will never sell it</h3> Add fields that you require
Add the submit button <input type="button" name="previous" class="previous action-button" value="Previous" />and close
</fieldset>
Close form </form>