[ulp id=’tgm4cmEWcKUikZNn’]<\/p>\n
1. Main Features<\/h2>\n
You might be wondering, why use Boilerplate, what’s on it? Well, below we present the best features:<\/p>\n
– HTML5 ready. Use the new elements with confidence.
\n– Designed with progressive enhancement in mind.<\/p>\n
Includes: Browser support is a very important aspect to consider when developing web projects. Boilerplate offers a wide range of browser support and even support for their earlier versions.<\/p>\n – Chrome (latest 2) This doesn’t mean that HTML5 Boilerplate cannot be used in older browsers, just that they’ll ensure compatibility with the ones mentioned above.<\/p>\n By default, HTML5 Boilerplate provides two The Language attribute<\/strong> The order of the <title> and <meta> tags<\/strong><\/p>\n The order in which the <title> and the <meta> tags are specified is important because:<\/p>\n 1) the charset declaration (<meta charset=”utf-8″>):<\/p>\n – must be included completely within the first 1024 bytes of the document<\/p>\n – should be specified as early as possible (before any content that could be controlled by an attacker, such as a <title> element) in order to avoid a potential encoding-related security issue in Internet Explorer<\/p>\n 2) the meta tag for compatibility mode (<meta http-equiv=”x-ua-compatible” content=”ie=edge”>):<\/p>\n – needs to be included before all other tags except for the <title> and the other <meta> tags<\/p>\n x-ua-compatible<\/strong><\/p>\n Internet Explorer 8\/9\/10 support document compatibility modes that affect the way webpages are interpreted and displayed. Because of this, even if your site’s visitor is using, let’s say, Internet Explorer 9, it’s possible that IE will not use the latest rendering engine, and instead, decide to render your page using the Internet Explorer 5.5 rendering engine.<\/p>\n Specifying the or sending the page with the following HTTP response header<\/p>\n If possible, we recommend that you remove the If you are using Apache as your webserver, including the .htaccess<\/em> file takes care of the HTTP header. If you are using a different server, check out our other server config.<\/p>\n Mobile viewport<\/strong><\/p>\n There are a few different options that you can use with the Modernizr<\/strong><\/p>\n HTML5 Boilerplate uses a custom build of Modernizr.<\/p>\n Modernizr is a JavaScript library which adds classes to the In general, in order to keep page load times to a minimum, it’s best to call any JavaScript at the end of the page because if a script is slow to load from an external server it may cause the whole page to hang. That said, the Modernizr script needs to run before the browser begins rendering the page, so that browsers lacking support for some of the new HTML5 elements are able to handle them properly. Therefore the Modernizr script is the only JavaScript file synchronously loaded at the top of the document.<\/p>\n What about polyfills?<\/strong><\/p>\n A polyfill, or polyfiller, is a piece of code (or plugin) that provides the technology that you, the developer, expect the browser to provide natively. Flattening the API landscape if you will. If you need to include polyfills in your project, you must make sure those load before any other JavaScript. If you’re using some polyfill CDN service.<\/p>\n The content area<\/strong><\/p>\n The central part of the boilerplate template is pretty much empty. This is intentional, in order to make the boilerplate suitable for both web page and web app development.<\/p>\n Google CDN for jQuery<\/strong><\/p>\n The Google CDN version of the jQuery JavaScript library is referenced towards the bottom of the page using a protocol-independent path (read more about this in the FAQ). A local fallback of jQuery is included for rare instances when the CDN version might not be available, and to facilitate offline development.<\/p>\n The Google CDN version is chosen over other potential candidates (like the jQuery CDN) because it’s fast in absolute terms and it has the best overall penetration which increases the odds of having a copy of the library in your user’s browser cache.<\/p>\n While the Google CDN is a strong default solution your site or application may require a different configuration. Testing your site with services like WebPageTest and browser tools like PageSpeed Insights or YSlow will help you examine the real world performance of your site and can show where you can optimize your specific site or application.<\/p>\n Google Universal Analytics Tracking Code<\/strong><\/p>\n Finally, an optimized version of the Google Universal Analytics tracking code is included. Google recommends that this script be placed at the top of the page. Factors to consider: if you place this script at the top of the page, you\u2019ll be able to count users who don\u2019t fully load the page, and you\u2019ll incur the max number of simultaneous connections of the browser.<\/p>\n Finally, this is how the HTML of Boilerplate looks like in your editor:<\/p>\n HTML5 Boilerplate’s CSS includes: This starting CSS does not rely on the presence of conditional class names, conditional style sheets, or Modernizr, and it is ready to use no matter what your development preferences happen to be.<\/p>\n In order to make browsers render all elements more consistently and in line with modern standards, we include Normalize.css \u2014 a modern, HTML5-ready alternative to CSS resets.<\/p>\n As opposed to CSS resets, Normalize.css:<\/p>\n \u2022 targets only the styles that need normalizing Several base styles are included that build upon Normalize.css. These styles:<\/p>\n \u2022 provide basic typography settings that improve text readability You are free and even encouraged to modify or add to these base styles as your project requires.<\/p>\n Along with the base styles, we also provide some commonly used helper classes.<\/p>\n As opposed to the hidden class that effectively removes the element from the layout, the invisible class will simply make the element invisible while keeping it in the flow and not affecting the positioning of the surrounding content.<\/p>\n Over the years there have been many variants of the clearfix hack, but currently, we use the micro clearfix.<\/p>\n HTML5 Boilerplate makes it easy for you to get started with a mobile first<\/em> and responsive web design<\/em> approach to development. But it’s worth remembering that there are no silver bullets.<\/p>\n We include placeholder media queries to help you build up your mobile styles for wider viewports and high-resolution displays. It’s recommended that you adapt these media queries based on the content of your site rather than mirroring the fixed dimensions of specific devices.<\/p>\n If you do not want to take the mobile first approach, you can simply edit or remove these placeholder media queries. One possibility would be to work from wide viewports down, and use Lastly, we provide some useful print styles that will optimize the printing process, as well as make the printed pages easier to read.<\/p>\n At printing time, these styles will:<\/p>\n \u2022 strip all background colors, change the font color to black, and remove the text-shadow \u2014 done in order to help save printer ink and speed up the printing process \u2080 ensure the table header (<\/p>\n ) is printed on each page spanned by the table\u00a0\u00a0\u00a0\u2080 prevent block quotations, preformatted text, images and table rows from being split onto two different pages\u00a0\u00a0\u00a0\u2080 ensure that headings never appear on a different page than the text they are associated with\u00a0\u00a0\u00a0\u2080 ensure that orphans and widows do not appear on printed pages.<\/p>\n This file can be used to contain or reference your site\/app JavaScript code. For larger projects, you can make use of a JavaScript module loader, like Require.js, to load any other scripts you need to run.<\/p>\n This file can be used to contain all your plugins, such as jQuery plugins and other 3rd party scripts.<\/p>\n One approach is to put jQuery plugins inside of a By default the plugins.js file contains a small script to avoid console errors in browsers that lack a The folder structure of Boilerplate is this: HTML5 Boilerplate is a good place to start. The self-described “web’s most popular front-end template” is sleek, simple and the result of the pooled knowledge of many dozens of developers. It provides the basic scaffolding or framework for building an entire website.<\/p>\n There are alternative methods, which happen to provide more assistance. Bootstrap, Web Starter Kit and Skeleton add things like a typography base and responsive grid, giving you a further head-start when working on your design. However, they do so at the expense of additional default code, which you may find yourself having to edit or override.<\/p>\n There are also arguments that rather too many designers in recent years have relied heavily on Bootstrap, thereby resulting in many sites looking alike. Using a simpler foundation and going your own way could therefore be a better choice, depending on your level of ability, confidence and needs.<\/p>\n Based on HTLM5 Boilerplate, Initializr generates a clean customizable template for you<\/p>\n Once you gain experience, it’s worth considering a custom build using Initializr, retaining the components you need and ditching those you don’t. Also, if you’re creating a WordPress site, explore a WordPress-specific blank theme, such as HTML5 Blank.<\/p>\n These downloads and services are all free, and so you can check out and experiment with them at your leisure. For now, though, we’re going to concentrate on HTML5 Boilerplate.<\/p>\n This free, open-source boilerplate when downloaded provides you with documentation and licensing in Markdown format, some CSS, two placeholder images, two HTML files, some JavaScript, and some server config files.<\/p>\n On downloading the archive, make a copy and keep it clean and untouched. It can then serve as reference for any changes you make. For the new site you’re working on, you can ditch all of the .md documents. You’ll also want to replace the two .png files with your own, otherwise the HTML5 Boilerplate logo will appear as your site’s favicon and also the icon when your site is saved to someone’s iOS Home screen. An online generator can help you create new images.<\/p>\n Regarding the HTML, there might be some things in there that you’re not familiar with. The majority of these additions deal with issues relating to legacy browsers; the final script element is for Google Analytics and can be removed entirely if you don’t use that. Leave the other script elements that are found towards the end of the file, because they load jQuery.<\/p>\n Otherwise, beyond adding content to the body of the document, after the ‘Add your site or application content here’ comment, you’ll need to give the page a title and fill the ‘content’ value in the ‘description’ meta tag.<\/p>\n Pretty straight forward, you download the framework files, which you can consider as a template, and then edit the necessary files to get you project going.<\/p>\n So I went ahead and added some lines into the main index.html<\/strong> and then edited the main.css<\/strong> inside css<\/em> folder to customize my little page. The result was really great, considering that I didn’t have to write lines of code about linking assets, or any other type of declaration. I just added my code like so:<\/p>\n – HTML<\/strong> – CSS<\/strong> This is how my page looked like in the browser:<\/p>\n Simple as that, nothing changed, just added my own content and enjoyed fast and reliable coding.<\/p>\n To conclude, HTML5 Boilerplate is a very basic but powerful HTML framework that enables distraction free coding, you already have all your assets linked (css and js) and all you do is start coding the body (the main part) of your web project. You can keep on adding the various snippets in css and js files provided and never have to worry about linking, mobile scaling, browser support and so on.<\/p>\n In a nutshell, Boilerplate is a lean, mobile-friendly HTML template with optimized Google Analytics snippet, placeholder touch-device icon; and docs covering dozens of extra tips and tricks. Feel free to visit the official site: https:\/\/html5boilerplate.com\/<\/a><\/p>\n
\n– Normalize.css<\/code> for CSS normalizations and common bug fixes
\n– jQuery<\/code> via CDN, with a local fallback
\n– A custom build of Modernizr<\/code> for feature detection
\n– Apache Server Configs<\/code> that, among other, improve the web site’s performance and security
\n– Placeholder CSS Media Queries.
\n– Useful CSS helper classes.
\n– Default print styles, performance optimized.
\n– An optimized version of the Google Universal Analytics snippet.
\n– Protection against any stray console statements causing JavaScript errors in older browsers.
\n– “Delete-key friendly.” Easy to strip out parts you don’t need.
\n– Extensive inline and accompanying documentation.<\/p>\n2. Browser Support<\/h2>\n
\n– Firefox (latest 2)
\n– Internet Explorer 8+
\n– Opera (latest 2)
\n– Safari (latest 2)<\/p>\n3. The HTML of Boilerplate<\/h2>\n
html<\/code> pages:
\n1. index.html<\/code> – a default HTML skeleton that should form the basis of all pages on your website.
\n2. 404.html<\/code> – a placeholder 404 error page.<\/p>\n3.1 Inside
index.html<\/code><\/h3>\nno-js<\/code> class<\/strong>
\nThe no-js<\/code> class is provided in order to allow you to more easily and explicitly add custom styles based on whether JavaScript is disabled (.no-js) or enabled (.js). Using this technique also helps avoid the FOUC.<\/p>\n
\nDo consider specifying the language of your content by adding the lang attribute to as in this example:
\n<html class=”no-js” lang=”en”><\/p>\nx-ua-compatible<\/code> meta tag:<\/p>\nX-UA-Compatible: IE=edge<\/code>
\nwill force Internet Explorer 8\/9\/10 to render the webpage in the highest available mode in the various cases when it may not, and therefore, ensure that anyone browsing your site is treated to the best possible user experience that browser can offer.<\/p>\nmeta<\/code> tag and send only the HTTP response header as the meta<\/code> tag will not always work if your site is served on a non-standard port, as Internet Explorer’s preference option Display intranet sites in Compatibility View<\/strong> is checked by default.<\/p>\nviewport<\/code> meta tag. You can find out more in the Apple developer docs. HTML5 Boilerplate comes with a simple setup that strikes a good balance for general use cases.<\/p>\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"><\/pre>\n
html<\/code> element based on the results of feature test and which ensures that all browsers can make use of HTML5 elements (as it includes the HTML5 Shiv). This allows you to target parts of your CSS and JavaScript based on the features supported by a browser.<\/p>\n \r\n \r\n window.jQuery || document.write('')\r\n \r\n \r\n\r\n<\/pre>\n![\"The](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/08\/boilerplate1.jpg\")
<\/a>4. The CSS of Boilerplate<\/h2>\n
\n\u2022 Normalize.css
\n\u2022 Useful defaults
\n\u2022 Common helpers
\n\u2022 Placeholder media queries
\n\u2022 Print styles<\/p>\n4.1 Normalize.css<\/h3>\n
\n\u2022 preserves useful browser defaults rather than erasing them
\n\u2022 corrects bugs and common browser inconsistencies
\n\u2022 improves usability with subtle improvements
\n\u2022 doesn’t clutter the debugging tools
\n\u2022 has better documentation<\/p>\n4.2 Useful defaults<\/h3>\n
\n\u2022 protect against unwanted text-shadow during text highlighting
\n\u2022 tweak the default alignment of some elements (e.g.: img, video, fieldset, textarea)
\n\u2022 style the prompt that is displayed to users using an outdated browser<\/p>\n4.3 Common Helpers<\/h3>\n
.hidden<\/code>
\nThe hidden<\/code> class can be added to any element that you want to hide visually and from screen readers. It could be an element that will be populated and displayed later, or an element you will hide with JavaScript.<\/p>\n.visuallyhidden<\/code>
\nThe visuallyhidden<\/code> class can be added to any element that you want to hide visually, while still have its content accessible to screen readers.<\/p>\n.invisible<\/code>
\nThe invisible<\/code> class can be added to any element that you want to hide visually and from screen readers, but without affecting the layout.<\/p>\n.clearfix<\/code>
\nThe clearfix<\/code> class can be added to any element to ensure that it always fully contains its floated children.<\/p>\n4.4 Media Queries<\/h3>\n
max-width<\/code> media queries instead (e.g.: @media only screen and (max-width: 480px)<\/code>).<\/p>\n4.5 Print styles<\/h3>\n
\n\u2022 underline and expand links to include the URL \u2014 done in order to allow users to know where to refer to
\n(exceptions to this are: the links that are fragment identifiers, or use the javascript: pseudo protocol)
\n\u2022 expand abbreviations to include the full description \u2014 done in order to allow users to know what the abbreviations stands for
\n\u2022 provide instructions on how browsers should break the content into pages and on orphans\/widows, namely, we instruct supporting browsers that they should:<\/p>\n5. The Javascript of Boilerplate<\/h2>\n
5.1 main.js<\/strong><\/h3>\n
5.2 plugins.js<\/strong><\/h3>\n
(function($){ ... })(jQuery);<\/code> closure to make sure they’re in the jQuery namespace safety blanket. Read more about jQuery plugin authoring.<\/p>\nconsole<\/code>. The script will make sure that, if a console method isn’t available, that method will have the value of empty function, thus, preventing the browser from throwing an error.<\/p>\n6. Using the Framework<\/h2>\n
\n\u251c\u2500\u2500 css
\n\u2502 \u251c\u2500\u2500 main.css
\n\u2502 \u2514\u2500\u2500 normalize.css
\n\u251c\u2500\u2500 doc
\n\u251c\u2500\u2500 img
\n\u251c\u2500\u2500 js
\n\u2502 \u251c\u2500\u2500 main.js
\n\u2502 \u251c\u2500\u2500 plugins.js
\n\u2502 \u2514\u2500\u2500 vendor
\n\u2502 \u251c\u2500\u2500 jquery.min.js
\n\u2502 \u2514\u2500\u2500 modernizr.min.js
\n\u251c\u2500\u2500 .htaccess
\n\u251c\u2500\u2500 404.html
\n\u251c\u2500\u2500 index.html
\n\u251c\u2500\u2500 humans.txt
\n\u251c\u2500\u2500 robots.txt
\n\u251c\u2500\u2500 crossdomain.xml
\n\u251c\u2500\u2500 favicon.ico
\n\u2514\u2500\u2500 [apple-touch-icons]<\/p>\n6.1 Popular boilerplates<\/h3>\n
6.2 Advanced boilerplates<\/h3>\n
![\"Initializr](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/08\/boilerplate2.jpg\")
<\/a>6.3 Usage of the HTML5 Boilerplate<\/h3>\n
\nThe HTML contains a heading div, a subheading, a paragraph and an image. It is all wrapped in one wrapper<\/code> div, inside of which we have the main heading1<\/code> div and a content<\/code> div. Note the actual code is put under the body section, and the template default code remains unchanged. Isn’t that awesome?<\/p>\n![\"Adding](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/08\/boilerplate3.jpg\")
<\/a>
\nAdding your own CSS will give the page styling, so in the framework CSS file I’ve added styles to enlarge the heading div, make it bold and give it a gray color. The wrapper got a centered look and a round padding. I also changed the paragraph text style to italic and gave it a green color. As you can notice, the image only has a soft shadow added.<\/p>\n![\"Editing](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/08\/boilerplate4.jpg\")
<\/a>![\"Final](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/08\/boilerplate5.jpg\")
<\/a>7. Conclusion<\/h2>\n
8. Download<\/h2>\n