Components Demo Site Home Header Menu Search User Login Footer Sign In Sign Out UserFirstName

Welcome to the new templates!

Getting Started

Add the following to your <head>:


            <link type="text/css" rel="stylesheet" href="//cloud.typography.com/75214/6517752/css/fonts.css" media="all" />
            <link rel="stylesheet" href="https://cdn.byu.edu/byu-theme-components/latest/byu-theme-components.min.css" />
            <script async src="https://cdn.byu.edu/byu-theme-components/latest/byu-theme-components.min.js"></script>
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
        

Then, add this to your page where you want the header to appear:


            <byu-header>
                <h1 slot="site-title">Your Site Title Here</h1>
            </byu-header>
        

And this where you want the footer:

<byu-footer></byu-footer>

Max Page Width

Since the header and footer have a default max width of 1200px, your page content will need some additional styling to match their width. Specifically, you'll want to wrap your page content in a div with the following CSS:


            <style>
                .page-content {
                    margin: 0 auto;
                    max-width: 1200px;
                    width: 100%;   
                    padding: 16px;
                    box-sizing: border-box;
                }
            </style>
            
            <html>
                <body>   
                    <byu-header>
                        <h1 slot="site-title">Your Site Title Here</h1>
                    </byu-header>
                    
                    <div class="page-content">
                        <!-- Put your site content here -->
                    </div>

                    <byu-footer></byu-footer>
                </body>
            </html>

        

We strongly recommend adding some code to make the footer "stick" to the bottom of the window even when there is little or no page content. A discussion of how to do this can be found on the footer docs page.

More Updates Coming Soon

A new version of these components is scheduled to be released every two weeks, so feel free to check back here for updates. While the code needed to use the core components is not expected to change, the look and feel of each component may change over time, and new features may be added.

If you encounter issues, need help, or have ideas for new features or enhancements, file an issue on Github.

If you'd like to get involved, you can join our group on Github https://github.com/byuweb or join the conversation on Slack (http://byu-web.slack.com). (https://github.com/byuweb/byu-theme-components).