Repository files navigation

Version 1.2, March 10, 2017

This is template for web page. Includes:

• valid HTML document with all necessary tags in the head section;
• CSS basis for easy start;
• humans.txt example file;
• robots.txt example file;
• sitemap.xml example file;
• set of favicons of basic necessary resolutions;

Used Components:

• Normalize.css 5.0.0;
• Bootstrap 3.3.7 as basis of all styles;

Browsers support: Chrome, Firefox, Opera, IE 8+, Safari 6+.

Recomend to minimize and compile css styles to use on production.

Tagmeta with name="viewport" and css rule '@-ms-viewport'in 'assets/basis.css' tells browser that the page is mobile optimized.There are two old tags for the same task, I removed from html document.They used by Palm devices and Windows Mobile devices:

<meta name="HandheldFriendly" content="True"><meta name="MobileOptimized" content="320">

With tag<meta http-equiv="x-ua-compatible" content="IE=edge,chrome=1">IE uses the highest supporteddocument mode(actual for IE8-10).

Html5shiv adds HTML5 elements supportto IE 6-8

Tag<meta http-equiv="msthemecompatible" content="no"> prevent to adjustthe OS theme to your website in IE. But this only for IE6 and Windows XP. Skip.

Tagstitle andmeta with name="description" gives basic information aboutthe page to search engines. They are required. Tagmeta with name="keywords"is optional and possibly ignored by search engines crawlers.

WithTwitter Cards, you can attach rich photos,videos and media experiences to Tweets, helping to drive traffic to yourwebsite. Simply add a few lines of markup to your webpage, and users who Tweetlinks to your content will have a “Card” added to the Tweet that’s visibleto their followers.

Tag<meta name="twitter:card" content="summary"> enable Twitter card.Title, description and image Twitterwill getfrom Open Graph tags.

Use other Twitter Card meta-tags only forspecial cases.

The Open Graph protocol enables any web page to becomea rich object in a social graph. For instance, this is used on Facebookto allow any web page to have the same functionality as any other objecton Facebook.

Build a correct favicon.ico file with ImageMagick:

convert fav16.png fav32.png fav48.png favicon.ico

Or withonline service.

In taglink with rel="apple-touch-icon" you can set the Apple touch iconfor Web Clip.Use thisguidelines.

With meta tags you can customize data of pinned siteon Windows desktopandfor IE. Example:

<meta name="application-name" content="HTML and CSS Template"><meta name="msapplication-tooltip" content="HTML and CSS Template by Dymio"><meta name="msapplication-starturl" content="http://github.com/dymio/html-css-template"><meta name="msapplication-TileColor" content=" #009900" /><meta name="msapplication-TileImage" content="ico/squareicon.png"><meta name="msapplication-square70x70logo" content="ico/smalltile.png" /><meta name="msapplication-square150x150logo" content="ico/mediumtile.png" /><meta name="msapplication-wide310x150logo" content="ico/widetile.png" /><meta name="msapplication-square310x310logo" content="ico/largetile.png" />

In the html document I use only top tags for Metro UI: TileColor and TileImage.

The MIT License (MIT),Copyright 2014 Ivan Dymkov.

1. Fork it
2. Create your feature branch (git checkout -b my-new-feature)
3. Commit your changes (git commit -am 'Add some feature')
4. Push to the branch (git push origin my-new-feature)
5. Create new Pull Request

Feel free to use code of the project as you want,create issuesor make pull requests.