##Dell UI Components Bower Package
Installation of dell-ui-components has a few dependencies:
- AngularJS,
- jQuery
- dell-ui-bootstrap css. (included in this package)
$ bower install angular
$ bower install jquery$ bower install dell-ui-componentsAfter downloading dependencies (or referencing them from your favorite CDN) you can download this project from https://github.com/DellGDC/dell-ui-components
When you are done downloading all the dependencies and project files the only remaining part is to add dependencies on the dellUiComponents AngularJS module:
angular.module('myModule', ['dellUiComponents']);NOTE: dellUiComponents Angular module is experimental at the moment.
<html ng-app="myApp">
<head>
<script src="path-to-angular/angular.min.js"></script>
<script src="path-to-jquery/jquery.min.js"></script>
<script src="path-to-dell-ui-components/dell-ui-components/dell-ui-components.min.js"></script>
<link src="path-to-dell-ui-components/dell-ui-bootstrap/dell-ui-bootstrap.min.css" type="text/css" rel="stylesheet"/>
<link src="path-to-dell-ui-components/dell-ui-components/dell-ui-components.min.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<h1>Hello world!</h1>
<script src="myApp.js"></script>
</body>
</html>
angular.module('myApp', ['dellUiComponents']);
##Dell UI Components development environment NOTE: Not included in Bower package, must download/fork from github master branch.
Node.js environment for developing Dell's UI Components
This environment at is core uses a Yeoman generator called cg-angular to enable easy creation of demo components.
This environment follows the Angular Best Practice Guidelines for Project Structure.
Features
- Each package component has a directory with all package and demo files.
- Provides a Grunt build that produces an extremely optimized distribution of all css and js files.
-
It uses an Angular annotation library so you don't have to use the Angular injection syntax for safe minification (i.e. you dont need
$injector(['$scope','$http',....(note) While grunt-ng-annotate is the new defacto angular annotator, there are issues with it in this environment (windows) so the environment is currently using ngmin which has be deprecated but still works perfectly.
-
Custom grunt script to create a new package component and creates all files needed:
grunt component my-component -
Custom grunt script to create a new package directive and create all files needed:
grunt directive my-directive -
grunt servetask allows you to run a simple development server with watch/livereload enabled .http:localhost:9002Additionally, JSHint and the appropriate unit tests are run for the changed files.
-
- Integrates Bower for package management
- Integrates LESS and includes Dell-UI-Bootstrap via the source LESS files allowing you to reuse Bootstrap vars/mixins/etc. (TODO) Need to add dell-ui-components package when published.
The package's directory file structure is as follows:
app.less ....................... main demo-wide styles
app.js ......................... angular demo module initialization and route setup
index.html ..................... main HTML file for demo
Gruntfile.js ................... Grunt build file
/bower_components .............. 3rd party libraries managed by bower
/components .................... Component associated files to include less, html, directives and demo files
/data .......................... Contains data related to the demo application
/demo-assets.................... Images and other assets used in the demo
/dist........................... Distribution files for package
/node_modules .................. 3rd party libraries managed by npm
/templates ..................... Templates used by grunt to automatically create files.
(You need to be outside firewall for these steps to work)
Prerequisites: Node, Grunt, Yeoman, and Bower. Once Node is installed, do:
npm install -g grunt-cli yo bower
Next, install this generator:
npm install -g generator-cg-angular
To clone project (inside firewall):
git clone http://dmvmsherpa.oldev.preol.dell.com:7990/scm/duc/dell-ui-components.git
Make sure all node modules are loaded (outside firewall):
npm install
Now that the project is created, you have 5 simple Grunt commands available:
grunt serve #This will run a development server with watch & livereload enabled.
grunt test #Run local unit tests.
grunt build #Places a fully optimized (minified, concatenated, and more) in /dist
grunt component #Creates all the files needed for a new component
grunt directive #Creates all the files needed to add a directive to the package
When grunt serve is running, any changed javascript files will be linted using JSHint as well as have their appropriate unit tests executed. Only the unit tests that correspond to the changed file will be run. This allows for an efficient test driven workflow.
The best thing to do while developing is to launch two separate bash shells:
- Run
grunt serve: This will set up your watch and live reload to see changes as you make them in the files. - Use this shell to execute grunt commands above.
The new app will have a handful of pre-configured libraries included. This includes Angular, Bootstrap, Dell UI Bootstrap, AngularUI Bootstrap, AngularUI Utils, JQuery, Underscore, Underscore String, and LESS. You may of course add to or remove any of these libraries. But the work to integrate them into the app and into the build process has already been done for you.
The project will include a ready-made Grunt build that will:
- Build all the LESS files into one minified CSS file.
- Uses grunt-angular-templates to turn all your partials into Javascript.
- Uses grunt-ng-min to preprocess all Angular injectable methods and make them minification safe. Thus you don't have to use the array syntax.
- Concatenates and minifies all Javascript into one file.
- Replaces all appropriate script references in
index.htmlwith the minified CSS and JS files. - Minifies the
index.html. - Copies any extra files necessary for a distributable build (ex. node-webkit files files, etc).
The resulting build loads only a few highly compressed files and node webkit application.
The build process uses grunt-dom-munger to pull script references from the index.html. This means that your index.html is the single source of truth about what makes up your app. Adding a new library, new controller, new directive, etc does not require that you update the build file. Also the order of the scripts in your index.html will be maintained when they're concatenated.
Importantly, grunt-dom-munger uses CSS attribute selectors to manage the parsing of the script and link tags. Its very easy to exclude certain scripts or stylesheets from the concatenated files. This is often the case if you're using a CDN. This can also be used to prevent certain development scripts from being included in the final build.
-
To prevent a script or stylesheet from being included in concatenation, put a
data-concat="false"attribute on the link or script tag. This is currently applied for thelivereload.jsandless.jsscript tags. -
To prevent a script or link tag from being removed from the finalized
index.html, use adata-remove="false"attribute.
You can install a specific version with 'bower install dell-ui-components#<version>'
#1.0.0 - Initial publish of components
#1.0.1 - Upgraded to Bootstrap 3.3.1 and had minor fixes
#1.0.2 - Upgraded to Bootstrap 3.3.4 and had minor fixes
#1.0.3 - Fixed issues with broken images.
#1.0.4 - Fixed issues accordions not displaying in wells correctly. Fixed tool-tip transparent background. Fix offsets examples.
#1.0.5 - Fixed carousels slider dots disappearing in DesLib, added Content-teasers, additional colors, banners, grid example patterns. Moved progress bar and pagination demo.js to non-demo.js files. added code patch for forms.less
#1.0.6 - Updated Value Props so the content aligns left in mobile XS view, updated tool-tip hover and removed underline onconnect with dell component, made fix on show/hide toggle in XS view, updated grouped form to view in DesLib. Restructured package to remove development files from distribution.
#1.0.7 Changes to tabs and cleaned up README instructions
#1.0.8 Changes to tables, breadcrumbs, show/hide, addition of contact drawer
...