#Luigi (v2.2.0)
Jump to the index to everything that is included.
Luigi is the Scss library developed by the developers at Bozboz and the rest of the world. It takes influence from the most popular of libraries and includes most of the popular mixins, plus some extra Bozboz crafted ones. A full list of libraries and credits can be found in the appendix
All mixins are included into the main _luigi.scss. This is so in your app.scss or style.scss you can just include _luigi.scss to benefit from the whole shebang.
When adding mixins to existing or new files, please ensure that they are placed in alphabetical order within the file
Luigi is laid out folders categorising the library:
Alternatively, see the Full Luigi Index for everything included.
##Helpers
The helpers folder includes the following files:
###Base Vars
This lays out all the variables that can be overwritten throughout Luigi. Defaults are set here:
$base-font: Arial,sans-serif !default;
This sets the body and all inputs to the declared font
$base-font-size: 12px !default;
The default font size for the website
$base-gutter: 15px !default;
or
$gutter: $base-gutter !default;
The default gutter - this is used as the margin bottom for things such as <p> and headings
$gap: $gutter*2 !default
Generic space for paddings
$grid-gap: $gutter !default
Include the Luigi grid for older versions:
$luigi-grid: false !default;
Used as the margin for grid items
$debug-mode: false !default;
Whether or not debug mode is enabled (see information about Debug).
$image-fallback-extension: 'png' !default;
Used with the background-image and image-2x to append the 'png' extension to the filename.
$image-path: '/images' !default;
This sets the default image folder for the mixins in mixins/_images.scss.
$image-retina-suffix: '@2x' !default;
This is the retina suffix for retina images.
$global-box-sizing: true !default;
This determines whether the site uses global border-box as its box model (see the Box Sizing file).
$sprite: false !default;
Used with the sprite mixin to set a base path for the image sprite.
$sprite-size: 0 0 !default;
Used with the image-2x mixing in the image file to set the original sprite-size (at 72ppi).
$sticky-footer-height: false !default;
$sticky-footer-margin: $sticky-footer-height !default;
These are for the sticky footer predefined file - read about the Sticky Footer.
###Debug
This file outlines any basic problems you might have in your html. Using some advanced selectors it outlines elements with things such as alt tags missing or direct descendants of uls which are not lis.
This can be enabled by:
$debug-mode: true;
This originates from Inuit (see Appendix 2.1)
This is a basic print stylesheet - taken from Stu Robson's sassifaction (see Appendix 2.3). It applies some very basic layout modifications when printing
##Layout
This includes the Foundation Grid and the optional Luigi grid.
##Mixins
The mixins folder comprises of:
###Image
The image mixin file contains:
####background-image
Background-image is a mixin which uses SVG background images with PNG and retina fallback. This mixin require Modernizr.
Mixin:
background-image($name, $size:false)
$name: The filename
$size: The background size
Usage:
.class {
@include background-image(sprite, 50px 100px);
}
Output:
.class {
background-image: url(/images/sprite.svg);
background-size: 50px 100px;
}
.no-svg .class {
background-image: url(/images/sprite.png);
}
@media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3 / 2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
.no-svg .class {
background-image: url(/images/[email protected]);
}
}
####image-2x
This mixin will get the high resolution image for retina displays. The retina images are twice as big with @2x appended in the name.
Mixin:
image-2x($name, $image-size: $sprite-size)
$name: The filename
$image-size: The original sprite size (at 72ppi)
Usage:
$sprite-size: 50px 100px;
.class {
@include image-2x(sprite);
}
Output: