Inspired by DiagnostiCSS & Revenge.css, a library to show you some malformed HTML.
CSS
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist
docs
src
.editorconfig
.gitignore
.npmignore
.travis.yml
CONTRIBUTING.md
Gemfile
LICENSE.md
OWNERS.md
README.md
_config.yml
bower.json
browserlist
component.json
package.json

README.md

HTML Verify

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

NPM version NPM downloads Build Status

Browser Support

  • Google Chrome 28+
  • Mozilla Firefox 22+
  • Apple Safari 5.1+
  • Opera 16+
  • Internet Explorer 9+

Installation

  • via NPM: npm install --save-dev html-verify
  • via Component: component install chrisopedia/html-verify
  • via Bower: bower install --save-dev html-verify

As a Git Submodule

  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" />

Manual Download

Latest

Usage

Modes

  • 0 => turn off
  • 1 => show only errors
  • 2 => show errors and warnings
  • 3 => show errors, warnings and info

Using SCSS

@import '/path/to/html-verify/src/html-verify.level{1 | 2 | 3}';

Customize It

// 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);

Default Colors

$verify-colors: (
	error: rgb(172, 65, 66),
	warning: rgb(244, 191, 117),
	info: rgb(106, 159, 181)
);
$verify-message-color: rgb(255,255,255);

Contribute

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

Documentation

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:

Requirements

Setup

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

Acknowledgements

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

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