Update to v1.2

Author: dymio

README.md

@@ -1,29 +1,131 @@
 HTML and CSS Template
 =====================
 
-Version 1.1, September 5, 2014
+Version 1.2, March 10, 2017
 
-This is frontend template for web project. Includes:
+This is template for web page. Includes:
 
-- HTML valid document with all necessary tags in the head tag and some tips;
-- CSS basis and tricks for easy start any project (based on Normalize, Bootstrap and my own works);
+- 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 in (really) all resolutions that are necessary;
+- set of favicons of basic necessary resolutions;
 
-Recomend to minimize and compile css styles when use.
+Used Components:
 
+- [Normalize.css 5.0.0](http://necolas.github.io/normalize.css/);
+- [Bootstrap 3.3.7](http://getbootstrap.com/) as basis of all styles;
 
-Browsers support
-----------------
-IE 8+, Firefox 4+, Safari 5+, Opera, Chrome
+Browsers support: Chrome, Firefox, Opera, IE 8+, Safari 6+.
 
+Recomend to minimize and compile css styles to use on production.
 
-Used components
----------------
-- [Normalize.css 3.0.1](http://github.com/necolas/normalize.css) as styles base
-- [Bootstrap 3.2.0](http://getbootstrap.com/) as source of many good decisions and design
 
+HEAD section specias
+--------------------
 
-2014, Ivan Dymkov
+### Mobile optimized page
+
+Tag `meta` 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">
+
+### Old IE compatibility
+
+With tag `<meta http-equiv="x-ua-compatible" content="IE=edge,chrome=1">`
+IE uses the highest supported
+[document mode](https://msdn.microsoft.com/en-us/library/jj676915.aspx)
+(actual for IE8-10).
+
+[Html5shiv](https://github.com/aFarkas/html5shiv) adds HTML5 elements support
+to IE 6-8
+
+Tag `<meta http-equiv="msthemecompatible" content="no">` prevent to adjust
+the OS theme to your website in IE. But this only for IE6 and Windows XP. Skip.
+
+### Basic Page Info
+
+Tags `title` and `meta` with name="description" gives basic information about
+the page to search engines. They are required. Tag `meta` with name="keywords"
+is optional and possibly ignored by search engines crawlers.
+
+### Twitter card
+
+With [Twitter Cards](https://dev.twitter.com/cards), you can attach rich photos,
+videos and media experiences to Tweets, helping to drive traffic to your
+website. Simply add a few lines of markup to your webpage, and users who Tweet
+links to your content will have a “Card” added to the Tweet that’s visible
+to their followers.
+
+Tag `<meta name="twitter:card" content="summary">` enable Twitter card.
+Title, description and image Twitter
+[will get](https://dev.twitter.com/cards/getting-started#twitter-cards-and-open-graph)
+from Open Graph tags.
+
+Use other Twitter Card meta-tags only for
+[special cases](https://dev.twitter.com/cards/types).
+
+### Open Graph protocol
+
+[The Open Graph protocol](http://ogp.me/) enables any web page to become
+a rich object in a social graph. For instance, this is used on Facebook
+to allow any web page to have the same functionality as any other object
+[on Facebook](https://developers.facebook.com/docs/sharing/webmasters).
+
+### Favicon
+
+Build a correct favicon.ico file with ImageMagick:
+
+    convert fav16.png fav32.png fav48.png fav64.png favicon.ico
+
+Or with [online service](http://icoconvert.com/).
+
+### Apple touch icons
+
+In tag `link` with rel="apple-touch-icon" you can set the Apple touch icon
+[for Web Clip](https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html).
+Use this [guidelines](https://developer.apple.com/ios/human-interface-guidelines/graphics/app-icon/#app-icon-sizes).
+
+### Microsoft application
+
+With meta tags you can customize data of pinned site
+[on Windows desktop](https://msdn.microsoft.com/en-us/library/dn255024.aspx)
+and [for IE](https://msdn.microsoft.com/en-us/library/hh772707.aspx). 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.
+
+
+License
+-------
+
+[The MIT License (MIT)](https://opensource.org/licenses/MIT),
+Copyright 2014 Ivan Dymkov.
+
+
+Contributing
+------------
+
+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 issues](https://github.com/dymio/html-css-template/issues)
+or make pull requests.

UPDATE.md

@@ -1,57 +1,31 @@
 Update process
 --------------
 
-Get the latest version of [Normalize.css](http://github.com/necolas/normalize.css) and put it to assets/normalize.css file.
+1. Get the latest version of
+    [Normalize.css](http://github.com/necolas/normalize.css)
+    and put it to assets/normalize.css file.
 
-Get the latest version of [Bootstrap](http://getbootstrap.com/). Task if take all styles of base elements without styles for classes (instead table and helpers) and without not really good decisions (IMHO).
+2. Get the latest version of [Bootstrap](http://getbootstrap.com/) css file.
+    Get all styles of elements without classes (instead of table and clearfix).
+    Skip not good decisions (like 'box-sizing: border-box' for all, IMHO).
 
-Copy print section (@media print) from bootstrap.css to assets/print.css.
+3. Media print section (@media print) put to print.css file.
 
-Ignore glyphicon styles.
+4. Ignore box-sizing rules for `*, *:before, *:after` elements.
 
-Ignore all styles for classes (instead table, but later about it).
+5. Update all commont styles in basis.css file: for html, body, a, figure, img
+    tags, forms styles, '@-ms-viewport' rule etc.
 
-Ignore box-sizing rules for all elements.
+6. Update styles of content elements in content.css. Don't forget to add
+    '.content' selector before added css rule.
+    Content elements are elements which user can add by wysiwyg editor.
+    Paragraphs, headers, hr, lists, tables etc.
 
-Copy html and body styles to assets/basis.css with replacing text color form #333 to #000.
+    6.1. Table styles without classes is boring in Bootstrap. Compile styles
+        of table element and '.table' class together.
 
-Also copy to assets/basis.css rules for a, img and figure elements (do not remove anchor underline variants comment cheat).
+    6.2. Do not remove `.content img { max-width: 100%; }` from content.css.
 
-All styles of inputs, selects, fieldsets and other forms components copy to assets/forms_basis.css (do not forget to remove rules for elements with classes).
+7. Update [readme file](README.md): last update date and component versions.
 
-Styles of other elements copy to assets/content.css but put before every rule class '.content'. Example: `.content hr`.
-
-Add `.content img { max-width: 100%; }` to assets/content.css file.
-
-Save rules for classes '.h1', '.h2', '.h3', '.h4', '.h5', '.h6', '.small', '.mark' and do not insert '.content' class before.
-
-Also save elements with classes 'pull-right' and 'pull-left' - this classes we will save into helpers.
-
-Table styles without classes is boring in bootstrap. Need to compile styles of 'table' and '.table' together and put it to assets/content.css file (with adding '.content' before).
-
-Put to assets/helper.css file usefull universal classes rules:
-* .text-left
-* .text-right
-* .text-center
-* .text-justify
-* .text-nowrap
-* .text-lowercase
-* .text-uppercase
-* .text-capitalize
-* .fade (with modifications)
-* .collapse (with modifications)
-* .clearfix
-* .center-block
-* .pull-right
-* .pull-left
-* .affix
-* .hide
-* .show
-* .invisible
-* .text-hide
-* .hidden
-* .visible-print (with modifications)
-* .hidden-print
-* maybe something new?
-
-Put to assets/helper.css file `@-ms-viewport` rule.
+8. Update last update in [humans txt](humans.txt) file;

assets/basis.css

@@ -1,13 +1,12 @@
 /*!
- * Screen base styles
- *  taken from Bootstrap v3.2.0 | MIT License | getbootstrap.com
+ * Screen base styles (include form base styles)
+ *  based on Bootstrap v3.3.7 | MIT License | getbootstrap.com
  */
 
 html {
   font-size: 10px;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
-
 body {
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 14px;
@@ -17,34 +16,104 @@ body {
 }
 
 a {
-  color: #428bca;
+  color: #337ab7;
   text-decoration: none;
 }
 a:hover,
 a:focus {
-  color: #2a6496;
+  color: #23527c;
   text-decoration: underline;
 }
 a:focus {
-  outline: thin dotted;
   outline: 5px auto -webkit-focus-ring-color;
   outline-offset: -2px;
 }
-/* anchor underline variants */
-/* - single line only variant -
-  display: inline-block;
-  border-bottom: 1px solid;
-  line-height: 90%;
-*/
-/* - good variant for single color inline link (can be multiline) -
-  background: url('one_px_428bca.png') repeat-x left 1.26em;
-*/
+/* Think underline variant for inline-block link:
+    display: inline-block;
+    border-bottom: 1px solid;
+    line-height: 90%; */
+/* Thin underline variant for inline with 1 square px image:
+    background: url('one_px_428bca.png') repeat-x left 1.26em; */
 
 figure {
   margin: 0;
 }
 img {
   vertical-align: middle;
 }
+[role="button"] {
+  cursor: pointer;
+}
 
 @-ms-viewport { width: device-width; }
+
+input, button, select, textarea {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+fieldset {
+  min-width: 0;
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+legend {
+  display: block;
+  width: 100%;
+  padding: 0;
+  margin-bottom: 20px;
+  font-size: 21px;
+  line-height: inherit;
+  color: #333;
+  border: 0;
+  border-bottom: 1px solid #e5e5e5;
+}
+label {
+  display: inline-block;
+  max-width: 100%;
+  margin-bottom: 5px;
+  font-weight: bold;
+}
+input[type="search"] {
+  -webkit-box-sizing: border-box;
+     -moz-box-sizing: border-box;
+          box-sizing: border-box;
+  -webkit-appearance: none;
+}
+input[type="radio"],
+input[type="checkbox"] {
+  margin: 4px 0 0;
+  margin-top: 1px \9;
+  line-height: normal;
+}
+input[type="file"] {
+  display: block;
+}
+input[type="range"] {
+  display: block;
+  width: 100%;
+}
+select[multiple],
+select[size] {
+  height: auto;
+}
+input[type="file"]:focus,
+input[type="radio"]:focus,
+input[type="checkbox"]:focus {
+  outline: 5px auto -webkit-focus-ring-color;
+  outline-offset: -2px;
+}
+output {
+  display: block;
+  padding-top: 7px;
+  font-size: 14px;
+  line-height: 1.42857143;
+  color: #555;
+}
+input[type="radio"][disabled],
+input[type="checkbox"][disabled],
+fieldset[disabled] input[type="radio"],
+fieldset[disabled] input[type="checkbox"] {
+  cursor: not-allowed;
+}