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
55 views

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

Example

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

rework('body { font-size: 12px; }', { source: 'source.css' })
  .use(pluginA)
  .use(pluginB)
  .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)

https://github.com/olton/Metro-UI-CSS/archive/master.zip

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>
<html>
    <head>
        <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>
    </head>
    <body class="metro">
        ... markup page ...
    </body>
</html>

Simple Video Demo for HTML Template for Metro UI

https://www.youtube.com/watch?v=hYe4uk5q8hs

READ MORE
Contact Us
+91 9880187415
sales@queryhome.net
support@queryhome.net
#470/147, 3rd Floor, 5th Main,
HSR Layout Sector 7,
Bangalore - 560102,
Karnataka INDIA.
QUERY HOME
...