top button
Flag Notify
    Connect to us
      Facebook Login
      Site Registration Why to Join

    Get Free Article Updates

Facebook Login
Site Registration
Print Preview

Small Discussion About CSS Rework?

0 votes

What is Rework?

Rework is for the hardcore, discerning front-end engineers among us. It’s what you would use if you wanted to roll your own CSS preprocessor. Myth (discussed earlier) was developed on top of the Rework open-source project.

Maybe you don’t like the Stylus syntax, or maybe you don’t like having to provide a CSS unit argument for CSS-Crush’s custom math() function, or perhaps you dislike how Sass makes you define variables using the $ sign and you’d rather use #. Maybe you just need a few features, and don’t want to suffer through the feature-bloat of existing preprocessors.

Rework is a CSS preprocessor framework built on Node.js. It has a great set of helper plugins for stuff you might want to preprocess. So before you write your own parsing functions, you might want to take a look at them first to avoid reinventing the wheel.

NPM Command 

npm install rework


var rework = require('rework');
var pluginA = require('pluginA');
var pluginB = require('pluginB');

rework('body { font-size: 12px; }', { source: 'source.css' })
  .toString({ sourcemap: true })

Video for Rework Css

posted May 8 by Manish Tiwari

  Promote This Article
Facebook Share Button Twitter Share Button Google+ Share Button LinkedIn Share Button Multiple Social Share Button

Related Articles

What is Metro?

Metro is the name for the design language, the design philosophy, behind Windows Phone 7. This is not only in reference to the look and feel of the interface itself, but also to the animations which bring the 2D interface designs to life and the sounds that accompany user interactions on the devices.

Why Metro?

Inspired by the way-finding graphics that you find in airports, railway and bus stations the world over, Metro is a homage to those high contrast, high color visualizations that stand out in those visually noisy environments.

In Windows Phone 7, Microsoft introduced its Metro style user interface. The Metro style UI is the touch-and-tile interface that Microsoft designed to create an interface focused on content, information, and movement.

It's quicker to find things in the start screen than the start menu.

It is designed to embrace 5 principles:

1)Clean light, fast, open aesthetics;
2)Dynamic, moving transitions and interactions;
3)Embrace the beauty of typography;
4)Content-focused interface;
5)Authentically digital design.

What is Metro UI CSS

Metro UI CSS a set of styles to create a site with an interface similar to Windows 8.
It can be used to create Metro User Interface

Download the Metro Ui Libraries from Official Website
Official Site for Metro UI CSS

OR (Use the following link to download)

Steps for Using Metro UI CSS

1)Create page with HTML5 DOCTYPE
2)Include metro-bootstrap.css
3)Include metro.min.js (jquery.js required)
4)Create main container with class .metro
5)Use markup, as described in the pages of this site

Example Code For Using Metro UI CSS

<!DOCTYPE html>
        <link rel="stylesheet" href="css/metro-bootstrap.css">
        <script src="js/jquery/jquery.min.js"></script>
        <script src="js/jquery/jquery.widget.min.js"></script>
        <script src="js/metro/metro.min.js"></script>
    <body class="metro">
        ... markup page ...

Simple Video Demo for HTML Template for Metro UI


Selectors refer to the HTML element with the styles you want to apply to them. CSS provides four different types of selectors. These are:

1) Type selector.

2) Class selector.

3) ID selector.

4) Universal selectors.

1) Type selectors: The type selector simply specifies the element name along with the style to be applied to that element.

2) Class Selector:  A class selector matches elements, whose class attributes is set in an HTML page and applies styles to the content of all those elements. For example, if there are SPAN and DIV elements in a web page with their class attributes, the style specified for the class selector will be applied to both the elements.

A class selector is the value of the class attribute preceded by a period (.) and followed by property declarations.

3) ID Selector: An selector matches an element whose id attributes is set in an HTML page and applies styles to the content of that element. The ID selector specifies styles for an element whose id attribute is set to a unique value.

An ID selector starts with the hash symbol (#) followed by the id attribute’s value and the declaration block.

4) Universal Selector: The universal selector represents all the elements within the HTML page. It matches all the elements in the HTML file. This means that it applies the specified applies styles to the content of all the elements. For example, to specify the color of all the content as red, you would specify a universal selector followed by the property declarations.

The asterisk (*) symbol specifies a universal selector within the CSS file.

For more go through this video:



Introduction to Cascading Style Sheets

A Cascading Style Sheet (CSS) is a rule-based language, which specifies the formatting instructions for the content specified in an HTML page. It purpose is to separate HTML content from its formatting so that web page designers would not worry about the formatting and layout. This is because they can define the layout and formatting of the content in a separate file saved as .css. In the .css file, the formatting instructions for an element are referred to as a rule set. CSS was invented in 1997.

Need of Style Sheets

A style sheet is a collection of rules that specifies the appearance of data in an HTML document. HTML is a markup language that focuses only on the layout of the content on a web page. For example, if you want to change the text in the H2 element to bold, this has to be done manually for all the H2 elements. Such a manual task might result into human errors such as missing an occurrence of the H2 element for applying the bold format. This result in format inconsistency among the H2 elements with an HTML page.

Benefits of css
Code Reusability: CSS saves time by specifying the formatting options of an element only once and applying to multiple HTML pages.

Less HTML Code: CSS helps in reducing the file size of HTML documents by specifying the formatting instructions in another file.

Device Independence: CSS is designed for different devices to provide the same look and feel of the HTML page across them.


Working of CSS

You can embed the CSS code within the HTML code or link the HTML file to the CSS file. The browser will locate the style sheet irrespective of its location and will apply it to the HTML page. There are certain steps involved in applying a style sheet to an HTML page. These steps are:

1. The user requests for a web page from the browser using the URL.

2. The server responds with the HTML file and related files such as image files, audio files, and external .css files, if any.

3. The browser executes the CSS code using the rendering engine and applies the styles to the HTML file.

4. Then web page is then displayed in the browser.

The rendering engine is software that applies the formatting instructions to the web page and displays the formatted content on the screen.

CSS Syntax

The general syntax of css consists of three parts namely, selector, property, and value. A selector is an HTML element for which you want to specify the style or the formatting instruction. A property is a css property that specifies the type of the style to be applied to the selector. CSS allows controlling the appearance of the content by providing various properties. These properties include text properties,, positioning properties, font properties, color properties, and so on. A value refers to the value of the CSS property. A CSS property can have multiple values. For example, the values of the color property include red, green, yellow, and so on.

The property and its value of a selector are separated with a colon (:). They are enclosed within the curly brackets ({}) that is known as the declaration block.

Multiple Properties and Selectors

You can various combinations for rules for HTML elements. First, you can specify multiple property-value pairs for a selector, which are separated by a semicolon (;) within the declaration block. Second, you can specify multiple selectors for a single property by grouping the selectors. To group the selectors, the selectors are separated by commas followed by a declaration block of properties and values. Third, you can specify properties for multiple selectors. Here, the comma-separated selectors are followed with multiple property-value pairs.

Length Measurement Units

CSS uses various units of measurements for specifying size of the font, width and height of margins, and so on. These units measure the horizontal and vertical length of the content. CSS supports two types of measurement units namely, relative and absolute.


Relative length specifies the length units related to other length property.

 em- Specifies the font size (height) of a particular font. The em unit is relative to the value of the font-size property of the selector.

 ex-  Specifies the ‘x-height’ of a particular font. The ‘x-height’ value is approximately half the font size or the height of the lowercase letter ‘x’.

 px-  Specifies the size in pixels, which is relative to the screen of the device.




Absolute lengths are specified when the web page designer is aware of the physical properties of the output device.

 in-   Specifies the size in inches, where 1 inch= 2.54 centimeters. 

cm-  Specifies the size in centimeters.

mm- Specifies the size in millimeters.

pt-    Specifies the size in points, where 1 point= 1/72th of the inch.

pc-   Specifies the size in picas, where 1 pica= 12 points.

Types of Style Sheets

There are three types of style sheets namely, inline, internal, and external style sheets. An inline style sheet uses the style attribute within an HTML element to specify the style for HTML elements.

An internal style sheet is also included within the HTML document. However, it is defined using the STYLE element with the HEAD element. The style rules appear in a declaration block for each HTML element under the STYLE element. The type attribute of the STYLE element specified the content type, which is text/css. This means that the content under the STYLE element is CSS code. You can specify any combinations of specifying style rules. The style rules specified for an element will be applied to all the sub-elements. Internal style sheets are useful when styles are to be applied to a specific web page.

Contact Us
+91 9880187415
#470/147, 3rd Floor, 5th Main,
HSR Layout Sector 7,
Bangalore - 560102,
Karnataka INDIA.