Generic customisation

docs/css/bulma-docs.css

@@ -140,7 +140,6 @@ a {
   color: #00d1b2;
   cursor: pointer;
   text-decoration: none;
-  transition: none 86ms ease-out;
 }
 
 a:hover {
@@ -150,7 +149,7 @@ a:hover {
 code {
   background-color: whitesmoke;
   color: #ff3860;
-  font-size: 0.8em;
+  font-size: 0.875em;
   font-weight: normal;
   padding: 0.25em 0.5em 0.25em;
 }
@@ -190,7 +189,7 @@ strong {
 pre {
   background-color: whitesmoke;
   color: #4a4a4a;
-  font-size: 0.8em;
+  font-size: 0.875em;
   white-space: pre;
   word-wrap: normal;
 }
@@ -205,10 +204,6 @@ pre code {
   padding: 1.25rem 1.5rem;
 }
 
-table {
-  width: 100%;
-}
-
 table td,
 table th {
   text-align: left;

sass/base/generic.sass

@@ -1,12 +1,32 @@
+$body-background-color: #fff !default
+$body-size: 16px !default
+$body-rendering: optimizeLegibility !default
+$body-family: $family-sans-serif !default
+$body-color: $text !default
+$body-weight: $weight-normal !default
+$body-line-height: 1.5 !default
+
+$code-family: $family-monospace !default
+$code-padding: 0.25em 0.5em 0.25em !default
+$code-weight: normal !default
+$code-size: 0.875em !default
+
+$hr-background-color: $border !default
+$hr-height: 1px !default
+$hr-margin: 1.5rem 0 !default
+
+$strong-color: $text-strong !default
+$strong-weight: $weight-bold !default
+
 html
-  background-color: $body-background
+  background-color: $body-background-color
   font-size: $body-size
   -moz-osx-font-smoothing: grayscale
   -webkit-font-smoothing: antialiased
   min-width: 300px
   overflow-x: hidden
   overflow-y: scroll
-  text-rendering: $render-mode
+  text-rendering: $body-rendering
 
 article,
 aside,
@@ -22,19 +42,19 @@ button,
 input,
 select,
 textarea
-  font-family: $family-primary
+  font-family: $body-family
 
 code,
 pre
   -moz-osx-font-smoothing: auto
   -webkit-font-smoothing: auto
-  font-family: $family-code
+  font-family: $code-family
 
 body
-  color: $text
+  color: $body-color
   font-size: 1rem
-  font-weight: $weight-normal
+  font-weight: $body-weight
-  line-height: 1.5
+  line-height: $body-line-height
 
 // Inline
 
@@ -42,23 +62,22 @@ a
   color: $link
   cursor: pointer
   text-decoration: none
-  transition: none $speed $easing
   &:hover
     color: $link-hover
 
 code
   background-color: $code-background
   color: $code
-  font-size: 0.8em
+  font-size: $code-size
-  font-weight: normal
+  font-weight: $code-weight
-  padding: 0.25em 0.5em 0.25em
+  padding: $code-padding
 
 hr
-  background-color: $border
+  background-color: $hr-background-color
   border: none
   display: block
-  height: 1px
+  height: $hr-height
-  margin: 1.5rem 0
+  margin: $hr-margin
 
 img
   height: auto
@@ -76,15 +95,15 @@ span
   font-weight: inherit
 
 strong
-  color: $text-strong
+  color: $strong-color
-  font-weight: $weight-bold
+  font-weight: $strong-weight
 
 // Block
 
 pre
   background-color: $pre-background
   color: $pre
-  font-size: 0.8em
+  font-size: 0.875em
   white-space: pre
   word-wrap: normal
   code
@@ -97,7 +116,6 @@ pre
     padding: 1.25rem 1.5rem
 
 table
-  width: 100%
   td,
   th
     text-align: left

sass/utilities/initial-variables.sass

@@ -41,11 +41,6 @@ $weight-normal: 400 !default
 $weight-semibold: 500 !default
 $weight-bold: 700 !default
 
-// Body
-
-$body-background: #fff !default
-$body-size: 16px !default
-
 // Responsiveness
 
 // The container gap, which acts as the offset for breakpoints