Development for BYU responsive theme
CSS JavaScript Other
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
css
font/font-awesome
images
img
js
src
.gitignore
404.html
500.html
Gruntfile.coffee
README.md
apple-touch-icons_apple-touch-icon-114x114-precomposed.png
apple-touch-icons_apple-touch-icon-144x144-precomposed.png
apple-touch-icons_apple-touch-icon-57x57-precomposed.png
apple-touch-icons_apple-touch-icon-72x72-precomposed.png
apple-touch-icons_apple-touch-icon.png
config.rb
crossdomain.xml
elements.html
favicon.ico
header-all.html
header-nav.html
header-org.html
header-search.html
header.html
headertype1-update.html
humans.txt
index.html
package.json
pageheader1.html
pageheader2.html
pageheader3.html
pageheader4.html
pageheader5.html
pagetype1.html
pagetype2-update.html
pagetype3-update.html
pagetype4-update.html
pagetype4_5-update.html
robots.txt
sample1-primaryorg-frontpage.html
sample2-primaryorg-page.html
sample3-primaryorg-onesidebar.html
sample4-primaryorg-twosidebars.html
sample5-application-sidenav.html
sample5-secondaryorg-sixcolumns.html

README.md

Documentation for HTML Templates 2.0

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:

Scripts

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.

Slider

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.

Responsive.css

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.

Breakpoints

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.

Global Assets

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.

Error Pages

Go into 404.html and 500.html error pages and modify them to suit your own organization.