node package manager

html-verify

A Sass/CSS library to point out some bad or malformed HTML.

HTML Verify

A scss/CSS library to point out some bad or malformed HTML.

  • Google Chrome 28+
  • Mozilla Firefox 22+
  • Apple Safari 5.1+
  • Opera 16+
  • Internet Explorer 9+
  • via NPM: npm install --save-dev html-verify
  • via Component: component install chrisopedia/html-verify
  • via Bower: bower install --save-dev html-verify
  1. git submodule add https://github.com/chrisopedia/html-verify.git path/to/ui_directory
  2. Add link: <link rel="stylesheet" href="/path/to/html-verify/dist/html-verify.level{1 | 2 | 3}.css" />

Latest

  • 0 => turn off
  • 1 => show only errors
  • 2 => show errors and warnings
  • 3 => show errors, warnings and info
@import '/path/to/html-verify/src/html-verify.level{1 | 2 | 3}';
// Configure the colors for the outlines/background of tips 
$verify-colors: (
    error: red,
    warning: yellow,
    info: blue
);
// Configure the color of the text 
$verify-message-color: white;
 
// include the mixin 
@import '/path/to/html-verify/src/html-verify';
 
// call the mixin with the mode passed in 
// defaults to 0 (turned off) 
@include html-verify(3);
$verify-colors: (
    error: rgb(172, 65, 66),
    warning: rgb(244, 191, 117),
    info: rgb(106, 159, 181)
);
$verify-message-color: rgb(255,255,255);

Discover how you can contribute by heading on over to the CONTRIBUTING.md file.

Documentation is built as a Jekyll-based site that shows you examples of all of the ways poor code will trigger HTML Verify. In order to get it running, you'll need the following:

  1. npm install
  2. npm start
  3. Open 127.0.0.1:<port>

HTML Verify is a project by Newton. Inspired by a few projects:

  1. Semantic CSS with Intelligent Selectors
  2. DiagnostiCSS
  3. Revenge CSS Bookmarklet