.module {
border: 1px solid #ccc;
width: 25%;
padding: 20px;
position: relative;
min-height: 100px;
z-index: 1;
border-radius: 20px;
}
.module {
border-radius: 20px;
border: 1px solid #ccc;
min-height: 100px;
padding: 20px;
position: relative;
width: 25%;
z-index: 1;
}
.module {
width: 25%;
min-height: 100px;
padding: 20px;
border: 1px solid #ccc;
border-radius: 20px;
position: relative;
z-index: 1;
}
.declaration-order {
/* Positioning */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 10;
/* Box Model */
/* Typography */
/* Visual */
/* Animation */
/* Misc */
}
.declaration-order {
/* Positioning */
/* Box Model */
display: block;
float: right;
width: 100px;
height: 100px;
margin: 10px;
padding: 10px;
/* Typography */
/* Visual */
/* Animation */
/* Misc */
}
.declaration-order {
/* Positioning */
/* Box Model */
/* Typography */
color: #888;
font: normal 16px Helvetica, sans-serif;
line-height: 1.3;
text-align: center;
/* Visual */
/* Animation */
/* Misc */
}
.declaration-order {
/* Positioning */
/* Box Model */
/* Typography */
/* Visual */
background-color: #eee;
border: 1px solid #888;
border-radius: 4px;
opacity: 1;
/* Animation */
transition: all 1s;
/* Misc */
user-select: none;
}
Encapsulates a standalone entity that is meaningful on its own. While blocks can be nested and interact with each other, semantically they remain equal; there is no precedence or hierarchy.
Block names: Latin letters, digits, and dashes.
Parts of a block and have no standalone meaning. Any element is semantically tied to its block.
Element names may consist of Latin letters, digits, dashes and underscores. CSS class is formed as block name plus two underscores plus element name: .block__elem
Flags on blocks or elements. Use them to change appearance, behavior or state.
Modifier names may consist of Latin letters, digits, dashes and underscores. CSS class is formed as block’s or element’s name plus two dashes:
.block--mod or .block__elem--mod
<form class="form form--theme-xmas form--simple">
<input class="form__input" type="text" />
<input
class="form__submit form__submit--disabled"
type="submit" />
</form>
.container {
display: flex; /* or inline-flex */
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
.item-a {
grid-area: header;
}
.item-b {
grid-area: main;
}
.item-c {
grid-area: sidebar;
}
.item-d {
grid-area: footer;
}
.container {
display: grid;
grid-template-columns: 50px 50px 50px 50px;
grid-template-rows: auto;
grid-template-areas:
"header header header header"
"main main . sidebar"
"footer footer footer footer";
}