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: 250pxThe with of the left menu on large screens.
-
$sidebar-left-medium-width Default: 200pxThe width of the left menu on medium screens.
-
$sidebar-right-max-width Default: 220pxThe maximum width of the right menu.
-
$sidebar-gutter-spacing Default: 10pxThe spacing between the menus and the content and window frame.
-
$sidebar-link-active-color Default: $anchor-font-colorThe color of active links in the menus.
-
$sidebar-link-hover-color Default: $anchor-font-color-hoverThe 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: 400pxThe 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.