To download the templates, go to the release page.
For examples of working pages, visit the demo pages, and especially take a look at the style guide page, which outlines some of the useful frameworks and features included in these templates.
For developers who want to use SCSS, Jade, and Grunt to compile pages, see the developer documentation page.
Thank you for downloading BYU’s responsive HTML templates. This gives you a set of static pages that you can modify and copy to fill out your website. If you wish to modify styles, please add your own style sheet rather than edit style sheets in the template. This will protect you from going back and editing everything when the templates are updated or corrected. Please be aware that we put the content before the nav in our code.
For your benefit, comments are sprinkled liberally throughout the code on all pages, as well as in css and js files. Use them as a guide.
Before you get started, please be aware of the following issues:
In the <head> section of each HTML page you will see a section containing some of these elements:
<script>
Window.pageSettings = {
AdditionalScripts: [ ]
</script>
The AdditionalScripts line is where you would add scripts that are not included in the template.
HTML pages have a “load slider” routine that sets up a sliding photo display. Init.js checks to see if it’s true or false. Please be aware of the loadslider variable in the head of the HTML page you’re using:
<head>
<script>
var pageSettings = {
loadslider: false,
</script>
</head>
By default we have set loadslider to true for front pages and false for inside pages. If it says false then the slider scripts won’t load. This and other issues are explained in comments in the code for elements.html. That’s an essential page to read.
Read the comments in this file. Note, for example, Line 41, where full menu width is explained. Note that the min-width of 60em should be reset depending on your layout. Also, please note that ems work much better with responsive layouts than pixels.
Screen width breakpoints are central to the responsive strategy. They are found on Line 57 in responsive.css. Please read the comments in this file.
We have set standard breakpoints for phones, tablets, desktops, and large displays. Your layout may vary and may “break” at different points. Please adjust accordingly.
BYU logos and other assets common to BYU sites are served from a central server to facilitate caching of shared assets and the ability to update assets across multiple BYU sites. Information about these assets and their usage can be found on the BYU Global Assets page and the associated repo.
Go into 404.html and 500.html error pages and modify them to suit your own organization.