Start

browserconfig

Introduced in IE11, the browserconfig file defines the icon configuration for Windows. By default the browser will look for the file in the root of the website.

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
    <msapplication>
        <tile>
            <square70x70logo src="/assets/img/icons/tile.png"/>
            <square150x150logo src="/assets/img/icons/tile.png"/>
            <square310x310logo src="/assets/img/icons/tile.png"/>
            <wide310x150logo src="/assets/img/icons/tile-wide.png"/>
            <TileColor>#168eaf</TileColor>
        </tile>
    </msapplication>
</browserconfig>

htaccess

Regardless if you’re running an Apache-compatible web server the principles still apply. Avoid serving content from duplicate sources and present a consistent URL structure. Use this as a starting point.

Maintenance

The maintenance block serves as a quick mechanism to toggle a temporary redirect to a maintenance page. It also has an IP exclusion to ensure that internal traffic can still access the full site.

RewriteCond %{REQUEST_URI} !^/maintenance\.html$
RewriteCond %{REMOTE_ADDR} !^123\.456\.789\.
RewriteCond $1 !^(assets) [NC]
RewriteRule ^(.*)$ /maintenance.html [R=307,L]

Setup

A couple basic Apache settings are made and the X-UA-Compatible header and encoding are set. If uncommented the two corresponding meta tags should be removed from the HTML head.

RewriteEngine On
Options +FollowSymLinks -Indexes -MultiViews

# Internet Explorer document mode
Header set X-UA-Compatible "IE=edge"

# Disable iframe embedding
Header always append X-Frame-Options SAMEORIGIN

# Character set
AddDefaultCharset utf-8
AddCharset utf-8 .atom .css .geojson .js .json .jsonld .manifest .map .rss .xml

# HTTP Strict Transport Security
Header always set Strict-Transport-Security "max-age=7776000; includeSubDomains"

HTTP Access Control

CORS headers open up web servers for cross-domain access. This is particularly helpful when serving assets through a pull CDN zone.

# Cross-origin images
<FilesMatch "\.(bmp|gif|ico|jpe?g|png|svg|webp)$">
    SetEnvIf Origin ":" IS_CORS
    Header set Access-Control-Allow-Origin "*" env=IS_CORS
</FilesMatch>

# Cross-origin web fonts
<FilesMatch "\.(eot|otf|ttf|woff2?)$">
    Header set Access-Control-Allow-Origin "*"
</FilesMatch>

Errors

It’s important to intercept common HTTP errors on the host level with custom pages.

ErrorDocument 404 /404.html

Project

Add your project’s specific rules to this section.

# Custom redirects and rewrites

Rewrites

Without specific redirects most servers will allow multiple URLs to access the same endpoint. Funnel requests through redirect logic to ensure there is only one true canonical address.

# Force www
RewriteCond %{HTTP_HOST} !^www.weepower.com$ [NC]
RewriteRule ^(.*)$ http://www.weepower.com/$1 [R=301,L]

# Remove www (use either force or remove)
# RewriteCond %{HTTP_HOST} !^weepower.com$ [NC]
# RewriteRule ^(.*)$ http://weepower.com/$1 [R=301,L]

# Force SSL
RewriteCond %{HTTPS} !on
RewriteRule ^(.*)$ https://%{HTTP_HOST}/$1 [R=301,L]

# Remove trailing slash
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)/$ /$1 [R=301,L]

# Remove multiple slashes
RewriteCond %{THE_REQUEST} //
RewriteRule ^(.*)$ /$1 [R=301,L]

# Remove index reference
RewriteCond %{REQUEST_URI} ^(.*/)index.html$ [NC]
RewriteRule . %1 [R=301,L]

# Remove extension
RewriteCond %{REQUEST_URI} ^GET\ (.*).html(.*)\ HTTP
RewriteRule (.*).html$ $1$2 [R=301]

# Rewrite extension
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME}.html -f
RewriteRule (.*) $1.html [L]

humans

Of course you want robots to understand your site but what if humans take an interest? Use the humans.txt file to credit all your cool tools and languages.

robots

Website owners use the robots.txt file to give instructions about their site to web robots, specifically what resources should be excluded from indexing.

Doctype

The doctype is a critical for communicating which standard to use when rendering your website. Wee uses HTML5, the modern, semantic format for structuring data which includes a number of new elements.

<!doctype html>

Meta

<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Front-End Framework | Wee</title>
<meta name="description" content="Blueprint for modern web development.">

It’s best to serve the meta charset and http-equiv values through HTTP headers. There are commented lines in the sample .htaccess file for that purpose. If uncommented, you should remove the two tags from your HTML.

Icons

Whether someone is on a mobile device, legacy browser, or Windows tablet your brand should stay consistent. In addition to the iOS and Safari icons the browserconfig.xml and favicon.ico files serve most environments.

<link rel="apple-touch-icon" href="/assets/img/icons/touch.png">
<link rel="mask-icon" href="/assets/img/icons/pin.svg" color="#349bb9">

To read more about the Safari 9 mask icon requirements check out the Apple docs.

Publisher

While authorship is officially dead the publisher link is still being put to use according to Google.

<link rel="publisher" href="https://plus.google.com/+weecss">

Twitter Cards

With Twitter Cards, you can attach photos and other media to Tweets that drive traffic to your website.

Twitter cards can work in conjunction with Open Graph to eliminate duplicate tag content.

Open Graph

The Open Graph protocol enables any web page to become a rich object in a social graph. Both Facebook and Twitter leverage the tags for extracting page context when sharing.

<meta property="og:type" content="website">
<meta property="og:site_name" content="Wee">
<meta property="og:title" content="Front-End Framework" itemprop="name">
<meta property="og:description" content="Blueprint for modern web development." itemprop="description">
<meta property="og:url" content="https://www.weepower.com" itemprop="url">
<meta property="og:image" content="https://www.weepower.com/assets/img/share.png" itemprop="image">

In the sample HTML Wee dual-purposes the Open Graph tags as Schema properties for the WebPage scope defined on the document root.

Legacy

Wee maintains compatibility with IE9 which requires conditionally serving specific rules and polyfills. If you aren’t supporting legacy browsers feel free to remove this.

<!--[if lte IE 9]>
<script src="/assets/js/ie9.min.js"></script>
<![endif]-->

ARIA

WAI-ARIA defines methods to ensure web content and applications are accessible to those with disabilities. It especially helps with dynamic content and JavaScript controls.

<header role="banner"></header>
<nav role="navigation">
<main role="main"></main>
<footer role="contentinfo"></footer>

Schema

Schema enables search engines to better understand the information on web pages and provide richer search results. It can also enable new tools and applications that make use of the tags.

<html lang="en" itemscope itemtype="http://schema.org/WebPage">