quarantine.css is a customizable micro library that provides predictability in your styles when user-authored HTML is added to a page (most likely via CMS or a WYSIWYG). This pattern works especially well when using a reset, and when specificity is kept low in your application's CSS.
Include the stylesheet on your document's <head>
<link rel="stylesheet" href="quarantine.css">or import the SASS file.
@import "quarantine.scss";Isolate the area where user-authored content will appear with a <div> that has a class of quarantineContent.
<div class="quarantineContent">
<!-- unpredictable html renders here -->
</div>Edit styles within quarantine.css as needed to match your custom design.
Quarantine uses CSS that will render properly in modern browsers including the latest release of Chrome, Firefox, Safari, and Opera, as well as support for IE9+.
Download the Demo from GitHub