Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

sky-toolkit-core

Package Overview
Dependencies
Maintainers
6
Versions
67
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

sky-toolkit-core - npm Package Compare versions

Comparing version 2.11.0 to 2.13.0

7

CHANGELOG.md

@@ -6,2 +6,9 @@ # Changelog

## 2.13.0
### Enhancements
* [Docs] Adjustments and amends to content before publishing to sky.com/toolkit.
## 2.11.0

@@ -8,0 +15,0 @@

4

docs/objects/container.md

@@ -8,4 +8,2 @@ ---

- sky-toolkit-core
contributors:
- joebell93
layout: component

@@ -22,3 +20,3 @@ ---

```html
```html { "render": false }
<div class="o-container">

@@ -25,0 +23,0 @@ Some content

@@ -9,4 +9,2 @@ ---

- sky-toolkit-core
contributors:
- joebell93
layout: component

@@ -33,2 +31,4 @@ ---

---
## Modifiers

@@ -143,3 +143,1 @@

```

@@ -8,4 +8,2 @@ ---

- sky-toolkit-core
contributors:
- joebell93
layout: component

@@ -32,2 +30,4 @@ ---

---
## List Block

@@ -45,2 +45,4 @@

---
## List Inline

@@ -65,3 +67,3 @@

```html
<ul class="o-list-inline o-list--narrow">
<ul class="o-list-inline o-list-inline--narrow">
<li class="o-list-inline__item">Item 1</li>

@@ -78,3 +80,3 @@ <li class="o-list-inline__item">Item 2</li>

```html
<ul class="o-list-inline o-list--wide">
<ul class="o-list-inline o-list-inline--wide">
<li class="o-list-inline__item">Item 1</li>

@@ -91,3 +93,3 @@ <li class="o-list-inline__item">Item 2</li>

```html
<ul class="o-list-inline o-list--flush">
<ul class="o-list-inline o-list-inline--flush">
<li class="o-list-inline__item">Item 1</li>

@@ -94,0 +96,0 @@ <li class="o-list-inline__item">Item 2</li>

@@ -8,4 +8,2 @@ ---

- sky-toolkit-core
contributors:
- joebell93
layout: component

@@ -12,0 +10,0 @@ ---

@@ -17,4 +17,5 @@ ---

Our global breakpoints are stored in the `$mq-breakpoints` map, and can be used
in media queries via the external `sass-mq` dependency (included by default).
For usage guidelines, see [`sass-mq`'s documentation](http://sass-mq.github.io/sass-mq/).
in media queries via the external [`sass-mq`](http://sass-mq.github.io/sass-mq/)
dependency (included by default). For usage guidelines, see
[`sass-mq`'s documentation](http://sass-mq.github.io/sass-mq/).

@@ -24,4 +25,4 @@ These breakpoints can be found across the entire Toolkit project, and are

| Map | Source |
|-------------------|------------------------------------------------------------------------------------------------|
| Map | Source |
|-------------------|---------------------------------------------------------------------------|
| `$mq-breakpoints` | [sky-toolkit-core/settings/breakpoints](../../settings/_breakpoints.scss) |

@@ -18,4 +18,4 @@ ---

| Map | Source |
|-----------|------------------------------------------------------------------------------------------------|
| Map | Source |
|-----------|-----------------------------------------------------------------|
| `$colors` | [sky-toolkit-core/settings/colors](../../settings/_colors.scss) |

@@ -30,3 +30,3 @@

```scss
```scss { "render": false }
// To output the color of a desired `key`.

@@ -33,0 +33,0 @@

@@ -9,2 +9,5 @@ ---

layout: component
related:
- sky-toolkit-core/objects/container
- sky-toolkit-core/utilities/spacing
---

@@ -16,2 +19,4 @@

Exposed in [sky-toolkit-core/utilities/spacing](../../utilities/_spacing.scss).
| Variable | Value |

@@ -24,4 +29,8 @@ |--------------------------------|---------------|

---
## Container
Exposed in [sky-toolkit-core/objects/container](../../objects/_container.scss).
| Variable | Value |

@@ -31,2 +40,4 @@ |--------------------------------|---------------|

---
## Border

@@ -39,2 +50,4 @@

---
## Animation

@@ -48,2 +61,4 @@

---
## Shadow

@@ -50,0 +65,0 @@

@@ -17,4 +17,4 @@ ---

| Map | Source |
|--------------|---------------------------------------------------------------------------------------------------|
| Map | Source |
|--------------|-----------------------------------------------------------------------|
| `$gradients` | [sky-toolkit-core/settings/gradients](../../settings/_gradients.scss) |

@@ -24,4 +24,4 @@

| Map | Source |
|------------------------|---------------------------------------------------------------------------------------------------|
| Map | Source |
|------------------------|-----------------------------------------------------------------------|
| `$gradient-directions` | [sky-toolkit-core/settings/gradients](../../settings/_gradients.scss) |

@@ -43,3 +43,3 @@

```scss
```scss { "render": false }
// To output the color stop (`x%`, `start` or `end`) of a desired gradient `key`.

@@ -59,3 +59,3 @@

```scss
```scss { "render": false }
// To output a background gradient and color fallback of desired gradient `key`.

@@ -80,3 +80,3 @@

```scss
```scss { "render": false }
// To output a text gradient and color fallback of desired gradient `key`.

@@ -83,0 +83,0 @@

@@ -30,4 +30,4 @@ ---

| Map | Source |
|---------|------------------------------------------------------------------------------------------------|
| Map | Source |
|---------|-------------------------------------------------------------------------|
| `$text` | [sky-toolkit-core/settings/typography](../../settings/_typography.scss) |

@@ -47,3 +47,3 @@

```scss
```scss { "render": false }
// To output the variant font-size and line-height (`large` by default

@@ -65,3 +65,3 @@ // or `small`) of a desired `key`.

```scss
```scss { "render": false }
// To output a rem-based font-size of 18px and fallback.

@@ -81,3 +81,3 @@

```scss
```scss { "render": false }
// To output the variant font-size (`large` by default or `small`) of a desired `key`.

@@ -95,3 +95,3 @@

```scss
```scss { "render": false }
// To output the variant line-height (`large` by default or `small`) of a desired `key`.

@@ -98,0 +98,0 @@

@@ -21,4 +21,4 @@ ---

| Map | Source |
|------------|-------------------------------------------------------------------------------------------------|
| Map | Source |
|------------|-------------------------------------------------------------------|
| `$z-index` | [sky-toolkit-core/settings/z-index](../../settings/_z-index.scss) |

@@ -33,3 +33,3 @@

```scss
```scss { "render": false }
// To output the color of a desired `key`.

@@ -36,0 +36,0 @@

@@ -21,3 +21,3 @@ ---

```scss
```scss { "render": false }
$foo: decimal-round(0.333); // => 0

@@ -35,3 +35,3 @@ $foo: decimal-round(0.333, 1); // => 0.3

```scss
```scss { "render": false }
$foo: decimal-ceil(0.333); // => 1

@@ -49,3 +49,3 @@ $foo: decimal-ceil(0.333, 1); // => 0.4

```scss
```scss { "render": false }
$foo: decimal-floor(0.333); // => 0

@@ -59,2 +59,4 @@ $foo: decimal-floor(0.333, 1); // => 0.3

---
## Maps

@@ -70,3 +72,3 @@

```scss
```scss { "render": false }
$menu:(

@@ -87,3 +89,3 @@ spam: (

```scss
```scss { "render": false }
$menu:(

@@ -102,2 +104,4 @@ spam: (

---
## Map Shortcuts

@@ -113,2 +117,4 @@

---
## Conversion

@@ -121,3 +127,3 @@

```scss
```scss { "render": false }
$foo: convert-to-em(18px); // => 1em

@@ -132,3 +138,3 @@ $foo: convert-to-em(26px); // => 1.444444444em

```scss
```scss { "render": false }
$foo: reverse(1,2,3,4); // => 4,3,2,1

@@ -142,4 +148,4 @@ $foo: reverse(a 1, b 2, c 3); // => c 3, b 2, a 1

```scss
```scss { "render": false }
$foo: strip-unit(20px); // => 20
```

@@ -18,3 +18,3 @@ ---

```scss
```scss { "render": false }
@include add-color(bar, #C0FFEE);

@@ -27,2 +27,4 @@

---
## Focus Styles

@@ -33,3 +35,3 @@

```scss
```scss { "render": false }
.foo {

@@ -46,2 +48,4 @@ @include focus-styles();

---
## Hocus

@@ -52,3 +56,3 @@

```scss
```scss { "render": false }
.foo {

@@ -61,2 +65,4 @@ @include hocus() {

---
## Hide Visually

@@ -70,3 +76,3 @@

```scss
```scss { "render": false }
.foo {

@@ -77,2 +83,4 @@ @include hide-visually();

---
## Hide Completely

@@ -85,3 +93,3 @@

```scss
```scss { "render": false }
.foo {

@@ -92,2 +100,4 @@ @include hide-completely();

---
## Clearfix

@@ -99,3 +109,3 @@

```scss
```scss { "render": false }
.foo {

@@ -106,2 +116,4 @@ @include clearfix();

---
## Responsivize

@@ -120,3 +132,3 @@

```scss
```scss { "render": false }
.foo {

@@ -138,3 +150,3 @@ @include responsivize(small) {

```scss
```scss { "render": false }
.foo {

@@ -160,2 +172,4 @@ @include responsivize(small, medium) {

---
## Edge Position

@@ -168,3 +182,3 @@

```scss
```scss { "render": false }
.foo {

@@ -183,2 +197,4 @@ @include edge-positioning(5px);

---
## Height-sizing

@@ -195,3 +211,3 @@

```scss
```scss { "render": false }
.foo {

@@ -198,0 +214,0 @@ @include height-sizing(fixed);

@@ -8,4 +8,2 @@ ---

- sky-toolkit-core
contributors:
- joebell93
layout: component

@@ -21,3 +19,3 @@ related:

```html
```html { "render": false }
<div class="u-clearfix">

@@ -24,0 +22,0 @@ ...

@@ -8,4 +8,2 @@ ---

- sky-toolkit-core
contributors:
- joebell93
layout: component

@@ -18,3 +16,3 @@ ---

```html
```html { "render": false }
<div class="u-fill-absolute">

@@ -21,0 +19,0 @@ ...

@@ -8,4 +8,2 @@ ---

- sky-toolkit-core
contributors:
- joebell93
layout: component

@@ -26,6 +24,8 @@ related:

```html
```html { "render": false }
<span class="u-hide-visually">I'm visually hidden</span>
```
---
## Hide Completely

@@ -38,4 +38,4 @@

```html
```html { "render": false }
<span class="u-hide-completely">I'm completely hidden</span>
```

@@ -8,4 +8,2 @@ ---

- sky-toolkit-core
contributors:
- joebell93
layout: component

@@ -23,3 +21,3 @@ ---

```html
```html { "render": false }
<!DOCTYPE html>

@@ -26,0 +24,0 @@ <!--[if IE 9 ]> <html lang="en-GB" class="ie9"> <![endif]-->

@@ -8,4 +8,2 @@ ---

- sky-toolkit-core
contributors:
- joebell93
layout: component

@@ -27,3 +25,3 @@ related:

```html
```html { "render": false }
<div class="u-overflow-x-scroll">

@@ -30,0 +28,0 @@ I'm an element with a scrollable x-axis.

@@ -8,4 +8,2 @@ ---

- sky-toolkit-core
contributors:
- joebell93
layout: component

@@ -58,2 +56,4 @@ related:

---
## Padding

@@ -60,0 +60,0 @@

@@ -8,4 +8,2 @@ ---

- sky-toolkit-core
contributors:
- joebell93
layout: component

@@ -23,3 +21,3 @@ ---

<p class="u-text-left">I'm a left-aligned sentence.</p>
<p class="u-text-right">I'm a center-aligned sentence.</p>
<p class="u-text-center">I'm a center-aligned sentence.</p>
<p class="u-text-right">I'm a right-aligned sentence.</p>

@@ -29,2 +27,4 @@ <p class="u-text-justify">I'm a justified sentence.</p>

---
## Style

@@ -41,2 +41,4 @@

---
## Line Length

@@ -43,0 +45,0 @@

@@ -14,4 +14,2 @@ ---

- sky-toolkit-core
contributors:
- joebell93
layout: component

@@ -28,3 +26,3 @@ ---

```html
```html { "render": false }
<div class="u-vertical-align-center">I'm vertically centered</div>

@@ -38,3 +36,3 @@ ```

```html
```html { "render": false }
<div class="u-vertical-align-parent">

@@ -41,0 +39,0 @@ <div class="u-vertical-align-center">I'm vertically centered (with a parent)</div>

@@ -10,4 +10,2 @@ ---

- sky-toolkit-core
contributors:
- joebell93
layout: component

@@ -14,0 +12,0 @@ related:

{
"name": "sky-toolkit-core",
"version": "2.11.0",
"version": "2.13.0",
"description": "The core of Sky's CSS Toolkit",

@@ -5,0 +5,0 @@ "main": "index.js",

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc