Uses Node.js, Gulp, BrowserSync for Sass compiling, task running and Browser Syncing.
@import
. You will need "Link CSS" module to convert to <link>
element.This is a Mobile first design that uses "min-width".
Default styles will apply to mobile devices, everything up from there needs to be added by "@include mq($from: tablet) {...}".
Refer to "utils/variables.scss" for established breakpoints.
Add a "tabletish" breakpoint by: "@include mq($from: tablet) {...}".
Add a "large / desktop" by: "@include mq($from: desktop) {...}".
.o-modal {}
over div.o-modal {}
#header
is overly specific compared to, for example .header
and is much harder to override:hover
, :focus
, ::before
, etc. is OK, but nesting selectors inside selectors should be avoided.!important
!important
.!important
greatly increases the power of a CSS rule, making it extremely tough to override in the future. It’s only possible to override with another !important
rule later in the cascade.margin-top
.
padding-top
ormargin-bottom
on preceding elementsbackground: #fff
instead of background-color: #fff
, but doing so overrides other values encapsulated by the shorthand property. (In this case, background-image
and its associative properties are set to “none.”:
in property declarations
color: red;
instead of color:red;
{
in rule declarations
.o-modal {
instead of .o-modal{
}
closing rule declarations}
on a new lineIn general follow Drupal Coding standards: https://www.drupal.org/coding-standards
.my-class-name
//
commenting, even for block commentsmargin: 0;
instead of margin: 0px;
opacity: 0.4;
instead of opacity: .4;
div > span
instead of div>span