The Structure
Easy front-end framework package includes:
- blank HTML document called index.html that includes links to necessary files.
This is actually your production file, a starting point for your coding. - demo HTML document called demo.html with most of the features applied
- CSS files for both screen and print: easy.css and easyprint.css
- JavaScript file called easy.js containing all of the built-in functions mentioned in this documentation
- JavaScript file called main.js used to include JavaScript set up or/and adding custom JavaScript
- minified jQuery file called jquery.js
- empty folder called images where you can store all your images
- folder called library that contains HTML content blocks that you can use in your master template.
It also includes several preformatted layouts. - a text file containing license called license.txt.
CSS
CSS file (easy.css) is the core CSS file for this framework. In effort to organize CSS better I divided the code into several sections. Sections are separated by comments:
- HTML elements - basic definitions for HTML elements. Instead of resetting I am using setting method to apply consistent appearance for elements. You will not need to edit this, at least not for every project. Perhaps you could adjust it once to fit your needs and reuse it as is.
- common - several built-in classes used mostly for clearing, hiding or erasing margins. It also contains a class name for image replacement.
- base - basic styling for elements. This is the area that is more/less project dependant. It include basic typography settings, links and form elements appearance plus some more built-in classes for various notifications and such.
- layout - this is where master layout is defined. Unlike some frameworks Easy is not a predefined grid based framework. It allows you to quickly build your own layout or grid by adding width and margin values. That way CSS file is not bloated with uneccessary code plus you are not forced to used predefined values. On top of that Easy uses semantic class names like main, secondary etc... However, for all you grid lovers, there is simple grid system included based on percentages. Learn more in the section below.
- navigation - area where you defined masted navigation. By default it is styled
- header - area where you can define header elements.
- content - area where you define anything that appears as a content on your web page.
- footer - area where you can define footer elements.
- easy elements - area where you can define the appearance of the dynamic elements generated by Easy front-end framework such as tooltip and popup box.
Print style sheet (easyprint.css) is included and it follows the main styling principles for print media.
Working with layout and grid
As mentioned Easy is not a predefined grid based system. With each new project, the first thing you need to do is set up a master layout by defining the widths and margins of the main containers. Easy suggests the use of it's built-in semantic class names. The main containers' names are: main, secondary, tertiary and quaternary. Easy uses classes instead of IDs cause you can have 2 or more secondary divs, also you could use main and secondary combination in the footer as well. This is how the basic HTML structure code may look like:
<div id="container"> <div id="header"></div> <div class="content"> <div class="main"></div> <div class="secondary"></div> <div class="tertiary"></div> </div> <div id="footer"></div> </div>
Easy also includes simple grid system. The columns within the grid can be built in two ways:
- using a predefined, percentage based equal width column system
- creating a custom grid using provided class names
Classes for columns can be found in subsection of the easy.css file commented as grid. Main column container has a class name cols while main column element has a class name col. It is recommended to use that class name regardless of the type of grid you choose.
For the equal width column system width and left margin of the columns are defined by adding class names to the column container element. If you use default class name cols for parent element then the width will be 48% which will accomodate 2 columns. Parent class name cols3 will accomodate 3 columns, class name cols4 4 columns... It is suggested that you use mutliple class names if you have more than 2 columns: <div class="cols cols3">:
<div class="cols cols3"> <div class="col first"></div> <div class="col"></div> <div class="col"></div> </div>
Note: it is important that you use class first on the first column to delete the left margin.
JavaScript and Interactivity
Easy uses jQuery based set of functions grouped in the namespace called $.easy. As mentioned there is jQuery file included in the package as well as easy.js file. Those files should not be edited (unless you really know what you're doing).
For setting up the Easy functions you should use the main.js file. By default, all of the currently supported functions are called within the main.js. You can remove the ones you don't want to have or you can change the default parameters on the ones you want. The code within the main.js looks like this:
$(function(){
$.easy.navigation();
$.easy.tooltip();
$.easy.popup();
$.easy.external();
$.easy.rotate();
$.easy.cycle();
$.easy.forms();
$.easy.showhide();
$.easy.jump();
$.easy.tabs();
$.easy.accordion();
});
This code basically means that the functions are called with their default parameters.
How to use Easy functions?
Let's take a look at the usage for one of these functions (this applies to all other). Similar to jQuery plugins, but not exactly the same, Easy functions work with collection of DOM elements fetched by a selector and all functions have default selector defined. For example, default selector for $.easy.tooltip() function is ".tooltip". That means that function will be applied to each element in the document with class name tooltip. The selectors used here are actually the same type of selectors as you would use in CSS (and beyond). To learn more about selectors in jQuery I strongly suggest reading the documentation.
Let's say you want to change a selector on the tooltip function, instead of using .tooltip and select elements with that class name you want to apply the function to all list items in the footer #footer li.
You can change the selector in two different ways. First one (more elegant) is to simply pass a parameter to the function with your new selector:
$.easy.tooltip('#footer li');
Second way is to change default parameters using an array:
$.easy.tooltip({ 'selector':'#footer li' });
Most of the functions also have other parameters you can change to achieve a certain goal. To change more than one parameter use syntax (the same as with jQuery plugins):
$.easy.tooltip({
'selector' : '#footer li',
'xOffset' : 5,
'yOffset' : 5
});
For detailed list of functions and available parameters for each one look below.
You can use function more than once on separate element collections:
$.easy.tooltip('#footer li');
$.easy.tooltip({
'selector' : 'a img',
'content' : 'Click here to view larger image'
});
Since all of the functions return a jQuery object it is possible to chain jQuery methods, which you may find useful:
$.easy.tooltip().css('background','red');
Easy components
Easy components are blocks of code that follow a certain markup structure and functionality. Available components are:
- Accordion
- Tabs
To use components you must use the exact markup structure as shown in the downloadable demo package.
$.easy.navigation()
This function is used for drop down menus. On mouse over a list item the first child unordered list will show and on mouse out it hides. This function requires certain HTML structure in order to work properly:
<ul id="nav"> <li><a href="#">Navigation item</a> <ul> <li><a href="#">Sub-navigation item</a></li> <li><a href="#">Sub-navigation item</a></li> <li><a href="#">Sub-navigation item</a></li> </ul> </li> <li><a href="#">Navigation item</a></li> <li><a href="#">Navigation item</a></li> </ul>
Default parameters are:
| Parameter | Default value | Description |
|---|---|---|
| selector | #nav li | Selector used for targeting elements that we want to apply this function to |
| className | over | Class name used on targeted element (list item) added on mouse over and removed on mouse out. This class name is added for styling purposes only. |
$.easy.tooltip()
On mouse over a certain element this function created a tooltip object. By default it uses elements title attribute value but it can contain any text or HTML content as well as use any element from the document by it's ID. This function can be applied on any element, no specific markup required. To see this in action you can mouse over this text.
Default parameters are:
| Parameter | Default value | Description |
|---|---|---|
| selector | .tooltip | Selector used for targeting elements that we want to apply this function to |
| xOffset | 10 | Horizontal distance between cursor position to tooltip, in pixels |
| yOffset | 25 | Vertical distance between cursor position to tooltip, in pixels |
| clickRemove | false | If set to true the tooltip is removed on click |
| id | easy_tooltip | Value of the id attribute assigned to newly created tooltip |
| content | Empty by default. If you add value to this parameter, the tooltip will display it | |
| useElement | Empty by default. If you put any element's id the tooltip will display that element's content |
$.easy.popup()
All-in-one lightbox function. With default selector set to .popup all you need to do to apply this function to an anchor element is add that class name <a href="#" class="popup"> and you're good to go. Unlike other lightbox scripts, this function doesn't require any additional setup. It is a true plug and play function. The function recognize the type of content within the href attribute and displays the popup accordingly. To view it in action you can click this link to open an URL or this one to see an image.
This function also enables you to play flash files like videos from YouTube or Vimeo (or your own swf files). To enable flash display functionality it is recommended that you add another class name called flash. The code should looks like this:
<a href=" link to your flash file " class="popup flash"></a>
I am using this functionality when playing the screencasts on this site.
Another very useful feature is that you are able to display any element in a popup based on it's id by using the semantic HTML:
<a href="#loginform" class="popup"></a>
That can be used for login or feedback forms, something that you initially hide, but display in a popup.
If you want to group links into gallery, you need to add a class name called gallery. All grouped elements must have identical class names (entire class attribute must match).
<a href="/images/gallery/05.jpg" class="popup gallery"> ... </a>
Take a look at the gallery demo.
It is also possible to call this function programmatically. If you want to show any element from your DOM in a popup all you need to do is pass the selector as a parameter:
$.easy.popup('#notification');
Default parameters are:
| Parameter | Default value | Description |
|---|---|---|
| selector | .popup | Selector used for targeting elements that we want to apply this function to |
| popupId | easy_popup | Value of the id attribute assigned to newly created popup |
| preloaderText | Loading... | Text shown when image is loading |
| errorText | There has been a problem with your request, please click outside this window to close it. | A message that is displayed in case the request returns an error. |
| closeText | Close | A close button text, appearing in the top left corner |
| prevText | « Previous | Gallery navigation button, loads previous item |
| nextText | Next » | Gallery navigation button, loads next item |
| opacity | .7 | Opacity for the popup overlay element |
| hiddenClass | hidden | Class name to be used for initial hiding of the element we want to show in the popup |
| callback | function(){} | Callback function called when the popup is closed |
$.easy.external()
This is a simple script that enables you to open all external links in a new window. It sets a target attribute to _blank and adds a class name called external to the links if they are located outside of your domain. You can use this class name external to style links differently.
Default parameters are:
| Parameter | Default value | Description |
|---|---|---|
| selector | a | Selector used for targeting elements that we want to apply this function to |
$.easy.rotate()
When this function is applied on certain element it will find it's child elements and show them in rotation, one by one, using fade in and fade out effect. It can be applied on any element regardless of the structure.
By default, to apply this function simply add class name .rotate to the element and that's it. Of course, you can use your own selector as described earlier.
| Parameter | Default value | Description |
|---|---|---|
| selector | .rotate | Selector used for targeting elements that we want to apply this function to |
| pause | 5000 | Duration of display for each rotating child element in milliseconds |
| randomize | false | If set to true the child elements will rotate randomly |
$.easy.cycle()
When this function is applied on certain element it will find it's child elements and show them in rotation, one by one. It can be applied on any element regardless of the structure.
By default, to apply this function simply add class name .cycle to the element and that's it. The difference between this funciton and rotate function is that cycle uses forced absolute position of the elements which enables various transition effects.
| Parameter | Default value | Description |
|---|---|---|
| selector | .cycle | Selector used for targeting elements that we want to apply this function to |
| effect | fadeIn | Transition effect (fadeIn and slideUp available) |
| initPause | 0 | Pause in milliseconds before starting the element rotation |
| pause | 5000 | Duration of display for each rotating child element in milliseconds |
| callback | function(){} | Callback function called when the transition is completed |
$.easy.showhide()
This function enables you to show and hide (toggle appearance) elements by clicking on another. By default, if you assign class name toggle to a certain element it becomes the origin element. The function finds the next sibling element and sets it as the target element for show/hide functionallity. Origin element will become clickable and clicking it will toggle appearance of the target element.
If you add additional class name called prev then the target will be the previous sibling. You can also set any element as target by it's ID but the origin element has to be an anchor. You also have to add a class name id: <a href="#panel" class="toggle id">
| Parameter | Default value | Description |
|---|---|---|
| selector | .toggle | Selector used for targeting elements that we want to apply this function to |
$.easy.jump()
This function allow you to create a smooth animated scroll to a certain element on the page. By default it works with anchor elements with class name jump and href attribute set to jump to a certain element on the page based on its ID: <a href="#footer" class="jump">
| Parameter | Default value | Description |
|---|---|---|
| selector | a.jump | Selector used for targeting elements that we want to apply this function to |
| speed | 1000 | Duration of the scroll animation in milliseconds |
$.easy.forms()
This is a solution for form elements within your document and it's focused on form validation. By default, to validate a certain form element all you need to do is apply a class name called required to an element and function will validate it for content on form submit. With using additional class names like email, phone or url you can validate a certain format of the text input field. The function is also capable of validating checkboxes and text areas.
If validation error occurs the error message will appear in a way that the span element with class name error is dynamically added to the parent element of the form element causing the error. To set the custom error message for each field all you need to do is add a title attribute and error span will display it's value.
There is also a possibility of using form labels as a default text field values. This feature requires that your label's for attribute is used to target the form element. View demo page to see this in action.
| Parameter | Default value | Description |
|---|---|---|
| selector | a | Selector used for targeting elements that we want to apply this function to |
| err | This is required | Default error message |
| errEmail | Valid email address is required | Default error message for email text fields (class="required email") |
| errUrl | URL is required | Default error message for url text fields (class="required url") |
| errPhone | Phone number is required | Default error message for phone text fields (class="required phone") |
$.easy.accordion()
This is an accordion function where you are able to expand and collapse related elements. Although markup must be followed precisely, by using the parameters of this function you are able to modify the markup structure to fit your needs.
| Parameter | Default value | Description |
|---|---|---|
| selector | .accordion | Selector used for targeting top level element for this function. |
| parent | li | Sibling elements used for grouping clickable and expandable elements |
| source | h3 | "Clickable" elements |
| target | p | Expandable/collapsable elements |
$.easy.tabs()
Simple barebone tabs functionality. It is advised to follow the markup structure from the downloadable package.
| Parameter | Default value | Description |
|---|---|---|
| selector | .tabs | Selector used for targeting top level element for this function. |
| selectedClass | selected | Class name applied to selected tab |
HTML content blocks library
Easy front-end framework includes a library of precoded content blocks that you can simply copy/paste into your document.
