Name: gel-sass-tools
Owner: BBC
Description: A collection of Sass Settings & Tools which align to key GEL values
Created: 2015-08-26 12:31:16.0
Updated: 2018-05-21 12:42:42.0
Pushed: 2018-05-21 12:43:24.0
Homepage: null
Size: 30
Language: CSS
GitHub Committers
User | Most Recent Commit | # Commits |
---|
Other Committers
User | Most Recent Commit | # Commits |
---|
A collection of Sass Settings & Tools which align to key GEL values.
Forms part of the GEL Foundations
GEL Sass Tools is a collection of Sass variables, functions and mixins which allows you to work with GEL units consistently within your Sass. It is also required by other GEL Foundations components.
Here is how you could use these tools in your Sass:
component {
margin-top: $gel-spacing-unit;
@include mq($from: gel-bp-m) {
margin-top: double($gel-spacing-unit);
}
This would compile to:
component {
margin-top: 8px;
ia (min-width: 37.50em) {
.my-component {
margin-top: 16px;
}
wer install --save gel-sass-tools
ass
our-app/main.scss
ort 'bower_components/gel-sass-tools/sass-tools';
ort 'bower_components/sass-mq/mq'
m install --save gel-sass-tools
ass
our-app/main.scss
ort 'node_modules/gel-sass-tools/sass-tools';
ort 'node_modules/sass-mq/mq'
You can install this component manually by downloading the content of this Git repo into your project and use a Sass @import to include it in your project.
Note: you will manually need to manage the dependencies below, without these this component will fail to compile.
In order to use the component you will need the following components available:
Usage of the included tools is as follows:
The following spacing variables are made available:
$gel-spacing-unit
- baseline spacing unit - 8px
$gel-alt-spacing-unit
- alternative baseline spacing unit - 12px
The following breakpoints are defined and added to the Sass MQ breakpoint list:
gel-bp-xs
- 240pxgel-bp-s
- 400pxgel-bp-m
- 600pxgel-bp-l
- 900pxgel-bp-xl
- 1008pxgel-bp-xxl
- 1280pxThese can be called when using the mq
mixin:
component {
...
@include mq($from: gel-bp-s) {
...
}
@include mq($from: gel-bp-m) {
...
}
@include mq($from: gel-bp-l) {
...
}
The following math
functions are included:
quarter($value)
third($value)
halve($value)
double($value)
triple($value)
quadruple($value)
These functions can be used inline with any numerical CSS rule. E.g:
component {
margin-bottom: halve($gel-spacing-unit);
padding-left: double($gel-spacing-unit);
padding-right: double($gel-spacing-unit);
or functions can be nested within other Sass features such as mixins:
component {
@include rem('margin-bottom', halve($gel-spacing-unit));
@include rem('padding-left', double($gel-spacing-unit));
@include rem('padding-right', double($gel-spacing-unit));
The rem
tool can be used in two ways. Either by directly calling the rem($value)
function, which will convert the supplied value and return a rem
unit. E.g:
component {
margin-bottom: rem($gel-spacing-unit);
Beware that rem units are not universal supported. IE8 and below do not support
rem
so require apx
fallback.
You can also use the @include rem($value);
mixin, which by default returns a px
fallback to allow support for older browsers which don't support rem
units. E.g:
Sass
component {
@include rem('margin-bottom', 16px);
CSS
component {
margin-bottom: 16px;
margin-bottom: 1rem;
The following options can be defined before the tools partial is included to customise the functionality and output. By default the following options are all set to true
:
$gel-tools-rem-enable--function
- enable/disable the rem conversion, if this option is disabled only px
values will be returned$gel-tools-rem-enable--mixin
- disable the mixin if you only want to output the px
, this can be useful for IE8 stylesheets who don't need rem
values$tel-tools-rem-enable--fallback
- disable the automatic generation of a px
fallback when the mixin in called, use this open if you want to remove all px
values from your stylesheetsSupport for Right-to-Left language is offered via two methods to flip CSS styles: interpolated properties and the flip()
function.
Interpolation should be used for any property which has a direction (e.g. padding-left
, margin-right
, border-right
, left
, etc), flip()`
should be used for all other properties.
background
background-position
border
border-radius
clear
cursor
direction
float
left/right
margin
padding
text-align
text-indent
Taking the following CSS as an example:
riginal Sass
component {
float: left;
For a RTL layout, float: left;
should be flipped to float: right;
. We can use the flip()
function to accomplish this.
lipped Sass
component {
float: flip(left, right);
When Sass comes across the flip()
function, it will check the value of the $rtl
variable. If $rtl
is false
, the flip()
function will take the first parameter. If $rtl
is true
, the flip()
function will take the second parameter.
The Sass will compile out as follows:
ompiled LTR style
component {
float: left;
ompiled RTL style
component {
float: right;
Interpolation is used to adjust CSS properties which contain a direction within their name. For example padding-left
would need to change to padding-right
in a RTL context. Our interpolation technique works by changing the value of variables based on the value of the $rtl
variable.
Taking the following CSS as an example:
riginal Sass
component {
padding-left: $gel-spacing-unit; // 8px
For a RTL layout, padding-left: 8px;
should be flipped to padding-right: 8px;
.
In order to flip this, we have to interpolate the style property:
lipped Sass
component {
#{$padding-left}: $gel-spacing-unit; // 8px
This will compile out to:
ompiled LTR style
component {
padding-left: 8px;
ompiled RTL style
component {
padding-right: 8px;
text-align: -320px;
or right: 5000%;
) don't need to be flipped unless they are being transitioned or overridden.margin-left: 0;
margin-right: 0;
)The MIT License (MIT)
Copyright 2016 British Broadcasting Corporation
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.