@justeattakeaway/pie-css 0.17.0 → 0.17.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +14 -14
- package/package.json +2 -1
package/README.md
CHANGED
|
@@ -10,37 +10,37 @@
|
|
|
10
10
|
|
|
11
11
|
# PIE CSS
|
|
12
12
|
|
|
13
|
+
`pie-css` is a styling library that provides two distinct features:
|
|
14
|
+
|
|
15
|
+
1. A minimal set of CSS styles to help PIE web components display as intended in web applications and providing our design tokens for applications to use.
|
|
16
|
+
2. A set of SCSS style helpers (mixins, functions and variables) to help with common styling tasks when authoring PIE web components.
|
|
17
|
+
|
|
18
|
+
The PIE design tokens (and HSL colour variants) are exposed as CSS variables, as these variables are used across the PIE component styles and therefore need to be imported when using the PIE Web Components.
|
|
19
|
+
|
|
20
|
+
|
|
13
21
|
# Table of Contents
|
|
14
22
|
|
|
15
|
-
1. [
|
|
16
|
-
2. [
|
|
17
|
-
3. [Using the `pie-css` CSS stylesheet in your web application](#using-the-pie-css-css-stylesheet-in-your-web-application)
|
|
23
|
+
1. [Installation](#installation)
|
|
24
|
+
2. [Using the `pie-css` CSS stylesheet in your web application](#using-the-pie-css-css-stylesheet-in-your-web-application)
|
|
18
25
|
1. JS or Framework import (via bundler)
|
|
19
26
|
2. Nuxt
|
|
20
27
|
3. Sass /SCSS
|
|
21
28
|
4. Native HTML
|
|
22
|
-
|
|
29
|
+
3. [What's included in the `pie-css` base stylesheet](#whats-included-in-the-pie-css-base-stylesheet)
|
|
23
30
|
1. [PIE Design Tokens](#pie-design-tokens)
|
|
24
31
|
2. [box-sizing](#box-sizing)
|
|
25
32
|
3. [Typography](#typography)
|
|
26
|
-
4. [z-index
|
|
33
|
+
4. [z-index variables](#z-index-variables)
|
|
27
34
|
5. [Reusable Animations](#reusable-animations)
|
|
28
|
-
|
|
35
|
+
4. [Using the `pie-css` SCSS helpers (mixins & functions)](#using-the-pie-css-scss-helpers-mixins--functions)
|
|
29
36
|
1. [Importing the `pie-css` SCSS helpers](#importing-the-pie-css-scss-helpers)
|
|
30
37
|
2. [`pie-css` SCSS Helper Definitions](#pie-css-scss-helper-definitions)
|
|
31
38
|
- [`font-size()`](#font-size)
|
|
32
39
|
- [`@include media()`](#include-media)
|
|
33
|
-
|
|
40
|
+
5. [Testing](#testing)
|
|
34
41
|
- [CSS](#css)
|
|
35
42
|
- [SCSS](#scss)
|
|
36
43
|
|
|
37
|
-
## Introduction
|
|
38
|
-
|
|
39
|
-
`pie-css` is a styling library that provides both a minimal set of CSS styles to help PIE Web Components display as intended on web applications, and a set of optional SCSS style helpers (mixins & functions) to help with common styling tasks.
|
|
40
|
-
|
|
41
|
-
It also includes the PIE design tokens (and HSL colour variants) as CSS variables, as these variables are used across the PIE component styles and therefore need to be imported when using the PIE Web Components.
|
|
42
|
-
|
|
43
|
-
|
|
44
44
|
## Installation
|
|
45
45
|
|
|
46
46
|
To install `pie-css`, run the following on your command line:
|
package/package.json
CHANGED
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@justeattakeaway/pie-css",
|
|
3
|
-
"version": "0.17.
|
|
3
|
+
"version": "0.17.1",
|
|
4
4
|
"description": "A styling library that provides both a shared collection of ready to use CSS styles to be used across JET web front-ends, and SCSS-based style helpers for our PIE Web Component library.",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
7
7
|
"url": "https://github.com/justeattakeaway/pie",
|
|
8
8
|
"directory": "packages/tools/pie-css"
|
|
9
9
|
},
|
|
10
|
+
"homepage": "https://webc.pie.design/?path=/docs/additional-libraries-pie-css--docs",
|
|
10
11
|
"author": "Just Eat Takeaway.com - Design System Team",
|
|
11
12
|
"files": [
|
|
12
13
|
"scss"
|