Customising with SASS¶
Because Nuit (and Foundation) are written with SASS, you can write your own SASS that can override the default Nuit/Foundation settings.
To do so, include a nuit/_custom.scss
in the root of your static files directory. This will get imported by Nuit when loaded, and variables set in there will override Nuit’s (and Foundation’s) defaults.
Available Variables¶
For a list of most variables, please refer to the Foundation docs. The following variables are used by Nuit when compiling the SASS:
-
$sidebar-bg
Default: rgb(250, 250, 250)
The color of the left and right menus.
-
$sidebar-left-large-width
Default: 250px
The with of the left menu on large screens.
-
$sidebar-left-medium-width
Default: 200px
The width of the left menu on medium screens.
-
$sidebar-right-max-width
Default: 220px
The maximum width of the right menu.
-
$sidebar-gutter-spacing
Default: 10px
The spacing between the menus and the content and window frame.
-
$sidebar-link-active-color
Default: $anchor-font-color
The color of active links in the menus.
-
$sidebar-link-hover-color
Default: $anchor-font-color-hover
The hover color of links in the menus.
-
$sidebar-link-active-bg
Default: rgba(0, 64, 84, 0.05)
The background colour of active links in the menus.
-
$sidebar-link-hover-bg
Default: rgba(0, 64, 84, 0.03)
The background colour of hovered links in the menus.
-
$loader-colors
Default: rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.2)
The colours of the parts of the Loading Animation.
-
$loader-subicon
Default: "\0025CF"
The icon of each part of the Loading Animation.
-
$fixed-modal-width
Default: 400px
The width of fixed-width modals, such as the login form and error pages.
Using Nuit’s Styles¶
To use the variables that Nuit and Foundation themselves use in your own CSS, but without including any of their rendered CSS, add the following to the top of your SCSS file:
@import "nuit/_styles"
You’ll then have access to the variables defined above, as well as any used by Foundation.