You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
48 lines
812 B
48 lines
812 B
/**
|
|
* Use "rem" instead of pixels. 1rem = 16pixels
|
|
* No need to use rem in situations of "1px". (usually used for borders width).
|
|
*
|
|
* Use BEM naming system for class names: http://getbem.com/naming/
|
|
*
|
|
* Use Mobile First approach.
|
|
* Start with mobile device styling and then focus on other screen sizes by using @media (min-width: ...px).
|
|
*
|
|
*/
|
|
|
|
.template {
|
|
padding: 1rem;
|
|
|
|
// EXAMPLE OF BREAKPOINTS
|
|
|
|
@media (min-width: 600px) {
|
|
// Tablet
|
|
}
|
|
|
|
@media (min-width: 980px) {
|
|
// Large Tablet
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
// Laptop & Tablet
|
|
}
|
|
|
|
@media (min-width: 1336px) {
|
|
// Laptop
|
|
}
|
|
|
|
@media (min-width: 1680px) {
|
|
// Desktop
|
|
}
|
|
|
|
&__header {
|
|
border-bottom: 2px solid green;
|
|
|
|
&-heading {
|
|
// Heading
|
|
}
|
|
}
|
|
|
|
&__content {
|
|
// Content
|
|
}
|
|
}
|