HTML5, CSS3 & JS Experiments

By Martin Ivanov

Lorem Ipsum Text Placeholder

Tired of copy-pasting the same lorem ipsum text anytime you start a new web project? If you are, you will definitely love <acidjs-xlipsum></acidjs-xlipsum>, because it will do this and much more. Utilizing the excellent Loripsum API, developed by twokings.nl, the tag will generate not only plain text, but also headers, links, lists - you name it. Just like this:

<acidjs-xlipsum></acidjs-xlipsum>
<acidjs-xlipsum paragraphs="7" length="short" show="link, ol, dl, headers, ul, bq, code, decorate"></acidjs-xlipsum>
<acidjs-xlipsum show="link, ol, ul, allcaps"></acidjs-xlipsum>
<acidjs-xlipsum show="plaintext, prude"></acidjs-xlipsum>

Demo

Default Settings - 5 Paragraphs of Medium Length

7 Short Paragraphs, Plus Headers, Links, Lists, Code, etc.

Paragraphs, Plus with Links, Lists in Capital Letters.

Plain Text in Prude Mode.

Register Mozilla's X-Tags

You need to do this just once, and add the directive either in the <head /> section or before the closing <body /> tag of the page.

<script src="AcidJs.XLipsum/lib/x-tag-components.js"></script>

Register the Component on the Page via HTML5 @import

You need to do this just once, and add the directive either in the <head /> section or before the closing <body /> tag of the page.

<link rel="import" href="AcidJs.XLipsum/classes/XLipsum.html" />

HTML Attributes

Check the blogpost or the documentation in the distrubution file (the download link is at the top of the page).

JavaScript API: Methods, Getters and Setters

Check the blogpost or the documentation in the distrubution file (the download link is at the top of the page).

Usage and Code Insight

            
<h3>Default Settings - 5 Paragraphs of Medium Length</h3>
<acidjs-xlipsum></acidjs-xlipsum>

<h3>7 Short Paragraphs, Plus Headers, Links, Lists, Code, etc.</h3>
<acidjs-xlipsum paragraphs="7" length="short" show="link, ol, dl, headers, ul, bq, code, decorate"></acidjs-xlipsum>

<h3>Paragraphs, Plus with Links, Lists in Capital Letters.</h3>
<acidjs-xlipsum show="link, ol, ul, allcaps"></acidjs-xlipsum>

<h3>Plain Text in Prude Mode.</h3>
<acidjs-xlipsum show="plaintext, prude"></acidjs-xlipsum>