uta-prototype

This project is a front-end prototype of the UTA website. It gives developers a collection of re-usable HTML, JavaScript, and SCSS partials for building applications.

Usage no npm install needed!

<script type="module">
  import utaPrototype from 'https://cdn.skypack.dev/uta-prototype';
</script>

README

UT-Arlington

This project is a front-end prototype of the UTA website. It gives developers a collection of re-usable HTML, JavaScript, and SCSS partials for building applications.

Requirements

To run this site, you will need the following installed:

Installation

Run the following command using NPM:

npm install

This will install all dependencies needed to run the project.

Architecture

This project utilizes a few frameworks for ease of building.

  • Gulp is used as the task runner to build, lint, and run the site.
  • Bootstrap v4.1.3 as the CSS styling and grid framework.
  • Sass is used as the CSS precompiler.
  • ECMAScript 6 as the JavaScript module system. It does not use jQuery.
  • Prettier as the opinionated code formatter. Settings can be viewed in the .prettier file.

In addition, Gulp File Inlcude is used to passed context into partials and loop over JSON data files.

Development Ideaology

Sass

Bootstrap variable and mixins should be utilized whenever possible for styling. Variables can be overwritten in the ~UI/_ui/Assets/scss/vendor/bootstrap/_vars.scss file.

Components should be created in the ~UI/_ui/Assets/scss/components directory. They should then be added to the ~UI/_ui/Assets/scss/uta-style.scss file as an @import.

JavaScript

All written code should follow the Airbnb Javascript Style Guide.

Components should be created in the ~UI/_ui/Assets/js/components directory. They should then be imported within the ~UI/_ui/Assets/js/components.js file.

Nomenclature

Each Javascript and Sass file should follow these naming conventions.

  1. Spaces are replaces by hyphens.
  2. File names should be all lowercase.

Development

Run the following command using NPM to run a development version of the site:

npm run dev

This will provide a development environment located at http://localhost:3000/. It provides automatic linting of Sass files and JavaScript files.

Production

Run the following command using NPM to build a production ready version of the site:

npm run build

After running the command all built files will be found in ~/dist.

Modularization

This respository was built with modularization in mind. As the component library for UTA, all markup, javascript and CSS should be contained in this repository. New components and updates should be created here.

It can be shared with other applications using a package manager. A Node Package Manager (NPM) feed has been created specifically for this repository.

Releases

Each new release or update should be accompanied with an increase in version number. In order to increase the version, update the package.json with a new version number.

Once the version has been updated and commited to the repository, it will need to be published to the feed. Run the following command to package the version:

npm publish

Usage

The project feed can be imported into any application as a package via NPM. It will require the consuming application to be using NPM, and authenticate using either a .npmrc or using VSTS security settings. Full instructions can be found here.