Name: n-ui-foundations
Owner: Financial Times
Description: Sass and js utilities for the next front-end for use by components (apps should use n-ui, which includes n-ui-foundations)
Created: 2017-02-08 17:28:32.0
Updated: 2017-11-23 14:54:08.0
Pushed: 2017-11-23 14:54:25.0
Size: 116
Language: JavaScript
GitHub Committers
User | Most Recent Commit | # Commits |
---|
Other Committers
User | Most Recent Commit | # Commits |
---|
Sass and js utilities for the next front-end for use by components (apps should use n-ui, which includes n-ui-foundations)
For templates and app bootstrapping see https://github.com/Financial-Times/n-ui
ort "n-ui-foundations/main"
This will output styles for o-grid
, o-typography
, and o-normalise
. It will also import mixins for o-colors
, o-icons
and o-visual-effects
. It can be @imported
multiple times in components or apps with no risk of duplication.
Use
nUiStylesheetStart('stylesheet-name')
nUiStylesheetEnd('stylesheet-name')
nUiStylesheet('stylesheet-name') {}
These insert comments that, when built with n-ui
?s build tools, will split your stylesheet into multiple sub stylesheets. Can be used for critical css (e.g. use head
as the stylesheet name for the same effect as n-ui@3
?s nUiCritical()
mixin)
Many additional use cases are defined in https://github.com/Financial-Times/n-ui-foundations/blob/master/colors/_set-use-cases.scss.
Two shorthand aliases for o-colors
functions are also provided:
getColor
- shorthand for oColorsGetPaletteColor
getColorFor
- shorthand for oColorsGetColorFor
Human readable classes (e.g. data-o-grid-colspan="half"
) are all disabled, with the exception of center
.
To avoid shipping unused rulesets offset
pull
and push
column selectors are disabled. To use these a mixin is provided nUiGridOffset($layout-name, $columns, $mode)
lude nUiGridOffset('M', 3, 'pull');
A mixin for getting logos (or other Origami imageset images)
Image(
$image-type,
$image-name,
$color: null,
$container-width: 128,
$container-height: null
See https://github.com/Financial-Times/n-ui-foundations/blob/master/util/README.md for a full list of utility classes.
ire('n-ui-foundations');
$(sel, [context])
Equivalent to context.querySelector(sel)
(context
defaults to document
)$$(sel, [context])
Equivalent to Array.from(context.querySelectorAll(sel))
(context
defaults to document
)throttle(func, wait)
Creates a throttled copy of a functiondebounce(func, wait)
Creates a debounced copy of a functionuuid()
- uuid generatorascii(str)
converts non-ascii unicode characters to ascii equivalentsbroadcast(name, data, bubbles = true)
fires a custom event. Event is fired on document.body
by default but if called with the context of a HtmlElement
will be fired on thatperfMark(name)
- log a performance marksampleUsers(pct, seed)
- select a % of users to target behaviour at (returns Bool
)Contain useful methods for working with cookies.
const cookieStore = require('n-ui-foundations').cookieStore;
get(name)
Get the value of the given cookie.
set(name, value, [options])
Set a cookie. Available options are domain
, path
, expires
, secure
and maxAge
.
Note it is “maxAge” not “max-age”. If you don't specify either expires or maxAge the cookie will expire at the end of the session.
has(name)
Returns true if the given cookie exists.
remove(name)
Delete the given cookie by seting the expiry to the past.
Nope. None of them.