-
Notifications
You must be signed in to change notification settings - Fork 3
4. Editing the library website
I created a screencast of editing the website from local -> staging/dev -> prod/live. In this video, I update the wordpress header template and the homepage angular template/build with grunt. This might make it easier to understand the workflow of editing the site. ✨
In order to edit any part of the site, you'll need to know where the files live. Our build is somewhat complicated, but I'm going to do my best to break it down from general file structure (this section) to which files build which part of the site (see below).
If you need to update the HTML on a page, the template files are what you're looking for: roots-ualib/templates/
Most of the files in the main roots-ualib directory are loops of logic that set up HTML on pages but don't actually render the HTML. You will also find important files like functions.php, functions-ualib.php here, but those don't directly affect the HTML of any given page.
Our website is split pretty evenly between "content pages" that are generated by WordPress templates/the CMS and JavaScript/Angular templates and apps. The roots-ualib directory is JavaScript heavy because WordPress handles so much of the other content within the CMS, making it seem invisible here in the theme/file structure. That's the beauty of WordPress, but it makes it hard to find things.
The homepage, all the front-end logic, and all of the apps are compiled by Grunt and built to two main files, scripts.js and scripts_bower.js.
The Gruntfile compiles different files depending on whether you're developing or building for a live push. The main takeaway here is you can't edit those two files directly. You must figure out where that functionality is being pulled in from and edit those files, instead.
The homepage and the apps' HTML is built from Angular templates, then compiled during the Grunt build to JavaScript strings. Building the HTML as JS means that HTML can be cached and served faster in the long run. It also makes it a pain to figure out which file you need to edit. Angular templates end in .tpl.html. There are only two in the main roots-ualib/js/ directory: _ualib-home.tpl.html and _ualib-alerts.tpl.html.
All of the apps use Angular templates, as well. If the HTML you're looking for seems like it's on the homepage but is definitely not in _ualib-home, it's probably being pulled in from an external app file. See the section on apps for more information.
I haven't fully explored all of the files in the roots-ualib/vendor/ directory, but rest assured, these files are compiled to this directory. Editing anything here will most likely not change a single thing in either the dev or live builds.
For example: if you attempt to change something in a vendor/ualib-hours template file, it will be overwritten when Grunt builds the site.
I believe these are here solely for development purposes, as they certainly don't exist on the live build of the site (outside of modernizr, for reasons I have yet to uncover). All of the HTML/JS in these files is compiled to scripts_bower.min.js.
This is legacy information, last updated in 2015.
Don't modify Bootstrap's source - override and extend.
The theme's style if based off Bootstrap, however, we don't just download the compiled Bootstrap CSS and the edit that - that would be terribly tedious to maintain and update to new Bootstrap versions. Instead, we use Bower to install/update Bootstrap's LESS source, then override and merge out own LESS styles using Grunt. This means the LESS files are in two layers - Bootstraps and ours.
Bootstrap's LESS source will be installed in the assets/vendor/bootstrap/less folder. Our modifications and custom LESS lives in the assets/less folder.
Bootstrap style override must adhere to the following rules:
- Modifications must mirror Bootstrap's file structure
- To override styles in
bootstrap/less/buttons.lessfile, we must create aassets/less/_buttons.lessfile and make changes there. - Changes to
bootstrap/less/mixins/alerts.less, would be made inassets/less/mixins/_alerts.less
- Files in
assets/lessoverriding Bootstrap files but be prepended with and underscore (i.e.,_bootstrap-file-name.less
- This will allow us to easily distinguish between our home grown styles and bootstrap overrides.
- Only put what's being overwritten in the
_bootstrap-file-override.lessfiles - using@import /path/to/original/bootstrap/file.lessat the top to include any styles that were not overriden in that file.
Hopefully the file structure section above helped illuminate how our site is structured and built. This section will help you find the files you need to change in order to update specific areas of content on the site.