=== WORKING WITH X.UI ===

Setup Tools

• Internet connection needed for installing.

OSX or Linux

1. install node.js
2. run npm install in root of package (pulls in grunt's dependencies)
3. run grunt dev in root of package (builds css and styleguide)

Windows

1. install node.js. restart cmd shell and verify that you can run the cmd npm
2. run windows_install.bat in root (sets up command line tools for windows)
3. run grunt dev in root of package (builds css and styleguide)

Building

Running grunt dev compiles scss files into everything.css and app.css in (dist/css). It also generates The Styleguide from annotations in the scss modules and opens the guide.

Output

• (dist/css/everything.css) is all x.ui styles and 3rd party styles and components.
• (dist/css/app.css) is the optimized/customized stylesheet compiled from (scss/app.scss).
• (dist/docs/index.html) is the home page of The Styleguide.
• (dist/docs/images/, dist/docs/fonts/) assets needed to render XUI correctly.

Distributing X.UI

Run grunt package to build (dist/x.ui.zip). This package can be distributed for use and customization by consumers. This also builds (dist/x.ui.src.zip) which contains all scss source code and build scripts.

TODO: Uploading Dist Files to CDN

Adding new Grunt Plugins

Run npm install {package_name} --save-dev (adds dependency to package.json)

TODO: Updating the x.ui Base Styles

If you have included the x.ui framework in your application, you can update the base styles any time to sync with the designers' latest changes. Just run grunt update_base_styles to do that thing!

File Structure

./example test pages ./dist build output └── /css css files built by Grunt ├── app.css **include this to get just the styles you choose (in app.scss) ├── everything.css include this to get ALL OF THE STYLEZZZZ ./scss ├── _configuration.scss constants such as colors, sizes, etc... ├── _foundation_overrides.scss Foundation library overrides ├── app.scss Builds customizable / optimizable stylesheet ├── everything.scss BUILDS ALL OF THE STYLEZZZZ └── x-styles Our X.UI styles ├── _buttons.scss ├── _layout.scss └── etc...