the why, what, and how
of the ISP boilerplate
http://xiw.cx/isp-bp
problemS
Every project requires integration with various vendor libraries (e.g. registration package, comments).
Without a CMS this work was being done over and over, typically creating lots of bugs right before a project had to launch
A SOLUTION
www.preview.nationalgeographic.com/specialprojects/boilerplate/
A living baseline of code that can be:
- verified through the Quality Assurance process
- used at the start of a project, to highlight conflicts throughout development
- improved over time
DIagram: HOW THIngs fit together
![](https://s3.amazonaws.com/media-p.slid.es/uploads/xiwcx/images/594781/isp-graf.jpg)
MORTAR
![](https://s3.amazonaws.com/media-p.slid.es/uploads/xiwcx/images/594785/Screen_Shot_2014-09-01_at_5.00.50_PM.png)
MORTAR IS...
- a living styleguide
- a custom framework of UI patterns branded for NGS
- a usable collection of CSS, Javascript, and HTML examples
- like Twitter Bootstrap or Zurb Foundation, but built and maintained in house
IN an ideal world
Mortar handles form while the Boilerplate takes care of function.
The Boilerplate may fill in a few gaps.
Two flavors of boilerplate
template & static
Boilerplate Template
![](https://s3.amazonaws.com/media-p.slid.es/uploads/xiwcx/images/594803/Screen_Shot_2014-09-01_at_5.11.29_PM.png)
Text
TRADitional CMS
![](https://s3.amazonaws.com/media-p.slid.es/uploads/xiwcx/images/594824/traditional-cms.jpg)
BOilerplate template uses jekyll
A static site generator
![](https://s3.amazonaws.com/media-p.slid.es/uploads/xiwcx/images/594825/static-site-generator.jpg)
Template Pros
- organized, readable code through tempating
- change a few variables to update social and comments
- minification and concatenation of css and javascript
- minification of html
- optimization of images
- file revving automatically breaks the cache
- watch task compiles and reloads as you work
Template cons
- familiarity with liquid templating language, jekyll static site generator, and the command line interface
Title Text
Comments | ✔ | ✔ |
Templating | ✔ | ✗ |
Boilerplate Static
![](https://s3.amazonaws.com/media-p.slid.es/uploads/xiwcx/images/594804/Screen_Shot_2014-09-01_at_5.12.19_PM.png)
Boilerplate static
Provides working test code without an opinionated development workflow or environment
![](https://s3.amazonaws.com/media-p.slid.es/uploads/xiwcx/images/594836/static.jpg)
Kept in sync with the template branch at all times
QUESTIONS?
ISP Boilerplate
By welch canavan
ISP Boilerplate
- 1,300