useful.js: JavaScript examples, too useful not to share.

HTML to CSS Converter

This converter parses the structure of any given piece of HTML and generates a rough empty stylesheet from it.

Insert HTML in here:

<section id="example">
	<header>
		<h1>Lorem Ipsum</h1>
		<input type="text" name="keyword"/>
	</header>
	<article>
		<p>Lorem ipsum dolor sit amet.</p>
	</article>
	<aside class="banner banner-left">
		<p>Lorem ipsum dolor sit amet.</p>
		<p><a href="#" class="cta">Dolor</a></p>
	</aside>
	<aside class="banner banner-right">
		<p>Lorem ipsum dolor sit amet.</p>
		<p><a href="#" class="cta">Dolor</a></p>
	</aside>
	<div class="row">
		<div class="col-sm-4 col-md-3 col-offset-sm-1 left">left</div>
		<div class="col-sm-8 col-md-9 right">right</div>
	</div>
	<footer>
		<menu id="sitemap" class="map map-open">
			<li class="map-item"><a class="map-lorem map-item-link" href="./useful-htmltocss/dist/useful-htmltocss/dist/">Lorem</a></li>
			<li class="map-item"><a class="map-ipsum map-item-link active" href="./useful-htmltocss/dist/useful-htmltocss/dist/">Ipsum</a></li>
			<li class="map-item"><a class="map-dolor map-item-link" href="./useful-htmltocss/dist/useful-htmltocss/dist/">Dolor</a></li>
			<li class="map-item"><a class="map-sit map-item-link" href="./useful-htmltocss/dist/useful-htmltocss/dist/">Sit</a></li>
			<li class="map-item"><a class="map-amet map-item-link" href="./useful-htmltocss/dist/useful-htmltocss/dist/">Amet</a></li>
		</menu>
	</footer>
</section>

Set your preferences here: Format as SASS/LESS Reverse class names Split class names Sort class names Reduce depth Preserve container class name Reset at ID's Ignore ID's
Indentation Ignore

Copy CSS from here: