corysimmons / boy

:boy: A very opinionated, lightweight version of HTML5 Boilerplate with conditionally-loaded polyfills and an opinionated CSS reset for firing up web projects in no time.

⚠️ I gave the boy npm package name to someone else. Don't use it for this project anymore!

A very opinionated, lightweight, version of HTML5 Boilerplate with conditionally-loaded polyfills and an opinionated CSS reset for firing up web projects in no time.

---

Boy comes with a handy project launcher so you can spin up a Boy boilerplate with all the relevant files pulled freshly from this repo:

$ # npm i -g boy <-- THIS NO LONGER WORKS. I GAVE THIS NPM PACKAGE NAME TO SOMEONE ELSE
$ boy foo

Features

• A lightweight/2-space batch of HTML5 Boilerplate features
  • index.html (with all the fluff removed)
  • .editorconfig (modified to 2 spaces)
  • .htaccess
  • Harsher outdated browser warning (warns on IE9 instead of IE8)
• Minified and sourcemapped reeeset (opinionated Normalize.css for the real world)
• Polyfills for IE8 and below a la ❤️ ie-love
  • Conditionally loaded so only IE8 and below users will have to download it.
  • html5shiv (in the right place)
  • calc-polyfill
  • jQuery 1.x.x
  • Selectivizr 2
  • Respond.js
• Empty/valid package.json for quick npm install --save-devs
• .gitignore for Node, Bower, and Sass

Where's Modernizr?

Modernizr isn't included by default for a few reasons.

1. I very rarely actually use Modernizr.
2. You should create your own custom build of Modernizr and put it at the bottom of the document if possible. Read Paul Irish's comment on it.
3. @supports is going to be here soon.

boy's Issues

Consider removing html overflow-y: scroll

Pros

• Eliminates page bounce

Cons

• Conflicts with vertical grid version of Lost

Need to test in IE as well.

Calc polyfill don't work in Media queries

Hello,
You said : «With some polyfills (like the ones included in Boy) Lost works perfect in IE8 as well.»
I just tested Lost with Boy in IE8 using Browserstack.

• Media queries work well
• Media queries on pseudo-classes with Selectivizr work well
• Calc polyfill not in Media queries work well
  but...
• Calc polyfill in Media queries do NOT work

In Calc polyfill documentation they say : «However the polyfill uses window.matchMedia to test for media queries. If you wish to add support for media queries for IE8 include a polyfill before the calc-polyfill.»
Yet I see that you already include matchMedia() polyfill in lt-ie-9.min.js.
Do you have the solution?
Here's my test : http://catherinelamonde.com/boy/

.element {
background-color: green;
width: calc(99.99% * 1/4 - (30px - 30px * 1/4)); // work
}
@media (min-width: 1100px) {
section:nth-of-type(1) {
color: black;
}
.element {
background-color: blue;
width: calc(99.99% * 1/4 - (30px - 30px * 1/4)); // do not work
}
}

Remove html, body height/scroll rules

They jack stuff up.

Update milestone

Get rid of Jeet. Convert to updated H5BP installer npm package.

Installation:

• npm install -g boy

Usage:

• boy myproj

overflow-y to body

html caused double scrollbar in ie

Hide overflow-x better

peterramsing/lost#17

Consider adding transform polyfill

https://github.com/pbakaus/transformie

Unable to scroll vertically on webpage

I'm using Chrome Version 43.0.2357.132 m and after implementing this template, I am no longer able to scroll vertically using the scroll wheel.

After doing some research, I deduced that it was due to reset.css's overflow properties. I deleted those properties, and the webpage is again scrollable. However, if reset.css causes this to happen, then those specific overflow properties should be removed from Boy to prevent further issues.

html, body { height: 100%; }

Seems like this fixes some things. Investigate reasons why it might be a bad idea.

putting this here for later

@import 'normalize.css';

body,
.cf {
  *zoom: 1;
}
body:before,
.cf:before,
body:after,
.cf:after {
  content: '';
  display: table;
}
body:after,
.cf:after {
  clear: both;
}
*,
*:before,
*:after {
  *behavior: url("js/vendor/boxsizing.htc");
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
    height: 100%;
    overflow-y: scroll;
}
h1, figure, fieldset {
  margin: 0;
}
img,
video,
audio,
embed,
object,
input,
iframe {
  max-width: 100%;
}
.browsehappy {
  width: 100%;
  padding: 15px;
  background: #333;
  color: #fff;
  font-size: 13px;
  line-height: 21px;
  cursor: pointer;
  text-align: center;
}
.browsehappy a {
  color: #fff;
  font-weight: bold;
}
.browsehappy a:hover {
  text-decoration: none;
}

Boy on Bower?

Seems like it would fit. :)

Move overflow-y: scroll to body

Works better this way.

Go through normalize and override explicit margins

Things like figure aren't being picked up by the * { margin: 0; } reset.

Fix selectivizr link

Change <!--[if lt IE 10]> to <!--[if IE]>

See: https://github.com/corysimmons/boy/blob/master/index.html#L15-L21

IE 10 does not support conditional comments. It is therefore unnecessary to specify version number here since the condition is always true for all versions below IE 10 regardless of whether a version is specified.

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.

Add vw polyfill

https://github.com/saabi/vminpoly

Jade

Would be great if this was available in Jade.

For those of us who like to use "dry" syntax everywhere :) I'm working with Jeet using Stylus & Jade. Would be great to just throw in this boilerplate but I'll have to convert.

Just a suggestion !

Mistakes

1. Why support IE6 beyond its end-of-life period?
2. Why support IE7?
3. Why @import CSS? It's bad practice.

u a paedo m8?

Convert to npm package

Right now you can clonr corysimmons/boy, but it would be nicer to drop the .git and other files and simply install with boy new my-project-name.