forked from buseca/patternbolt
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
127 lines (107 loc) · 6.52 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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>PatternBolt</title>
<link href='http://fonts.googleapis.com/css?family=Volkhov:400,700|Rye' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/normalize.css" />
<link rel="stylesheet" href="css/f-css-grid.css" />
<link rel="stylesheet" href="PatternBolt/css/patternbolt.css" />
<link rel="stylesheet" href="css/demo.css" />
<script src="js/jquery.js"></script>
<script src="js/pb.js"></script>
<meta property="og:url" content="http://buseca.github.io/patternbolt/" />
<meta property="og:patternbolt" content="a SVG patterns library" />
<meta property="og:type" content="website" />
<meta property="og:title" content="PatternBolt" />
<meta property="og:image" content="http://buseca.github.io/patternbolt/img/thumb.png" />
<meta property="og:description" content="a fine selection of SVG pattern background, packed in a single CSS or SCSS file."/>
<meta property="twitter:url" content="http://buseca.github.io/patternbolt" />
<meta property="twitter:card" content="summary" />
<meta property="twitter:description" content="a fine selection of SVG pattern background, packed in a single CSS or SCSS file." />
<meta property="twitter:creator" content="@ruggeromotta" />
<meta property="twitter:title" content="PatternBolt - a SVG patterns library" />
<html itemscope itemtype="http://schema.org/Product">
<meta itemprop="name" content="PatternBolt">
<meta itemprop="description" content="a fine selection of SVG pattern background, packed in a single CSS or SCSS file.">
<meta itemprop="image" content="http://buseca.github.io/patternbolt/img/thumb.png">
</head>
<body>
<img src="http://buseca.github.io/patternbolt/img/thumb.png" alt="PatternBolt" style="display: none;">
<div class="demo pb-pattern cross-light-thin iniziale">
<h1>PatternBolt</h1>
<h2> Patternbolt is a fine selection of SVG pattern background,<br>packed in a single CSS or SCSS file.</h2>
<nav>
<button class="pb-pattern o-lines-bold dwnld"><a href="https://github.com/buseca/patternbolt/archive/gh-pages.zip">Download demo</a></button>
<button class="pb-pattern o-lines-bold git"><a href="https://github.com/buseca/patternbolt">Github repo</a></button>
<a href="https://twitter.com/ruggeromotta" class="twitter">@ruggeromotta</a>
</nav>
</div>
<div class="controls">
<div class="row">
<div class="columns large-4 medium-12">
<h3>select a pattern</h3>
<div id="buseca-1" class="pb-pattern buseca-1 tasto tasto-1"></div>
<div id="h-lines-bold" class="pb-pattern h-lines-bold tasto tasto-2"></div>
<div id="o-lines-bold" class="pb-pattern o-lines-bold tasto tasto-3"></div>
<div id="candy-light" class="pb-pattern candy-light tasto tasto-4"></div>
<div id="cross-medium" class="pb-pattern cross-medium tasto tasto-5"></div>
<code id="classe-pb">class="ted pb-pattern <span>o-lines-bold</span>"</code>
</div>
<div class="columns large-4 medium-6">
<h3>change the size</h3>
<input type="range" id="size-pattern" max="100" min="10" step="10" value="20">
<code id="bg-size-pb">.ted:after { background-size: 20px ;}</code>
</div>
<div class="columns large-4 medium-6">
<h3>select a color</h3>
<input id="color-pattern" type="color" value="#ffffff">
<code id="bg-color-pb">.ted { background-color: #ffffff ;}</code>
</div>
</div>
</div>
<div class="intro pb-pattern o-lines-bold">
<div class="inner-intro">
<!-- <h2>Background patterns just adding a class!</h2> -->
<p>PatternBolt is a fine selection of SVG pattern background, packed in a single CSS or SASS (scss) file, just include the css file in your project and add a class to your element to insert a pattern.
<br>
<br>
You can change color palette changing the background-color of your element and the pattern size changing the background-size of the ':after' element. As the pattern is added in a ':after' level, you still can manipulate your DOM element as you want, adding a bg-color, a bg-picture, a gradient, or both.
<br>
As they are vectors they never pixelate, not even on retina screens ;)
<br>
<br>
PS: The pattern selection still be under development, go to the bottom to see the showcase.
</p>
</div>
</div>
<div class="over-picture pb-pattern cross-bold">
<h3>SVG patterns over a picture:</h3>
<span class="sub">(you can use a pattern over images, with both the 'img' tag or the 'background-image' property)</span>
<div class="box-img pb-pattern o-lines-bold over-img">
<img src="img/shuttle.jpg" alt="">
</div>
</div>
<div id="showcase" class="showcase all-patterns">
<h3>All the available patterns:</h3>
<span class="sub">(and more coming soon)</span>
<div class="pb-pattern o-lines-light"><span>o-lines-light</span></div>
<div class="pb-pattern o-lines-medium"><span>o-lines-medium</span></div>
<div class="pb-pattern o-lines-bold"><span>o-lines-bold</span></div>
<div class="pb-pattern h-lines-light"><span>h-lines-light</span></div>
<div class="pb-pattern h-lines-medium"><span>h-lines-medium</span></div>
<div class="pb-pattern h-lines-bold"><span>h-lines-bold</span></div>
<div class="pb-pattern cross-light"><span>cross-light</span></div>
<div class="pb-pattern cross-medium"><span>cross-medium</span></div>
<div class="pb-pattern cross-bold"><span>cross-bold</span></div>
<div class="pb-pattern cross-light-thin"><span>cross-light-thin</span></div>
<div class="pb-pattern cross-medium-thin"><span>cross-medium-thin</span></div>
<div class="pb-pattern cross-bold-thin"><span>cross-bold-thin</span></div>
<div class="pb-pattern buseca-1"><span>buseca-1</span></div>
<div class="pb-pattern candy-light"><span>candy-light</span></div>
<div class="pb-pattern candy-medium"><span>candy-medium</span></div>
<div class="pb-pattern candy-bold"><span>candy-bold</span></div>
</div>
</body>
</html>