Code Monkey home page Code Monkey logo

wdntemplates's Introduction

UNL WDN Templates

The template files are developed and maintained by the Web Developer Network (WDN) at the University of Nebraska-Lincoln. These templates are made up of HTML, CSS and JavaScript to power the underlying web presence.

Template Usage

Template usage is subject to the WDN Terms of Use.

Templates Available

All templates variations utilize the same HTML markup, with an exception of the body class, ex: class="document".

Collaboration

All members of the WDN are invited to contribute to this project. Please make a fork of the main repository for local development. Once you have created and tested your code, please send a pull request to the main repository.

Building Template Resources

Much of the template CSS and JavaScript is built using aggregators, preprocessors, and/or "minifiers". You can build a local copy of these resources with the following instructions as your guide.

The resources are built using a Gruntfile. The following tools are required to be installed.

  • Git -- version control system
  • NodeJS -- used to run the libraries that process and minimize LESS and JavaScript files
  • Grunt -- The Grunt CLI must be installed ( npm install -g grunt-cli ) in order to build.

Installing the additional resources necessary to build the system can be downloaded by running npm install from the project root.

Once all of the above dependencies are met, simply running Grunt grunt at the project root will build all resources. The following are all of the supported targets.

  • default or all - builds all needed CSS and JavaScript
  • clean - removes all built files
  • js-main - builds and minifies combined JavaScript
  • css-main - builds all CSS files from their SCSS partials and passed through postcss
  • dist - builds the ZIP's used for template distribution. Also does smudging of keywords such as $DEP_VERSION$ in dwt and include files

The JavaScript build process can be further customized by passing parameters. The following are the flags that are supported.

EXAMPLE: Build for use in a special CDN or server location grunt --rjs-flags="wdnTemplatePath=//www.unl.edu/"

EXAMPLE: Customize the UNLchat url. Could be useful for integrating a custom instance of UNLchat or for development grunt --rjs-flags="unlChatURl=//ucommchat-test.unl.edu/assests/js"

EXAMPLE: Build for use in debug mode for analytics grunt --rjs-flags="debug_mode=true"

EXAMPLE: Customize the Analytics Measurement ID grunt --rjs-flags="wdnProp=G-9DM5F2WV3Y"

EXAMPLE: Two or more parameters are separated with a space grunt --rjs-flags="wdnTemplatePath=//www.unl.edu/ unlChatURl=//ucommchat-test.unl.edu/assests/js"

PLEASE NOTE: The build process has been optimized for a Linux or OS X environment. While it is technically possible to build on Windows, the specifics of setting up your environment correctly are beyond the scope of this project.

Further support

Support of the UNL Templates is coordinated and communicated through the WDN.

5.3 Development Documentation for Developers

Folder Structure

Directories

templates_5.3/js-src/

  • contains JavaScript source files.
  • All files in this folder will be first copied to the templates_5.3/js folder (through the Grunt sync:js task) before require.js works on them
  • *.babel.js files will be transpiled and outputted to /js/*.js

templates_5.3/js-src/plugins/

  • Place vendor libraries here

templates_5.3/js-src/utility-scripts/

  • Place script files here that are not require.js modules or widgets but are standalone files for transpile and minification purposes

templates_5.3/js/

  • Contain files and folders to be worked and bundled by require.js. Files from DCF are also pulled into this folder when the Grunt task js-main is ran

templates_5.3/js/compressed/

  • Production-ready JS files, containing the require.js entry file all.js

templates_5.3/scss/*

  • place theme SASS partials in this folder.
  • main SASS files include glob patterns that will pull in DCF SASS partials for compilation
  • tmp.scss files can be used to import styles into other projects. The most likely use case will be to use pre.tmp.scss to import framework variables, mixins and functions.

scripts/

  • contains bash scripts for deployment and distribution

Files

.gitattributes

  • path to files that contain keywords such as $id$ and $DEP_VERSION$ that needs to be replaced with git commit information by the filter-clean and filter-smudge Grunt tasks.
  • Paths in this file must match the filterFiles variable inside of Gruntfile.js

.git_filters/lib/git-filters.js

  • contain git filter clean and smudging methods that is imported into Gruntfile.js as gitFilters variable. Methods are used in the filter-clean and filter-smudge Grunt tasks.

Critical CSS

The script to remove inline critical styles once the core stylesheets have been loaded can be found in js-src/utility-scripts/clearCriticalCSS.js. If changes needs to be made to the script, grab the minified and transpiled version from js/compressed/utility-scripts and replace the one inside of head-2.html include file.

wdntemplates's People

Contributors

acoleman avatar cbourke avatar cbwiedel avatar cmdprompt avatar dependabot[bot] avatar ericras avatar github-actions[bot] avatar jsturek avatar jthiltges avatar kabel avatar kgirl avatar macburgee1 avatar mfairchild365 avatar mfkp avatar natehilker avatar nbarry10 avatar petervnguyen99 avatar prefork avatar rklus16 avatar saltybeagle avatar shaderpixel avatar skoolbus39 avatar smeranda avatar spennythug avatar svmjuhl avatar tlemburg avatar tommyneu avatar tsteiner avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

wdntemplates's Issues

TEMPLATE - Liquid

This is the liquid width template

Originally submitted by: Brett Bieber

Add Jquery Library

Adding Jquery Library to Template Dependents

Originally submitted by: Krista Naber

CSS for wrapper

CSS for the wrapper which holds everything

Originally submitted by: Brett Bieber

IMG for header

images for header

Originally submitted by: Brett Bieber

CSS for header

CSS for header - meta item containing CSS for campus icon/UNL, search box,
icons, secure/logged in user etc.

Originally submitted by: Brett Bieber

TEMPLATE - Fixed

This is applying modifications to the liquid width template to achieve a fixed
width implementation.

Originally submitted by: Brett Bieber

IMG for wrapper

sliced images for wrapper

Originally submitted by: Brett Bieber

HTML for content

We need pre-populated content areas for testing:

Navigation UL
Breadcrumbs UL
Title
Main content
Optional footer
Footer

Originally submitted by: Brett Bieber

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.