Skip to content

Latest commit

 

History

History
104 lines (72 loc) · 2.8 KB

README.md

File metadata and controls

104 lines (72 loc) · 2.8 KB

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