Skip to content

Commit 059fe2a

Browse files
kaisermannkaisermann
committed
BEM -> BEMV
1 parent 80a8505 commit 059fe2a

File tree

8 files changed

+2076
-203
lines changed

8 files changed

+2076
-203
lines changed

‎README.md

+10-16
Original file line numberDiff line numberDiff line change
@@ -2,31 +2,25 @@
22

33
Simple CSS only, one element, 8 Bit-like comic bubble. Based on [http://wigflip.com/ds/](http://wigflip.com/ds/).
44

5-
6-
But Christian, **3kb** for only those simple balloons?
7-
8-
> Well, on average, a transparent .png from **wigflip** will weight around 4/5kb depending on its text. A gif with background will weight something like 1kb. If you do happen to need more than one of those bubbles, you can quickly get more than 3kb worth of images. That's more http requests for you.
9-
10-
> And come on, things done with CSS only are way more cooler. PS: you can always remove what you don't need :)
11-
125
## Classes
136
* **.cbbl**
147
* Obligatory. Defaults to left side balloon.
15-
* **.cbbl--right**
8+
* **.cbbl.-right**
169
* Optional. Makes the bubble tail go to the right side.
17-
* **.cbbl--up**
18-
* Optional. Makes the bubble tail come from the balloon's upper side. Works with _.cbbl--right_
19-
* **.cbbl--hover**
10+
* **.cbbl.-up**
11+
* Optional. Makes the bubble tail come from the balloon's upper side. Works with _.-right_
12+
* **.cbbl.-hover**
2013
* Optional. Indicates that the bubble will change colors on mouse hover.
21-
* **.cbbl--btn**
14+
* **.cbbl.-btn**
2215
* Optional. Indicates that the bubble will be used as a button (with click transform animation).
23-
* **.cbbl--no-selection**
16+
* **.cbbl.-no-selection**
2417
* Optional. Makes the bubble unselectable by the user's cursor.
2518

2619
## Installation
2720

28-
* _bower install --save comicbubbles_
29-
* Manual copy :)
21+
* `bower install --save comicbubbles`
22+
* `npm install comicbubbles`
23+
* `yarn add comicbubbles`
3024

3125
## Examples & some usages
3226

@@ -41,7 +35,7 @@ You can see some examples on codepen: http://codepen.io/chrispif/pen/xZWVrG
4135
````
4236
<div class="cbbl"> Hello </div>
4337
<br>
44-
<div class="cbbl cbbl--right"> How are you? </div>
38+
<div class="cbbl -right"> How are you? </div>
4539
````
4640
Will produce:
4741

‎dist/cbbl.css

+26-35
Original file line numberDiff line numberDiff line change
@@ -18,12 +18,15 @@
1818
position: absolute;
1919
transition: all 0.3s ease;
2020
box-sizing: border-box;
21+
left: 20%;
2122
}
2223
.cbbl::after {
2324
background: #fff;
2425
width: 9px;
2526
height: 3px;
2627
bottom: -14px;
28+
margin-left: 6px;
29+
box-shadow: -3px 0 #000, 3px 0 #000, 3px 3px #fff, 0px 3px #000, 6px 3px #000, 9px 3px #aaa, 3px 6px #000, 6px 6px #000, 9px 6px #aaa, 6px 9px #aaa;
2730
}
2831
.cbbl::before {
2932
width: 15px;
@@ -33,85 +36,73 @@
3336
border-left: 3px solid #000;
3437
border-right: 3px solid #000;
3538
}
36-
.cbbl--hover:hover {
39+
.cbbl.-hover:hover {
3740
background-color: #eee;
3841
color: #000;
3942
box-shadow: 0 -3px #eee, 0 -6px #7bc8a4, 3px 0 #eee, 3px -3px #7bc8a4, 6px 0 #7bc8a4, 0 3px #eee, 0 6px #7bc8a4, -3px 0 #eee, -3px 3px #7bc8a4, -6px 0 #7bc8a4, -3px -3px #7bc8a4, 3px 3px #7bc8a4, 3px 9px #cae9db, 6px 6px #cae9db, 9px 3px #cae9db;
4043
}
41-
.cbbl--hover:hover::before {
44+
.cbbl.-hover:hover::before {
4245
background: #eee;
4346
border-left-color: #7bc8a4;
4447
border-right-color: #7bc8a4;
4548
}
46-
.cbbl--hover:hover::after {
47-
background: #eee;
49+
.cbbl.-hover:hover::after {
50+
box-shadow: -3px 0 #7bc8a4, 3px 0 #7bc8a4, 3px 3px #eee, 0px 3px #7bc8a4, 6px 3px #7bc8a4, 9px 3px #cae9db, 3px 6px #7bc8a4, 6px 6px #7bc8a4, 9px 6px #cae9db, 6px 9px #cae9db, 9px 9px #7bc8a4;
4851
}
49-
.cbbl--hover:hover.cbbl--btn input[type=submit],
50-
.cbbl--hover:hover.cbbl--btn button,
51-
.cbbl--hover:hover.cbbl--btn a {
52+
.cbbl.-hover:hover.-control input[type=submit],
53+
.cbbl.-hover:hover.-control button,
54+
.cbbl.-hover:hover.-control a {
5255
color: #000;
5356
}
54-
.cbbl::before,
55-
.cbbl::after {
56-
left: 20%;
57-
}
58-
.cbbl::after {
59-
margin-left: 6px;
60-
box-shadow: -3px 0 #000, 3px 0 #000, 3px 3px #fff, 0px 3px #000, 6px 3px #000, 9px 3px #aaa, 3px 6px #000, 6px 6px #000, 9px 6px #aaa, 6px 9px #aaa;
61-
}
62-
.cbbl.cbbl--hover:hover::after {
63-
box-shadow: -3px 0 #7bc8a4, 3px 0 #7bc8a4, 3px 3px #eee, 0px 3px #7bc8a4, 6px 3px #7bc8a4, 9px 3px #cae9db, 3px 6px #7bc8a4, 6px 6px #7bc8a4, 9px 6px #cae9db, 6px 9px #cae9db, 9px 9px #7bc8a4;
64-
}
65-
.cbbl--up {
57+
.cbbl.-up {
6658
margin: 29px 9px 10px 6px;
6759
}
68-
.cbbl--up::before {
60+
.cbbl.-up::before {
6961
top: -11px;
7062
bottom: auto;
7163
}
72-
.cbbl--up::after {
64+
.cbbl.-up::after {
7365
top: -14px;
7466
bottom: auto;
7567
box-shadow: -3px 0 #000, 3px 0 #000, 3px -3px #fff, 0px -3px #000, 6px -3px #000, 3px -6px #000, 6px -6px #000;
7668
}
77-
.cbbl--up.cbbl--hover:hover::after {
69+
.cbbl.-up.-hover:hover::after {
7870
box-shadow: -3px 0 #7bc8a4, 3px 0 #7bc8a4, 3px -3px #eee, 0px -3px #7bc8a4, 6px -3px #7bc8a4, 3px -6px #7bc8a4, 6px -6px #7bc8a4;
7971
}
80-
.cbbl--up.cbbl--right::after {
72+
.cbbl.-up.-right::after {
8173
box-shadow: 3px 0 #000, -3px 0 #000, -3px -3px #fff, 0px -3px #000, -6px -3px #000, -3px -6px #000, -6px -6px #000;
8274
}
83-
.cbbl--up.cbbl--right.cbbl--hover:hover::after {
75+
.cbbl.-up.-right.-hover:hover::after {
8476
box-shadow: 3px 0 #7bc8a4, -3px 0 #7bc8a4, -3px -3px #eee, 0px -3px #7bc8a4, -6px -3px #7bc8a4, -3px -6px #7bc8a4, -6px -6px #7bc8a4;
8577
}
86-
.cbbl--right::before,
87-
.cbbl--right::after {
78+
.cbbl.-right::before,
79+
.cbbl.-right::after {
8880
left: auto;
8981
right: 20%;
9082
}
91-
.cbbl--right::after {
83+
.cbbl.-right::after {
9284
margin-left: 0;
9385
margin-right: 6px;
9486
box-shadow: 3px 0 #000, -3px 0 #000, -3px 3px #fff, 0px 3px #000, -6px 3px #000, -3px 6px #000, -6px 6px #000, -3px 9px #aaa, 0 6px #aaa, 3px 3px #aaa, 6px 0px #aaa;
9587
}
96-
.cbbl--right.cbbl--hover:hover::after {
88+
.cbbl.-right.-hover:hover::after {
9789
box-shadow: 3px 0 #7bc8a4, -3px 0 #7bc8a4, -3px 3px #eee, 0px 3px #7bc8a4, -6px 3px #7bc8a4, -3px 6px #7bc8a4, -6px 6px #7bc8a4, -3px 9px #cae9db, 0 6px #cae9db, 3px 3px #cae9db, 6px 0px #cae9db;
9890
}
99-
.cbbl--no-selection {
91+
.cbbl.-no-selection {
10092
-webkit-user-select: none;
10193
-moz-user-select: none;
10294
-ms-user-select: none;
10395
user-select: none;
10496
}
105-
.cbbl--btn {
97+
.cbbl.-control {
10698
cursor: pointer;
10799
}
108-
.cbbl--btn input[type=submit],
109-
.cbbl--btn button,
110-
.cbbl--btn a {
100+
.cbbl.-control input[type=submit],
101+
.cbbl.-control button,
102+
.cbbl.-control a {
111103
cursor: pointer;
112104
transition: color 0.3s ease;
113105
}
114-
.cbbl--btn:active {
115-
-webkit-transform: scale(0.95);
106+
.cbbl.-control:active {
116107
transform: scale(0.95);
117108
}

‎dist/cbbl.min.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎index.html

+16-16
Original file line numberDiff line numberDiff line change
@@ -26,69 +26,69 @@ <h1>CSS Comic Bubbles</h1>
2626
<div class="inner">
2727

2828
<div class="inner__row text--left">
29-
<span class="inner__title">.text--left > .cbbl</span>
29+
<span class="inner__title">.cbbl</span>
3030
<div class="cbbl">
3131
Hello
3232
</div>
3333
<br>
34-
<div class="cbbl cbbl--right">
34+
<div class="cbbl -right">
3535
How are you?
3636
</div>
3737
</div>
3838

3939
<div class="inner__row text--right">
4040
<span class="inner__title">
41-
.text--right > .cbbl--right
41+
.cbbl.-right
4242
</span>
43-
<div class="cbbl cbbl--right">
43+
<div class="cbbl -right">
4444
To the right 1 2 3...
4545
</div>
4646
</div>
4747

4848
<div class="inner__row text--right">
49-
<span class="inner__title">.text--right > .cbbl--up</span>
50-
<div class="cbbl cbbl--up">
49+
<span class="inner__title">.cbbl.-up</span>
50+
<div class="cbbl -up">
5151
From the
5252
</div>
5353
<br>
5454
<br>
55-
<span class="inner__title">.text--right > cbbl--right.cbbl--up</span>
56-
<div class="cbbl cbbl--right cbbl--up">
55+
<span class="inner__title">.cbbl.-right.-up</span>
56+
<div class="cbbl -right -up">
5757
top
5858
</div>
5959
</div>
6060

6161
<div class="inner__row text--left">
62-
<span class="inner__title">.cbbl<br>.cbbl--btn > input</span>
62+
<span class="inner__title">.cbbl.-control > input</span>
6363
<div class="cbbl">
6464
<input type="email" placeholder="Please type your email">
6565
</div>
6666
</div>
6767

6868
<div class="inner__row">
69-
<span class="inner__title">.cbbl<br>.cbbl--hover</span>
69+
<span class="inner__title">.cbbl.-hover</span>
7070
<span class="inner__desc">Come on, hover it!</span>
71-
<div class="cbbl cbbl cbbl--right cbbl--hover">
71+
<div class="cbbl cbbl -right -hover">
7272
Hover bubble
7373
</div>
7474
</div>
7575

7676
<div class="inner__row text--right">
77-
<span class="inner__title">.cbbl<br>.cbbl--up<br>.cbbl--btn > button</span>
78-
<div class="cbbl cbbl--right cbbl--up cbbl--hover cbbl--btn">
77+
<span class="inner__title">.cbbl.-up.-control > button</span>
78+
<div class="cbbl -right -up -hover -control">
7979
<button>Click me</button>
8080
</div>
8181
</div>
8282

8383
<div class="inner__row">
84-
<span class="inner__title">.cbbl<br>.cbbl--hover<br>.cbbl--up<br>.cbbl--no-selection</span>
84+
<span class="inner__title">.cbbl.-hover.-up.-no-selection</span>
8585
<span class="inner__desc">Come on, select it!</span>
86-
<div class="cbbl cbbl cbbl--hover cbbl--up cbbl--no-selection">
86+
<div class="cbbl -hover -up -no-selection">
8787
PLEASE, SELECT ME
8888
</div>
8989
</div>
9090
</div>
9191
</div>
9292
<a href="https://github.com/kaisermann/comicbubbles"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
9393
</body>
94-
</html>
94+
</html>

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"name": "comicBubbles",
33
"version": "1.1.0",
44
"description": "CSS only simple 8bit-like comic balloons",
5-
"main": "dist/cbubble.min.css",
5+
"main": "dist/cbbl.min.css",
66
"repository": {
77
"type": "git",
88
"url": "https://github.com/kaisermann/comicbubbles.git"

0 commit comments

Comments
 (0)