htmllinted the demo files - fixed errors

This commit is contained in:
Kevin Ross 2015-11-06 17:41:39 -06:00
parent 404f54a5c2
commit 80ea586b74
5 changed files with 314 additions and 302 deletions

View File

@ -5,6 +5,30 @@ module.exports = function (grunt) {
grunt.initConfig({
htmllint: {
//options: {
// stoponerror: false,
// relaxerror: []
//},
//files: ['index.html', 'bootstrap-elements.html']
all: {
options: {
ignore: '“&” did not start a character reference. (“&” probably should have been escaped as “&”.)'
},
src: ["*.html"]
}
},
// Make sure we are structurally correct for bootstrap
bootlint: {
options: {
stoponerror: false,
relaxerror: []
},
files: ['index.html', 'bootstrap-elements.html']
},
// Convert from less to sass
lessToSass: {
convert: {
@ -320,6 +344,10 @@ module.exports = function (grunt) {
}
},
watch: {
html: {
files: ["index.html", "bootstrap-elements.html"],
tasks: ["htmllint", "bootlint"]
},
js: {
files: ["Gruntfile.js", "scripts/**/*.js", "template/**/*.js"],
tasks: ["newer:jshint:all", "material:js"]
@ -342,6 +370,7 @@ module.exports = function (grunt) {
},
files: [
"index.html",
"bootstrap-elements.html",
"dist/js/**/*.js",
"dist/css/**/*.css",
"demo/**/*.{png,jpg,jpeg,gif,webp,svg}"
@ -394,6 +423,8 @@ module.exports = function (grunt) {
]);
grunt.registerTask("material:less", [
"htmllint",
"bootlint",
"less:material",
"less:materialfullpalette",
"less:roboto",

View File

@ -1960,11 +1960,11 @@
<form class="bs-component">
<div class="form-group">
<input class="form-control floating-label" id="focusedInput" type="text" placeholder="Write something to make the label float">
<input class="form-control floating-label" id="focusedInput1" type="text" placeholder="Write something to make the label float">
</div>
<div class="form-group">
<input class="form-control floating-label" id="focusedInput" type="text" placeholder="Focus to show the hint" data-hint="You should really write something here">
<input class="form-control floating-label" id="focusedInput2" type="text" placeholder="Focus to show the hint" data-hint="You should really write something here">
</div>
<div class="form-group">
@ -2651,7 +2651,7 @@
<div class="row">
<div class="col-lg-12">
<div class="page-header">
<h1 id="tables">Dialogs</h1>
<h1 id="dialogs">Dialogs</h1>
</div>
</div>
</div>

254
index.css
View File

@ -95,7 +95,7 @@
opacity: 1;
}
#opensource {
.opensource {
color: rgba(0, 0, 0, 0.62);
position: fixed;
margin-top: 50px;
@ -106,3 +106,255 @@
#source-modal h4 {
color: black;
}
#paypal .btn {
padding: 5px 30px 6px 30px;
}
#paypal input {
background: transparent;
border: 0;
}
.cbwrapper div {
display: none;
}
.cbwrapper div:nth-child(2) {
display: block;
}
#carbonads, #fakecb {
border: 1px solid #d5d5d5;
font-size: 11px;
line-height: 15px;
overflow: hidden;
width: 340px;
padding: 20px;
margin: auto;
height: 142px;
border-radius: 2px;
}
#carbonads .carbon-img {
float: left;
display: block;
}
#carbonads .carbon-text, #carbonads .carbon-poweredby {
float: left;
width: 150px;
padding: 0 10px 10px 10px;
}
#carbonads .carbon-text:hover, #carbonads .carbon-poweredby:hover {
text-decoration: none;
}
#carbonads .carbon-poweredby {
color: #9D9D9D;
}
#checkbox .sample1 label {
font-weight: bold;
}
#checkbox .hint {
padding-left: 45px;
padding-top: 20px;
font-weight: 400;
}
#checkbox .sample1 {
padding-bottom: 20px;
}
#checkbox h2 {
font-size: 18.7199993133545px;
font-weight: bold;
margin-bottom: 30px;
}
#checkbox .sample2 {
width: 300px;
clear: both;
font-weight: 400;
}
#checkbox .sample2 {
padding: 10px 0;
}
#checkbox .sample2 .text {
display: inline-block;
}
#checkbox .sample2 .checkbox {
float: right;
margin: 0;
}
/*#progress-bar h2 {*/
/*font-size: 18.7199993133545px;*/
/*font-weight: bold;*/
/*margin-bottom: 30px;*/
/*}*/
/*#dialog h2 {*/
/*padding: 14px;*/
/*margin: 0;*/
/*font-size: 16px;*/
/*font-weight: 400;*/
/*}*/
/*#shadow h2 {*/
/*padding: 14px;*/
/*margin: 0;*/
/*font-size: 16px;*/
/*font-weight: 400;*/
/*}*/
#shadow .sample {
width: 100px;
height: 100px;
margin: 16px;
padding: 16px;
display: inline-block;
}
#shadow-sample2 {
display: inline-block;
width: 100px;
height: 100px;
margin: 16px;
padding: 16px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
#shadow-sample3 {
display: inline-block;
width: 100px;
height: 100px;
margin: 16px;
padding: 16px;
border-radius: 100px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
/*#radio-button h2 {*/
/*font-size: 18.7199993133545px;*/
/*font-weight: bold;*/
/*margin-bottom: 30px;*/
/*margin-top: 50px;*/
/*}*/
#radio-button .radio {
margin: 20px 10px;
}
/*#input h2 {*/
/*padding: 14px;*/
/*font-size: 16px;*/
/*font-weight: 400;*/
/*}*/
#input .inputs {
width: 80%;
}
#input .form-group {
margin: 30px 0;
}
#slider .sample1, #slider .sample2 {
padding: 20px 0;
background-color: #f0f0f0;
margin-bottom: 20px;
}
#slider .sample2 {
height: 150px;
}
#slider .sample2 .slider {
margin: 0 40px;
}
/*#slider h2 {*/
/*padding: 14px;*/
/*margin: 0;*/
/*font-size: 16px;*/
/*font-weight: 400;*/
/*}*/
#slider .slider {
margin: 15px;
}
/*#button h2 {*/
/*padding: 14px;*/
/*margin: 0;*/
/*font-size: 16px;*/
/*font-weight: 400;*/
/*}*/
#floating-action-button .btn {
margin: 20px;
}
/*#floating-action-button h2 {*/
/*padding: 14px;*/
/*margin: 0;*/
/*font-size: 16px;*/
/*font-weight: 400;*/
/*}*/
/*#dropdown h2 {*/
/*padding: 14px;*/
/*margin: 0;*/
/*font-size: 16px;*/
/*font-weight: 400;*/
/*}*/
#dropdown .dropdown {
font-size: 30px;
padding: 20px;
}
/*#dropdown-menu h2 {*/
/*padding: 14px;*/
/*margin: 0;*/
/*font-size: 16px;*/
/*font-weight: 400;*/
/*}*/
#dropdown-menu .sample {
width: 200px;
}
#dropdown-menu .form-group {
margin: 30px 0;
}
/*#toggle-button h2 {*/
/*font-size: 18.7199993133545px;*/
/*font-weight: bold;*/
/*margin-bottom: 30px;*/
/*margin-top: 50px;*/
/*}*/
#toggle-button .togglebutton label {
margin: 20px 10px;
width: 200px;
}
#toggle-button .togglebutton .toggle {
float: right;
}

View File

@ -99,16 +99,6 @@
<input type="submit" value="DONATE WITH PAYPAL" name="submit">
</div>
</form>
<style>
#paypal .btn {
padding: 5px 30px 6px 30px;
}
#paypal input {
background: transparent;
border: 0;
}
</style>
<p>Thanks to all the people that donate me weekly on Gratipay and all the ones which has donated on PayPal! You are great guys!</p>
<br>
@ -120,54 +110,10 @@
<br>
<div class="cbwrapper">
<script async
type="text/javascript"
src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=fezvrastagithubiobootstrapmateri"
id="_carbonads_js">
</script>
<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=fezvrastagithubiobootstrapmateri" id="_carbonads_js"></script>
<div id="fakecb">Seems like you are using AdBlock to hide banners... Carbon ADS are quite nice and don't take much space, you may consider disabling it on this website.<br>This is the only AD on the entire website.<br><br>Thanks!
</div>
</div>
<style>
.cbwrapper div {
display: none;
}
.cbwrapper div:nth-child(2) {
display: block;
}
#carbonads, #fakecb {
border: 1px solid #d5d5d5;
font-size: 11px;
line-height: 15px;
overflow: hidden;
width: 340px;
padding: 20px;
margin: auto;
height: 142px;
border-radius: 2px;
}
#carbonads .carbon-img {
float: left;
display: block;
}
#carbonads .carbon-text, #carbonads .carbon-poweredby {
float: left;
width: 150px;
padding: 0 10px 10px 10px;
}
#carbonads .carbon-text:hover, #carbonads .carbon-poweredby:hover {
text-decoration: none;
}
#carbonads .carbon-poweredby {
color: #9D9D9D;
}
</style>
<br>
@ -213,7 +159,7 @@
<h4 class="list-group-item-heading">Bootstrap v3.0+</h4>
<p class="list-group-item-text">This theme extends, styles, and modifies Bootstrap's elements and styles. Without Bootstrap this project will not display correctly. To install Bootstrap please go to
<a href="http://getbootstrap.com/getting-started/" alt="Bootstrap Docs">Get Bootstrap</a></p>
<a href="http://getbootstrap.com/getting-started/">Get Bootstrap</a></p>
</div>
</div>
<div class="list-group-separator"></div>
@ -327,48 +273,6 @@
</label>
</div>
</div>
<!-- Custom page style -->
<style>
#checkbox .sample1 label {
font-weight: bold;
}
#checkbox .hint {
padding-left: 45px;
padding-top: 20px;
font-weight: 400;
}
#checkbox .sample1 {
padding-bottom: 20px;
}
#checkbox h2 {
font-size: 18.7199993133545px;
font-weight: bold;
margin-bottom: 30px;
}
#checkbox .sample2 {
width: 300px;
clear: both;
font-weight: 400;
}
#checkbox .sample2 {
padding: 10px 0;
}
#checkbox .sample2 .text {
display: inline-block;
}
#checkbox .sample2 .checkbox {
float: right;
margin: 0;
}
</style>
</div>
<div class="well page" id="radio-button">
<h1 class="header">Checkbox</h1>
@ -419,19 +323,6 @@
</label>
</div>
</div>
<style>
#radio-button h2 {
font-size: 18.7199993133545px;
font-weight: bold;
margin-bottom: 30px;
margin-top: 50px;
}
#radio-button .radio {
margin: 20px 10px;
}
</style>
</div>
<div class="well page" id="toggle-button">
@ -464,24 +355,6 @@
<input type="checkbox" checked>
</label>
</div>
<style>
#toggle-button h2 {
font-size: 18.7199993133545px;
font-weight: bold;
margin-bottom: 30px;
margin-top: 50px;
}
#toggle-button .togglebutton label {
margin: 20px 10px;
width: 200px;
}
#toggle-button .togglebutton .toggle {
float: right;
}
</style>
</div>
<!--
Inputs
@ -490,11 +363,14 @@
<h1 class="header">Input</h1>
<div class="inputs">
<h2>Input <small>default sizing</small></h2>
<h2>Input
<small>default sizing</small>
</h2>
<div class="form-group">
<label for="i2" class="control-label">Static label</label>
<input type="email" class="form-control" id="i2" placeholder="Placeholder text">
<p class="help-block hint">This is a hint as a <code>p.help-block.hint</code></p>
</div>
@ -504,7 +380,9 @@
<span class="help-block hint">This is a hint as a <code>span.help-block.hint</code></span>
</div>
<h2>Input - floating labels <small>form-group sizing</small></h2>
<h2>Input - floating labels
<small>form-group sizing</small>
</h2>
<div class="form-group form-group-sm has-error">
<label for="i4" class="control-label floating-label">Floating label form-group-sm has-error</label>
<input type="email" class="form-control input-sm" id="i4">
@ -517,21 +395,27 @@
<span class="help-block hint">This is a hint</span>
</div>
<h2>Input - static labels <small>form-group sizing</small></h2>
<h2>Input - static labels
<small>form-group sizing</small>
</h2>
<div class="form-group form-group-sm has-error">
<label for="i1" class="control-label">Static label form-group-sm has-error</label>
<input type="email" class="form-control" id="i1" placeholder="Placeholder text">
<p class="help-block hint">This is a hint as a <code>p.help-block.hint</code></p>
</div>
<div class="form-group form-group-lg">
<label for="i3" class="control-label">Static label form-group-lg</label>
<input type="email" class="form-control" id="i3" placeholder="Placeholder text">
<p class="help-block hint">This is a hint as a <code>p.help-block.hint</code></p>
</div>
<h2>Input - floating labels <small>input sizing</small></h2>
<h2>Input - floating labels
<small>input sizing</small>
</h2>
<div class="form-group form-group-lg">
<label for="i7" class="control-label floating-label">Floating label input-sm</label>
<input type="email" class="form-control input-sm" id="i7">
@ -593,22 +477,6 @@
<div class="form-group has-error">
<input type="text" class="form-control form-control-success floating-label" placeholder="floating label">
</div>
<style>
/*#input h2 {*/
/*padding: 14px;*/
/*font-size: 16px;*/
/*font-weight: 400;*/
/*}*/
#input .inputs {
width: 80%;
}
#input .form-group {
margin: 30px 0;
}
</style>
</div>
</div>
<div class="well page" id="navbar">
@ -863,15 +731,6 @@
<div class="progress-bar progress-bar-warning" style="width: 20%"></div>
<div class="progress-bar progress-bar-danger" style="width: 10%"></div>
</div>
<!--<style>-->
<!--#progress-bar h2 {-->
<!--font-size: 18.7199993133545px;-->
<!--font-weight: bold;-->
<!--margin-bottom: 30px;-->
<!--}-->
<!--</style>-->
</div>
<div class="well page" id="slider">
<h1 class="header">Slider</h1>
@ -897,34 +756,6 @@
</div>
<p>Sliders are powered by <a href="http://refreshless.com/nouislider/" target="_blank">noUiSlider</a></p>
<style>
#slider .sample1, #slider .sample2 {
padding: 20px 0;
background-color: #f0f0f0;
margin-bottom: 20px;
}
#slider .sample2 {
height: 150px;
}
#slider .sample2 .slider {
margin: 0 40px;
}
/*#slider h2 {*/
/*padding: 14px;*/
/*margin: 0;*/
/*font-size: 16px;*/
/*font-weight: 400;*/
/*}*/
#slider .slider {
margin: 15px;
}
</style>
</div>
<div class="well page" id="material-colors">
<h1 class="header">Material Color Samples</h1>
@ -1337,16 +1168,6 @@
<button class="btn btn-primary btn-flat"><i class="mdi-navigation-check"></i> Ok</button>
<button class="btn btn-default btn-flat"><i class="mdi-navigation-close"></i> Cancel</button>
</div>
<style>
/*#button h2 {*/
/*padding: 14px;*/
/*margin: 0;*/
/*font-size: 16px;*/
/*font-weight: 400;*/
/*}*/
</style>
</div>
<div class="well page" id="floating-action-button">
<h1 class="header">Floating Action Button</h1>
@ -1361,62 +1182,20 @@
<i class="mdi-navigation-check"></i></button>
<button class="btn btn-fab btn-fab-mini btn-raised btn-material-lightyellow">
<i class="mdi-content-reply"></i></button>
<style>
#floating-action-button .btn {
margin: 20px;
}
/*#floating-action-button h2 {*/
/*padding: 14px;*/
/*margin: 0;*/
/*font-size: 16px;*/
/*font-weight: 400;*/
/*}*/
</style>
</div>
<div class="well page" id="dropdown">
<style>
/*#dropdown h2 {*/
/*padding: 14px;*/
/*margin: 0;*/
/*font-size: 16px;*/
/*font-weight: 400;*/
/*}*/
#dropdown .dropdown {
font-size: 30px;
padding: 20px;
}
</style>
<h1 class="header">Dropdown</h1>
<h2>Simple dropdown</h2>
<span class="dropdown"><i class="mdi-navigation-menu"></i></span>
</div>
<div class="well page" id="dropdown-menu">
<style>
/*#dropdown-menu h2 {*/
/*padding: 14px;*/
/*margin: 0;*/
/*font-size: 16px;*/
/*font-weight: 400;*/
/*}*/
#dropdown-menu .sample {
width: 200px;
}
#dropdown-menu .form-group {
margin: 30px 0;
}
</style>
<h1 class="header">Dropdown</h1>
<div class="sample">
<div class="form-group">
<select class="form-control" placeholder="Your favorite pastry">
<label for="s1">Your favorite pastry</label>
<select id="s1" class="form-control">
<option value="Apple fritter">Apple fritter</option>
<option value="Croissant">Croissant</option>
<option value="Donut">Donut</option>
@ -1431,7 +1210,8 @@
<br>
<div class="form-group">
<select class="form-control" disabled placeholder="Your favorite pastry">
<label for="s2">Your favorite pastry</label>
<select id="s2" class="form-control" disabled>
<option value="disabled">Disabled</option>
</select>
</div>
@ -1491,14 +1271,6 @@
</div>
</div>
</div>
<!--<style>-->
<!--#dialog h2 {-->
<!--padding: 14px;-->
<!--margin: 0;-->
<!--font-size: 16px;-->
<!--font-weight: 400;-->
<!--}-->
<!--</style>-->
</div>
<div class="well page" id="shadow">
<h1 class="header">Shadow</h1>
@ -1528,64 +1300,21 @@
$(this).attr("class", shadow);
});
</script>
<style>
/*#shadow h2 {*/
/*padding: 14px;*/
/*margin: 0;*/
/*font-size: 16px;*/
/*font-weight: 400;*/
/*}*/
#shadow .sample {
width: 100px;
height: 100px;
margin: 16px;
padding: 16px;
display: inline-block;
}
#shadow-sample2 {
display: inline-block;
width: 100px;
height: 100px;
margin: 16px;
padding: 16px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
#shadow-sample3 {
display: inline-block;
width: 100px;
height: 100px;
margin: 16px;
padding: 16px;
border-radius: 100px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
</style>
</div>
</div>
<div class="col-xs-2">
<button class="btn btn-fab btn-material-grey-200" id="opensource"><i class="mdi-action-open-in-new"></i>
<button class="btn btn-fab btn-material-grey-200 opensource"><i class="mdi-action-open-in-new"></i>
</button>
</div>
</div>
</div>
<div class="col-xs-2">
<button class="btn btn-fab btn-material-grey-200" id="opensource"><i class="mdi-action-open-in-new"></i>
<button class="btn btn-fab btn-material-grey-200 opensource"><i class="mdi-action-open-in-new"></i>
</button>
</div>
</div>
</div>
</div>
<!--</div>-->
<!--</div>-->
<div id="source-modal" class="modal fade" tabindex="-1">
<div class="modal-dialog modal-lg">

View File

@ -31,7 +31,6 @@
"jquery": ">=1.9.1"
},
"devDependencies": {
"bootstrap": ">=3.0",
"grunt": "^0.4.5",
"grunt-autoprefixer": "^1.0.1",
"grunt-contrib-clean": "^0.6.0",
@ -43,12 +42,13 @@
"grunt-contrib-sass": "^0.8.1",
"grunt-contrib-uglify": "^0.6.0",
"grunt-contrib-watch": "^0.6.1",
"grunt-bootlint": "latest",
"grunt-html": "latest",
"grunt-csswring": "^1.1.0",
"grunt-dependency-installer": "^0.2.0",
"grunt-exec": "^0.4.6",
"grunt-less-to-sass": "latest",
"grunt-newer": "^0.7.0",
"jquery": ">=1.9.1",
"jshint-stylish": "^1.0.0",
"load-grunt-tasks": "^0.6.0",
"spacejam": "^1.1.1"