This repository has been archived by the owner on May 6, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
executable file
·110 lines (108 loc) · 5.26 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>htmltocss.js: HTML to CSS Converter</title>
<style>
html { font-family:Sans-Serif; font-size:75%; height:100%; }
body { _height:100%; line-height:180%; margin:0; min-height:100%; padding:1%; }
.example { max-width:960px; margin:0 auto; padding:0; clear:both; }
.example > article, .example > aside { width:98%; padding:2%; }
.example-left > article, .example-left > aside { width:48%; padding:1%; float:left; }
.example-right > article, .example-right > aside { width:48%; padding:1%; float:right; }
</style>
</head>
<body>
<section class="example example-right">
<article>
<h2>HTML to CSS Converter</h2>
<p>This converter parses the structure of any given piece of HTML and generates a rough empty stylesheet from it.</p>
<p><a class="button downloadButton" href="http://github.com/WoollyMittens/useful-htmltocss" target="_blank">Download (GitHub)</a></p>
</article>
<aside>
<!-- Cut below this -->
<style>@import url("./css/htmltocss.css");</style>
<form class="html2scss" id="html2scss_form">
<label>
<b>Insert HTML in here:</b>
<textarea name="html_input">
<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/">Lorem</a></li>
<li class="map-item"><a class="map-ipsum map-item-link active" href="./useful-htmltocss/dist/">Ipsum</a></li>
<li class="map-item"><a class="map-dolor map-item-link" href="./useful-htmltocss/dist/">Dolor</a></li>
<li class="map-item"><a class="map-sit map-item-link" href="./useful-htmltocss/dist/">Sit</a></li>
<li class="map-item"><a class="map-amet map-item-link" href="./useful-htmltocss/dist/">Amet</a></li>
</menu>
</footer>
</section>
</textarea>
</label>
<fieldset>
<legend>Set your preferences here:</legend>
<label><input type="checkbox" name="scss_format" checked/> Format as SASS/LESS</label>
<label><input type="checkbox" name="reverse_class_names"/> Reverse class names</label>
<label><input type="checkbox" name="split_class_names" checked/> Split class names</label>
<label><input type="checkbox" name="sort_class_names"/> Sort class names</label>
<label><input type="checkbox" name="undeep_class_names"/> Reduce depth</label>
<label><input type="checkbox" name="preserved_root" checked/> Preserve container class name</label>
<label><input type="checkbox" name="reset_ids" checked/> Reset at ID's</label>
<label><input type="checkbox" name="ignore_ids"/> Ignore ID's</label>
<br/>
<label>Indentation <input type="text" name="indentation" value="\t" placeholder="\t for tabs"/></label>
<label>Ignore <input type="text" name="ignore_classes" value="^span-|^col-|^row$|^container$|^pull-|^first$|^last$" placeholder="regular expression"/></label>
</fieldset>
<label>
<b>Copy CSS from here:</b>
<textarea name="scss_output"></textarea>
</label>
<footer>
<button class="convert_html" type="submit">Convert</button>
</footer>
</form>
<script src="./js/htmltocss.js"></script>
<script>
//<!--
var htmltocss = new HtmltoCss({
'element': document.getElementById('html2scss_form'),
'htmlInput': document.querySelector('[name=html_input]'),
'scssOutput': document.querySelector('[name=scss_output]'),
'scssFormat': document.querySelector('[name=scss_format]'),
'reverseClassNames': document.querySelector('[name=reverse_class_names]'),
'splitClassNames': document.querySelector('[name=split_class_names]'),
'sortClassNames': document.querySelector('[name=sort_class_names]'),
'undeepClassNames': document.querySelector('[name=undeep_class_names]'),
'preservedRoot': document.querySelector('[name=preserved_root]'),
'resetIds': document.querySelector('[name=reset_ids]'),
'ignoreIds': document.querySelector('[name=ignore_ids]'),
'convertHtml': document.querySelector('[name=convert_html]'),
'indentation': document.querySelector('[name=indentation]'),
'ignoreClasses': document.querySelector('[name=ignore_classes]')
});
//-->
</script>
<!-- Cut above this -->
</aside>
</section>
</body>
</html>