11.47.0 • Published 21 days ago
@uxf/styles v11.47.0
@uxf/styles
Color
shade
and tint
- extend features of
color2k
library - returns HEX string with mix of provided color and specified amount of black (
shade
) or white (tint
)
import { shade } from "@uxf/styles/colors/shade";
const darker = shade("#f00", 0.1);
import { tint } from "@uxf/styles/colors/tint";
const lighter = tint("#f00", 0.1);
Mixins
srOnly
- returns js object with CSS to hide an element to all devices except screen readers
import { srOnly } from "@uxf/styles/mixins/sr-only";
const example = <div style={srOnly} />;
Properties
columnsToPercent
- returns css
calc()
value with relative width of provided number of columns in provided total columns (defaults is12
) compensated by optionally provided gutter in pixels
import { columnsToPercent } from "@uxf/styles/properties/columns-to-percent";
const example = columnsToPercent(4, 12, 24);
/* returns "calc((100% + 1.5rem) / 12 * 4)" */
encodedSvgUrl
- returns css
url()
value of an encoded version of provided svg
import { encodedSvgUrl } from "@uxf/styles/properties/encoded-svg-url";
const example = encodedSvgUrl(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="currentColor" d="0 20 20 0" /></svg>`);
repeatGridColumns
- returns css
repeat()
value of provided number of columns and size
import { repeatGridColumns } from "@uxf/styles/properties/repeat-grid-columns";
const example = repeatGridColumns(6, "1fr"); /* returns "repeat(6, 1fr)" */
transition
- returns css
transition
property for specified property or an array of properties
import { transition } from "@uxf/styles/properties/transition";
const example = transition(["color", "transform"], 400, "ease-in-out");
/* returns "color 400ms ease-in-out, transform 400 ease-in-out" */
Responsive
string media queries mqBetween
, mqHiDpi
, mqMax
, mqMin
import { mqBetween } from "@uxf/styles/responsive/mq-between";
const example = mqBetween(320, 480)
/* returns "(min-width: 20em and (max-width: 29.9375em)" */
import { mqHiDpi } from "@uxf/styles/responsive/mq-hidpi";
const example = mqHiDpi(3)
/* returns hidpi media query string for DPR 3.0 */
window.matchMedia().matches
media queries matchBetween
, matchHiDpi
, matchMax
, matchMin
import { matchBetween } from "@uxf/styles/responsive/match-between";
const example = matchBetween(320, 480) /* returns boolean */
import { matchHiDpi } from "@uxf/styles/responsive/match-hidpi";
const example = matchHiDpi(3) /* returns boolean */
Units
em
and rem
- returns string values divided by specified amount (defaults
16
)
import { em } from "@uxf/styles/units/em";
const example1 = em(320) /* returns "20em" */
const example2 = em(320, 10) /* returns "32em" */
import { rem } from "@uxf/styles/units/rem";
const example1 = rem(320) /* returns "20rem" */
const example2 = rem(320, 10) /* returns "32rem" */
emToPx
and remToPx
- parse em or rem units to pixels (as number) by specified base (defaults
16
)
import { emToPx } from "@uxf/styles/units/em-to-px";
const example1 = emToPx("20em") /* 320 */
const example2 = emToPx("20em", 10) /* 200 */
const example3 = emToPx("20rem", 10) /* "20rem" */
import { remToPx } from "@uxf/styles/units/rem-to-px";
const example1 = remToPx("20rem") /* 320 */
const example2 = remToPx("20rem", 10) /* 200 */
const example3 = remToPx("20%", 10) /* "20%" */
formatCssValue
- returns normalized css value: pass string as string or input to rem or zero as string or optionally forced input as string
import { formatCssValue } from "@uxf/styles/units/format-css-value";
const example1 = formatCssValue(0) /* returns "0" */
const example2 = formatCssValue(24) /* returns "1.5rem" */
const example3 = formatCssValue("100%") /* returns "100%" */
const example4 = formatCssValue(1, true) /* returns "1" */
percent
- returns float of percentage of provided number in provided max value (defaults
100
) with provided precision (defaults2
)
import { percent } from "@uxf/styles/units/percent";
const example = percent(54.874, 80, 2) /* returns 68.59 */
spacing
- returns input multiplied by given factor (defaults
8
)
import { spacing } from "@uxf/styles/units/spacing";
const example = spacing(4) /* returns 32 */
withUnit
- returns literal of input with CSS unit
import { withUnit } from "@uxf/styles/units/with-unit";
const example = withUnit(80, "vh") /* returns "80vh" */
Types
- typed css units
- shared types for utils
11.47.0
21 days ago
11.46.0
28 days ago
11.45.0
1 month ago
11.42.0
1 month ago
11.35.0
3 months ago
11.32.0
4 months ago
11.31.0
4 months ago
11.29.0
4 months ago
11.22.0
6 months ago
11.21.5
7 months ago
11.21.0
7 months ago
11.20.0
7 months ago
11.19.0
7 months ago
11.18.0
7 months ago
11.11.3
10 months ago
11.10.0
10 months ago
11.9.0
10 months ago
10.0.0-beta.80
1 year ago
10.0.0
1 year ago
10.4.0
1 year ago
10.0.0-beta.85
1 year ago
10.0.0-beta.35
1 year ago
10.10.0
1 year ago
10.10.1
1 year ago
10.0.0-beta.37
1 year ago
10.0.0-beta.9
1 year ago
2.1.2
2 years ago
2.1.1
2 years ago
2.1.0
2 years ago
2.0.1
2 years ago
2.0.0
2 years ago
1.5.0
3 years ago
1.4.3
3 years ago
1.4.2
3 years ago
1.4.1
4 years ago
1.4.0
4 years ago
1.3.1
4 years ago
1.3.0
4 years ago
1.2.3
4 years ago
1.2.2
4 years ago
1.2.1
4 years ago
1.2.0
4 years ago
1.1.2
4 years ago
1.1.1
4 years ago
1.1.0
4 years ago
1.0.0
4 years ago