Location of this README file: /SITE/PROJECT/dev

Front-End development files for WEB UI presentation layer

The elements residing in this directory ("UI library") were designed by Joel Hagedorn and then passed off to Andy Mardesich.

Note: all javascript and css referenced by EZID resideds in the /static directory. All UI development is run in the /dev directory. Once design changes or additions are finalized, they need to be moved to this /static directory.

Legacy /src environment

The /src directory was set up in the inital phase of the UI re-design (before Joel came aboard to help build teh UI LIbrary). It is composed strictly of SASS[1] files which are more Bootstrap[2] dependent. When Joel came aboard, the designs built here in the UI Library no longer relied on Bootstrap. But a certain portion of Bootstrap is still being used for EZID UI.

/src/_variables.scss /src/_bootstrap.scss Files in the '/src/bootstrap' directory The primary stylesheet for legacy styles are compiled by main.scss into main.css

Note: Moved everything from the /src directory and merge them here in /dev/legacy-scss, when time allows. It will make things more manageable to have all UI development components in one place.

New /dev

This /dev directory contains the static, client-side elements, completeley separate from EZID's django templates. ...all the elements used for preliminary building and testing EZID's UI front end in the "UI Library". It includes fonts and images as well as SASS, Javascript, and html mock page templates.

The primary stylesheet for this work area is compiled by main2.scss into main2.min.css. Primary Javascript file is main2.js, minified into main2.min.js. These files also need to be copied over to /static when ready to run on Django.

Legacy stylesheet compilation

EZID (development build only) includes libsass python extension module for processing SassScript.

To build CSS from SASS (.scss) files: sassc ~/apache/ezid/SITE/PROJECT/src/styles/main.scss ~/apache/ezid/SITE/PROJECT/static/stylesheets/main.css

"UI Library" stylesheet compilation

main2.css stylesheet/javascript compilation process:

Gulp is a build system, reliant on node.js, npm and ruby https://github.com/JoelCDL/gulp_template

• Running 'gulp' brings up the static "UI Library" development workspace for testing components and page layouts
• Running 'gulp build' to generate all production-ready files included in the bash script below

====================================================================== Here's a bash script for building CSS stylesheets within the legacy src environment, or for copying over files generated by gulp build in 'dev'. Eventually, files maintained in 'dev' this should be the primary resource for modifying front-end CSS & JS for EZID.

buildStyles.bash:

if [ ${1} == "src" ]; then sassc ~/SITE/PROJECT/src/styles/main.scss ~/SITE/PROJECT/static/stylesheets/main.css echo -e "ran sassc on src/styles/main.scss\n" elif [ ${1} == "dev" ]; then cp ~/SITE/PROJECT/ui_library/css/main2.min.css ~/SITE/PROJECT/static/stylesheets/ echo -e "Copied ui_library/css/main2.min.css to static/stylesheets" cp ~/SITE/PROJECT/ui_library/js/main2.min.js ~/SITE/PROJECT/static/javascripts/ echo -e "Copied ui_library/js/main2.min.js to static/javascripts\n" else echo "Usage: bash buildStyles.bash [src|dev]." echo "Please recheck the variable." exit 1 fi

exit $?

FYI: I notice this script doesn't also copy over any new fonts and images.

Footnotes

1. SASS is a scripting language that is interpreted into CSS stylesheets (http://sass-lang.com/)
2. Bootstrap: An HTML, CSS, and JS framework for developing responsive UI (http://getbootstrap.com/)