gss2css utilizes PhantomJS for rendering the existing GSS layout in various screen sizes and producing the appropriate CSS rules and media queries for those.
This plugin requires Grunt
If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:
npm install gss-to-css --save-dev
In your project's Gruntfile, add a section named
gss_to_css to the data object passed into
Base URL to use for rendering the GSS-enabled pages. Must be a URL where both the HTML files and their assets, GSS included, are available.
When working with local files the easiest option is to run the
gss_to_css task together with a local web server provided by grunt-contrib-connect.
width: 1024height: 768
A list of sizes to render the page in and generate media queries. Useful when the page is targeting a known set of display resolutions, as is often the case when building mobile web apps.
In this example we'll build some local GSS-enabled HTML files into the equivalent CSS-powered ones. GSS and other dependencies are available in the local directory structure and the HTTP server is provided via grunt-contrib-connect. The files are stored in the
In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.