CSS for JQuery Plugins

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

If you wanted to change the layout of JQuery plugins according to your design, then you have to learn from where to search JQuery Plugins first

Enter in JQuery world / Search for the most suitable plugins
Open the JQuery official website from http://jquery.com/ then click on plugins section from where you can search the appropriate plugin. The direct link for JQuery plugins is http://plugins.jquery.com/. Here you can find thousands of attractive plugins.

Explore and Preview the plugins in action

1. For instance we are searching for menu plugin. Enter in menu category or search menu from search box. You will find the list of JQuery menus.
2. Open differnet menus in new windows, Click on "Try out demonstration".
3. Here you will find the "Demonstration page", You can check the plugins output

Download the Plugin and Understand the existing folder structure

1. Follow the "Download Example" page to download the source code (in zip format normally)
   
2. Folder structure of the source code varies. But the common used folder structure of JQuery plugins is as follows

• "index.html" / "demo.html" file
• "css" folder includes the css of that particular plugin
• "images" folder includes all the images used by the plugin and referent from HTML and/or CSS files
  
• "include" / "js" folder this folder contains all javascripts used by that particular plugin, NOTE: Move Jquery.js (main file 1.1 - 1.3.2) if you are using multiple JQuery plugins from every plugins folder to some other location and refer all plugins to that file.

Embed the Plugin's Source code in your website

1. Now copy the plugin folder to your root folder
   
2. Considerable changes are < head > section for metadata reference locations
3. < script > section (embeded) if any
4. and < div > section (finally)

CSS - !important rules

Cascading Style Sheets cascade. This means that the styles are applied in order as they are read by the browser. The first style is applied and then the second and so on. What this means is that if a style appears at the top of a style sheet and then is changed lower down in the document, the second instance of that style will be the one applied, not the first. For example, in the following style sheet, the paragraph text will be black, even though the first style property applied is red:

• p { color: #ff0000; }
• p { color: #000000; }

The !important rule is a way to make your CSS cascade but also have the rules you feel are most crucial always be applied. A rule that has the !important property will always be applied no matter where that rule appears in the CSS document. So if you wanted to make sure that a property always applied, you would add the !important property to the tag. So, to make the paragraph text always red, in the above example, you would write:

• p { color: #ff0000 !important; }
• p { color: #000000; }

NOTE: Do not use too many !important rules in your CSS this will cause unexpected issues in yuor HTML output. For instance If you had applied !important rule in

tag with color red and than you are assigning some container's

color green with !important rule applying in it and in the end of CSS again you are applying CSS rule to P tag with color black. What do you expect from browsers for exact output? OR How User agents will able to know what do you wanted to do?

CSS - The three Bigs

In Meta Data Section of HTML portion, where you include external referral code for styling or adding user behavior to the website, You can use CSS code in following three ways which is called the three bigs CSS documents.

1. Inline CSS / Inline Styles
2. Embedded CSS / Embedded Styles
3. External CSS / External Styles

1) Inline CSS / Inline Styles
Inline styles are styles that are written directly in the tag on the document. Inline styles affect only the tag they are applied to


2) Embedded CSS / Embedded Styles
Embedded styles are styles that are written in a similar document within style tag under head tag Embedded styles affect only the page / document where they are applied to


3) External CSS / External Styles
External styles are styles that are written in a separate document and then attached to various Web documents. External style sheets can affect any document they are attached to

link vs @import

Conclusion: Always use LINK instead of @import if you want stylesheets to download in parallel resulting in a faster page.

LINK vs. @import

There are two ways to include a stylesheet in your web page. You can use the LINK tag:

< rel="'stylesheet" href="’style.css’">

Or you can use the @import rule:

<>

@import url('style.css');

< /style >

I prefer using LINK for simplicity—you have to remember to put @import at the top of the style block or else it won’t work. It turns out that avoiding @import is better for performance, too.

@import @import

I’m going to walk through the different ways LINK and @import can be used. In these examples, there are two stylesheets: style.css and type.css. Each stylesheet is configured to take two seconds to download to make it easier to see the performance impact. The first example uses @import to pull in these two stylesheets. In this example, called @import @import, the HTML document contains the following style block:

<>
@import url('style.css')

@import url('type.css');

< /style >

If you always use @import in this way, there are no performance problems, although we’ll see below it could result in JavaScript errors due to race conditions. The two stylesheets are downloaded in parallel, as shown in Figure 1. (The first tiny request is the HTML document.) The problems arise when @import is embedded in other stylesheets or is used in combination with LINK.

Figure 1. always using @import is okay

LINK @import

The LINK @import example uses LINK for style.css, and @import for type.css:

<> rel="stylesheet' type="text/css" href="style.css">

<>

@import url('type.css');

< /style >

In IE (tested on 6, 7, and 8), this causes the stylesheets to be downloaded sequentially, as shown in Figure 2. Downloading resources in parallel is key to a faster page. As shown here, this behavior in IE causes the page to take a longer time to finish.

Figure 2. link mixed with @import breaks parallel downloads in IE

LINK with @import

In the LINK with @import example, style.css is inserted using LINK, and style.css has an @import rule to pull in type.css:

in the HTML document:

< rel="'stylesheet'" type="'text/css'" href="'style.css'">

in style.css:

@import url('type.css');

This pattern also prevents the scripts from loading in parallel, but this time it happens on all browsers. When we stop and think about it, we shouldn’t be too surprised. The browser has to download style.css and parse it. At that point, the browser sees the @import rule and starts to fetch type.css.

Figure 3. using @import from within a LINKed stylesheet breaks parallel downloads in all browsers

LINK blocks @import

A slight variation on the previous example with surprising results in IE: LINK is used for style.css and for a new stylesheet called proxy.css. proxy.css is configured to return immediately; it contains an @import rule for type.css.

in the HTML document:

< rel="stylesheet” type=" href="style.css">

< rel="stylesheet" type="text/css" href="proxy.css">

in proxy.css:

@import url('type.css');

The results of this example in IE, LINK blocks @import, are shown in Figure 4. The first request is the HTML document. The second request is style.css (two seconds). The third (tiny) request is proxy.css. The fourth request is type.css (two seconds). Surprisingly, IE won’t start downloading type.css until style.css finishes. In all other browsers, this blocking issue doesn’t occur, resulting in a faster page as shown in Figure 5.

Figure 4. LINK blocks @import embedded in other stylesheets in IE

Figure 5. LINK doesn't block @import embedded stylesheets in browsers other than IE

many @imports

The many @imports example shows that using @import in IE causes resources to be downloaded in a different order than specified. This example has six stylesheets (each takes two seconds to download) followed by a script (a four second download).

<>

@import url('style.css');

@import url('type.css');

@import url('c.css');

@import url('d.css');

@import url('e.css');

@import url('f.css');

< /style >

< src="'one.js'" type="'text/javascript'">< /script >

Looking at Figure 6, the longest bar is the four second script. Even though it was listed last, it gets downloaded first in IE. If the script contains code that depends on the styles applied from the stylesheets (a la getElementsByClassName, etc.), then unexpected results may occur because the script is loaded before the stylesheets, despite the developer listing it last.

Figure 6. @import causes resources to be downloaded out-of-order in IE

LINK LINK

It’s simpler and safer to use LINK to pull in stylesheets:

< rel="'stylesheet'" type="'text/css'" href="'style.css'">

< rel="'stylesheet'" type="'text/css'" href="'type.css'">

Using LINK ensures that stylesheets will be downloaded in parallel across all browsers. The LINK LINK example demonstrates this, as shown in Figure 7. Using LINK also guarantees resources are downloaded in the order specified by the developer.

Figure 7. using link ensures parallel downloads across all browsers

These issues need to be addressed in IE. It’s especially bad that resources can end up getting downloaded in a different order. All browsers should implement a small lookahead when downloading stylesheets to extract any @import rules and start those downloads immediately. Until browsers make these changes, I recommend avoiding @import and instead using LINK for inserting stylesheets.