Table of Contents (updated 3/14/17 Pi day!)
Pattern Library is the project to redefine the grid and templates we use on the site with an emphasis on cleanly documented open source code. To do this, we are using Bootstrap v4 for our grid system, Handlebars for templates, jQuery 3.1.1 as our primary JavaScript library and Angluar V2 with Typescript for our questionnaires and forms.
Our fonts will be served via the Google Webfonts CDN. jQuery, Bootstrap and Angular will be via Cloudflare's CDN. Cloudflare has the largest number of sites, therefore we can expect a user has a high probablity to have fonts and JS cached by the time they visit our site.
Why Bootstrap? Bootstrap is so widely used and well documented, that adding features is often a copy and paste from a wide variety of opensource or built in features. These things are often on Github and vetted for any conflicts with names or scripts of the parent Bootstrap project. It only requires some moderate HTML knowledge to be highly effective.
Git client Git, it a version control system. It is best used from the command line, here is the suggested client and a proper cheat sheet to print out. You can use a GUI such as GitHub or TortoiseGit, but understanding the command line is the best practise.
NodeJS/NPM Use 6.9.x or better.
NodeJS is an event driven JavaScript engine. NPM is Node Package Manager that allows the installation of modules and plugins. At the time of this writing node -v in the command line will tell you what version you are using.
Packages.json is a simple text file that indicates dependencies for the project directory and sub-directories you are in. Typing npm install will read that file and install the indicated versions and their dependencies. This saves crucial time from individually installing each module. important note npm install gulp-sass is slightly different in that it will install that module only. -g(install globally) --save and --save-dev(package will appear in your devDependencies) mean from the documentation. There is also the npm update command that updates any versions and dependencies that may have changed. This is a very good practice to do whenever you "get latest" and have an updated packages.json or gulpfile.js.
Gulp GulpJS is a streaming build client built on NodeJS. It will perform the construction of our pages and is able to hook in to clients such as TFS or Git. We use it for page assembly, minification, CSS, image optimization and many useful things.
Bootstrap Resources
- Start Bootstrap A comprehensive list of Bootstrap and related resources maintained by Start Bootstrap.
- Bootstrap Hero the homepage from a popular resource.
- WrapBootsrap themes and examples
- CodeCanyon many free and paid snippets
- ADA/508 Compliance Plugin by the PayPal Accessibility Team
Node Package Manager
- NPMJS is a website featuring a wide variety of plugins approved by the NodeJS project. important note The NPM registry is a built-in way of installing modules. You may find a plugin such as
gulp-uglifyand to install it you will go to your directory and at the command line typenpm install --save-dev gulp-uglifyTo really understand this, please read more documentation at https://docs.npmjs.com/
Git
- Github's resources There are a lot of helpful Git and GitHub resources on the web. This is a short list of our favorites!
Angular
- Egghead.io probably one of the better resources
- Scotch.io an amazing source for many languages
- NG-BOOK2 The in-depth, complete, and up-to-date book on Angular 2. Become an Angular 2 expert today.
jQuery
- Learning Center If you're looking for explanations of the basics, workarounds for common problems, best practices, and how-tos, you're in the right place!
- Unheap A tidy Repository of jQuery Plugins & JavaScripts
- jQuery Best Practices things worth reviewing.
- More best prectices
- Daily Snippets
CSS/SASS
Slack Channels
- Install NodeJS version 6.9.4 (updated 1/17/17) or latest LTS release. NPM will be installed by default
- make sure no previous versions are on your machine. Typing
node -vat the command line will reveal your version.⚠️ Previous versions are not automatically uninstalled when you download the new version and will cause conflicts.
- make sure no previous versions are on your machine. Typing
- Git Client
- On the top of this page you can click the green "Clone or Download" button and it will force your client to prompt a download loction.
C:\Gitis the preferred location and inside there the Pattern Library folders and files will be created asC:\Git\PatternLibrary\.
- On the top of this page you can click the green "Clone or Download" button and it will force your client to prompt a download loction.
- Installing Gulp and all the required files is done from the command line in the
C:\Git\PatternLibrary\folder. You will seegulpfile.jsandpackages.json. The packages file is like a manifest and itcontains all you will need. You will type the following:npm installand when it completes after a few minutes you can typegulpand should receive a confirmation that Gulp is working.
Gulp runs from the command line. You will run it from the root C:Git\PatternLibrary\ directory where you have a gulpfile.js. We built in a default task so when you type gulp it will give you a confirmation or error. Errors tend to be missing modules or elevated permissions (EPERM) related.
To get a list of tasks in gulp, you can type gulp --tasks and please read Gulp for beginners if you are new to it.
Periodically we will update a version the plugins. When we do this, and you get the latest from Git, you will type npm update and it will make updates based on the entries in the packages.json manifest file.
We may also need to install a specific, older, version of a module. For example, we want to install Express V3 we would go to the command line in the root of the project and type npm install express@3.0.0.
- Hero: in print terms a hero is the image that is the center of attention. It is a component, often in a jumbotron.
- Jumbotron: a large component that contains a hero image and a call to action, carousel or other dynamic element. It is usually the dominant item on a page and above the fold.
- Card: a small component that usually contains all the content needed to survive on its own. An example would be a pricing card, common questions, specialist or speak with an attorney. We do group these together in "Easy as 1-2-3" or Ask away.
- Collapse: this is how Bootstrap describes accordions or collapsing menus that are a feature by themselves. Being block-level, it will often displace content on the requirements of its size.
- Dropdown: this is a menu component. It can also be part of buttons, and will overlap content.