Skip to content

Commit a1bd447

Browse files
satyam-sethsatyam-seth
authored
Merge pull request #22 from satyam-seth-learnings/bem
Add BEM demo
2 parents 9bd8f10 + 42eb42e commit a1bd447

File tree

5 files changed

+185
-0
lines changed

5 files changed

+185
-0
lines changed

‎BEM(Block, Element Modifier)/README.md‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
### Doc
2+
- [Official Doc](https://en.bem.info/)
3+
4+
### Blog
5+
6+
- [dev.to](https://dev.to/3zsforinsomnia/bem-best-practices-4j5c)
7+
- [css-tricks](https://css-tricks.com/bem-101/)
8+
9+
10+
### Youtube Videos
11+
12+
- [KevinPowell](https://www.youtube.com/watch?v=SLjHSVwXYq4)
13+
- [DesignCourse](https://www.youtube.com/watch?v=er1JEDuPbZQ)

‎BEM(Block, Element Modifier)/demo.html‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="stylesheet" href="style.css">
7+
<title>BEM(Block, Element Modifier)</title>
8+
</head>
9+
<body>
10+
11+
<h1>BEM(Block, Element Modifier) Demo</h1>
12+
13+
<div class="card">
14+
<span class="card__img"></span>
15+
<div class="card__content">
16+
<ul class="card__list">
17+
<li class="card__item card__item--active">Adobe XD</li>
18+
<li class="card__item">Figma</li>
19+
<li class="card__item">Sketch</li>
20+
</ul>
21+
<p class="card__desc">
22+
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quod sint eius libero ab maiores molestias, pariatur recusandae dolores modi sapiente accusantium cumque sequi, tempora odio illo exercitationem voluptate aperiam commodi.
23+
</p>
24+
<a href="#" class="card__link">Visit to link</a>
25+
</div>
26+
</div>
27+
28+
</body>
29+
</html>

‎BEM(Block, Element Modifier)/style.css‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
width: 100%;
9+
height: 100vh;
10+
display: grid;
11+
place-items: center;
12+
background-color: black;
13+
}
14+
15+
h1 {
16+
padding: 1rem;
17+
color: gray;
18+
background-color: #2c2c2e;
19+
border-radius: 1rem;
20+
border: 0.125rem solid greenyellow;
21+
}
22+
23+
.card {
24+
padding: 0 5rem;
25+
width: 500px;
26+
}
27+
.card__img {
28+
width: 100%;
29+
height: 150px;
30+
display: block;
31+
background-color: #e0466b;
32+
}
33+
.card__content {
34+
padding: 1.5rem;
35+
background-color: #1c1c1e;
36+
}
37+
.card__list {
38+
list-style-type: none;
39+
display: flex;
40+
}
41+
.card__item {
42+
margin-right: 0.5rem;
43+
padding: 0.3rem 0.5rem;
44+
font-size: 0.85rem;
45+
background-color: rgb(230, 230, 230);
46+
border-radius: 0.3rem;
47+
}
48+
.card__item--active {
49+
font-weight: bold;
50+
background-color: #d4d4d4;
51+
}
52+
.card__desc {
53+
padding: 0.5rem;
54+
color: #d4d4d4;
55+
}
56+
.card__link {
57+
margin-top: 0.5rem;
58+
padding: 0.5rem 1rem;
59+
text-decoration: none;
60+
color: white;
61+
display: inline-block;
62+
border-radius: 0.5rem;
63+
background-color: #2c8973;
64+
}
65+
.card__link:hover {
66+
background-color: #267764;
67+
}/*# sourceMappingURL=style.css.map */

‎BEM(Block, Element Modifier)/style.css.map‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎BEM(Block, Element Modifier)/style.scss‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
width: 100%;
9+
height: 100vh;
10+
display: grid;
11+
place-items: center;
12+
background-color: black;
13+
}
14+
15+
h1 {
16+
padding: 1rem;
17+
color: gray;
18+
background-color: #2c2c2e;
19+
border-radius: 1rem;
20+
border: 0.125rem solid greenyellow;
21+
}
22+
23+
.card {
24+
padding: 0 5rem;
25+
width: 500px;
26+
27+
&__img {
28+
width: 100%;
29+
height: 150px;
30+
display: block;
31+
background-color: #e0466b;
32+
}
33+
34+
&__content {
35+
padding: 1.5rem;
36+
background-color: #1c1c1e;
37+
}
38+
39+
&__list {
40+
list-style-type: none;
41+
display: flex;
42+
}
43+
44+
&__item {
45+
margin-right: 0.5rem;
46+
padding: 0.3rem 0.5rem;
47+
font-size: 0.85rem;
48+
background-color: rgb(230, 230, 230);
49+
border-radius: 0.3rem;
50+
51+
&--active {
52+
font-weight: bold;
53+
background-color: #d4d4d4;
54+
}
55+
}
56+
57+
&__desc {
58+
padding: 0.5rem;
59+
color: #d4d4d4;
60+
}
61+
62+
&__link {
63+
margin-top: 0.5rem;
64+
padding: 0.5rem 1rem;
65+
text-decoration: none;
66+
color: white;
67+
display: inline-block;
68+
border-radius: 0.5rem;
69+
background-color: #2c8973;
70+
71+
&:hover {
72+
background-color: #267764;
73+
}
74+
}
75+
}

0 commit comments

Comments
 (0)