Default styles
You don't need to normalize
By default, styles are included to normalize some elements and properties of the DOM, with this you will not need any additional files or styles to normalize, everything you need is already set.
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
outline: none;
outline: 0;
}
*:focus {
outline: none;
outline: 0;
}
html,
body {
background-color: #fff;
color: #000;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Source Sans Pro", Oxygen, sans-serif;
font-size: 16px;
font-weight: 400;
height: 100%;
margin: 0 auto;
padding: 0px;
position: relative;
width: 100%;
}
a {
color: #2196F3;
cursor: pointer;
text-decoration: none;
transition: all 0.2s ease, outline 0.000001s;
}
a:active,
a:hover {
color: #1565C0;
text-decoration: none;
}
a:focus {
color: inherit;
}
h1, h2, h3, h4, h5, h6 {
color: #000;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Source Sans Pro", Oxygen, sans-serif;
font-weight: 400;
margin: 0px;
position: relative;
white-space: pre-line;
}
img {
border: none;
border: 0;
display: inline-block;
outline: none;
outline: 0;
vertical-align: middle;
}
p {
margin: 0px;
padding: 5px 0px;
white-space: pre-line;
}
Custom styles
You can also modify the default styles by overwriting classes or variables depending on the type of installation, via cdn or by package.
Via CDN
Modifying default styles using cdn consists only of overwriting the existing classes with the new parameters that your project needs, for example:
html,
body {
font-family: 'My custom font', -apple-system, BlinkMacSystemFont, "Segoe UI", "Source Sans Pro", Oxygen, sans-serif;
font-weight: 300;
}
h1, h2, h3, h4, h5, h6 {
color: #09f;
font-family: 'My custom font', -apple-system, BlinkMacSystemFont, "Segoe UI", "Source Sans Pro", Oxygen, sans-serif;
font-weight: 700;
white-space: normal;
}
Via npm or yarn
If you use npm or yarn you can modify the default styles using the configuration variables, this will be easier and faster, although you can also overwrite the classes as in the previous method.
The following non-compiled version will help you know which variables are defined and where they take effect.
* {
box-sizing: border-box;
outline: none;
outline: 0;
&:focus {
outline: none;
outline: 0;
}
}
html,
body {
background-color: @s-body-background-color;
color: @s-body-font-color;
font-family: @s-body-font-family;
font-size: @s-body-font-size * 1px;
font-weight: @s-font-weight-regular;
height: 100%;
margin: 0 auto;
padding: 0px;
position: relative;
width: 100%;
}
a {
color: @s-main-link-color;
cursor: pointer;
text-decoration: none;
.mix-transition;
&:active,
&:hover,
&:focus {
color: @s-main-link-color-hover;
text-decoration: none;
}
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: @s-headings-font-color;
font-family: @s-headings-font-family;
font-weight: @s-font-weight-regular;
margin: 0px;
position: relative;
white-space: pre-line;
}
img {
border: none;
border: 0;
display: inline-block;
outline: none;
outline: 0;
vertical-align: middle;
}
p {
margin: 0px;
padding: 5px 0px;
white-space: pre-line;
}
* {
box-sizing: border-box;
outline: none;
outline: 0;
&:focus {
outline: none;
outline: 0;
}
}
html,
body {
background-color: $s-body-background-color;
color: $s-body-font-color;
font-family: $s-body-font-family;
font-size: #{$s-body-font-size}px;
font-weight: $s-font-weight-regular;
height: 100%;
margin: 0 auto;
padding: 0px;
position: relative;
width: 100%;
}
a {
color: $s-main-link-color;
cursor: pointer;
text-decoration: none;
@include mix-transition;
&:active,
&:hover,
&:focus {
color: $s-main-link-color-hover;
text-decoration: none;
}
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: $s-headings-font-color;
font-family: $s-headings-font-family;
font-weight: $s-font-weight-regular;
margin: 0px;
position: relative;
white-space: pre-line;
}
img {
border: none;
border: 0;
display: inline-block;
outline: none;
outline: 0;
vertical-align: middle;
}
p {
margin: 0px;
padding: 5px 0px;
white-space: pre-line;
}