Including File Contents Conditionally
Using a custom prompt and some logic in the template.js file, we’ve been able to conditionally include or exclude a file from our template’s root folder. But we can also use conditional logic in our template files.
The CSS property box-sizing: border-box is becoming quite popular. By default, an element’s width equals the actual width of the element plus the margin, padding, and borders. That can make it really tricky to do math. But with border-box, an element’s width is the defined width, and the padding, margins, and border do not affect the width. This makes doing columns a lot easier. However, it’s not supported everywhere. So let’s add a prompt to our configuration to let users decide if they want to use this rule. Add this new prompt to the template.js file, right below the prompt for the Gruntfile:
| scaffolding/html5template/template.js | |
| | { |
| | name: 'gruntfile', |
| | message: 'Do you want a Gruntfile?', |
| | default: 'Y/n', |
| | warning: 'If you want to be able to do cool stuff you should have one.' |
| | }, |
* | { |
* | name: 'borderbox', |
* | message: 'Do you want to use the border-box styling in CSS?', |
* | default: 'Y/n' |
* | }, |
Then, in the processing section, below the property evaluation for the Gruntfile, add this line to handle the border-box property:
| | props.gruntfile = /y/i.test(props.gruntfile); |
* | props.borderbox = /y/i.test(props.borderbox); |
Finally, add the following code to root/stylesheets/app.css:
| scaffolding/html5template/root/stylesheets/app.css | |
| | body{ |
| | margin: 0; |
| | padding: 0; |
| | } |
| | {% if (borderbox) {%} |
| | /* apply a natural box layout model to all elements |
| | * http://www.paulirish.com/2012/box-sizing-border-box-ftw/ |
| | */ |
| | *, *:before, *:after { |
| | -webkit-box-sizing: border-box; |
| | -moz-box-sizing: border-box; |
| | box-sizing: border-box; |
| | |
| | } |
| | {% } %} |
Our definition for border-box is wrapped in an if statement; it’ll be written only if the user sets the property! It’s that easy to do conditional content. Just watch out for the syntax of the if statement here—it’s very easy to forget one of the curly braces.
Running grunt-init html5template again now results in this additional question, and if we answer yes, our CSS file will have the border-box code. If we answer no, our CSS file will be blank.