vanilla-framework 3.0.0-rc.1 → 3.0.0
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 +19 -21
- package/package.json +7 -10
- package/scss/_patterns_chip.scss +2 -1
package/README.md
CHANGED
|
@@ -30,45 +30,43 @@ You can link to the latest build to add directly into your markup like so, by re
|
|
|
30
30
|
<link rel="stylesheet" href="https://assets.ubuntu.com/v1/vanilla-framework-version-x.x.x.min.css" />
|
|
31
31
|
```
|
|
32
32
|
|
|
33
|
-
### Including Vanilla in your project via NPM
|
|
33
|
+
### Including Vanilla in your project via NPM or yarn
|
|
34
34
|
|
|
35
|
-
|
|
36
|
-
and save it into your project's dependencies (`package.json`) as follows:
|
|
35
|
+
To get set up with Sass, add the `sass` and `vanilla-framework` packages to your project dependencies:
|
|
37
36
|
|
|
38
37
|
```bash
|
|
39
|
-
|
|
38
|
+
yarn add sass vanilla-framework
|
|
40
39
|
```
|
|
41
40
|
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
```javascript
|
|
45
|
-
// gulpfile.js
|
|
46
|
-
gulp.task('sass', function () {
|
|
47
|
-
return gulp.src('[your-sass-directory]/**/*.scss').pipe(
|
|
48
|
-
sass({
|
|
49
|
-
includePaths: ['node_modules'],
|
|
50
|
-
})
|
|
51
|
-
);
|
|
52
|
-
});
|
|
53
|
-
```
|
|
41
|
+
In the script that builds the CSS in your `package.json`, you should include the path to `node_modules` when looking for `@imports`. In this example, we have called the build script `"build-css"`:
|
|
54
42
|
|
|
55
|
-
|
|
43
|
+
```
|
|
44
|
+
"build-css": "sass -w --load-path=node_modules src:dist --style=compressed"
|
|
45
|
+
```
|
|
56
46
|
|
|
57
|
-
|
|
47
|
+
Make a folder `src/`, create a file inside called `style.scss` and import Vanilla:
|
|
58
48
|
|
|
59
49
|
```sass
|
|
60
|
-
// Optionally override some settings
|
|
61
|
-
$color-brand: #ffffff;
|
|
62
|
-
|
|
63
50
|
// Import the theme
|
|
64
51
|
@import 'vanilla-framework';
|
|
65
52
|
@include vanilla;
|
|
66
53
|
|
|
54
|
+
// Optionally override some settings
|
|
55
|
+
$color-brand: #ffffff;
|
|
56
|
+
|
|
67
57
|
// Add theme if applicable
|
|
68
58
|
```
|
|
69
59
|
|
|
70
60
|
If you don't want the whole framework, you can just `@include` specific [parts](scss) - e.g. `@include vf-b-forms`.
|
|
71
61
|
|
|
62
|
+
Now run `yarn build-css`, which will convert any Sass files in the `src/` folder to CSS in the `dist/` folder.
|
|
63
|
+
|
|
64
|
+
To watch for changes in your Sass files, add the following script to your `package.json`
|
|
65
|
+
|
|
66
|
+
```
|
|
67
|
+
"watch-css": "yarn build-css && sass --load-path=node_modules -w src:dist --style=compressed"
|
|
68
|
+
```
|
|
69
|
+
|
|
72
70
|
## Developing Vanilla
|
|
73
71
|
|
|
74
72
|
If you're looking to contribute to the Vanilla project itself, [start here](/CONTRIBUTING.md).
|
package/package.json
CHANGED
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
"percy": "percy exec -- node snapshots.js",
|
|
45
45
|
"icon-svgs-to-mixins": "node scripts/convert-svgs-to-icon-mixins.js icons"
|
|
46
46
|
},
|
|
47
|
-
"version": "3.0.0
|
|
47
|
+
"version": "3.0.0",
|
|
48
48
|
"files": [
|
|
49
49
|
"_index.scss",
|
|
50
50
|
"/scss",
|
|
@@ -54,25 +54,22 @@
|
|
|
54
54
|
"dependencies": {
|
|
55
55
|
"@canonical/cookie-policy": "3.3.0",
|
|
56
56
|
"@canonical/latest-news": "1.3.0",
|
|
57
|
-
"autoprefixer": "10.4.
|
|
58
|
-
"postcss": "8.4.
|
|
59
|
-
"postcss-cli": "9.0
|
|
60
|
-
"sass": "1.
|
|
57
|
+
"autoprefixer": "10.4.1",
|
|
58
|
+
"postcss": "8.4.5",
|
|
59
|
+
"postcss-cli": "9.1.0",
|
|
60
|
+
"sass": "1.45.2"
|
|
61
61
|
},
|
|
62
62
|
"devDependencies": {
|
|
63
63
|
"@percy/script": "1.1.0",
|
|
64
64
|
"get-site-urls": "1.1.7",
|
|
65
65
|
"markdown-spellcheck": "1.3.1",
|
|
66
66
|
"parker": "0.0.10",
|
|
67
|
-
"prettier": "2.5.
|
|
68
|
-
"stylelint": "14.
|
|
67
|
+
"prettier": "2.5.1",
|
|
68
|
+
"stylelint": "14.2.0",
|
|
69
69
|
"stylelint-config-prettier": "9.0.3",
|
|
70
70
|
"stylelint-config-recommended-scss": "5.0.2",
|
|
71
71
|
"stylelint-order": "5.0.0",
|
|
72
72
|
"stylelint-prettier": "2.0.0",
|
|
73
73
|
"svgo": "2.8.0"
|
|
74
|
-
},
|
|
75
|
-
"engines": {
|
|
76
|
-
"node": "^14 || ^16 || ^18"
|
|
77
74
|
}
|
|
78
75
|
}
|
package/scss/_patterns_chip.scss
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
@use 'sass:math';
|
|
1
2
|
@import 'settings';
|
|
2
3
|
|
|
3
4
|
@mixin vf-p-chip {
|
|
@@ -54,7 +55,7 @@
|
|
|
54
55
|
flex: 0 0 auto;
|
|
55
56
|
margin-left: $sph--x-small;
|
|
56
57
|
@media (min-width: $breakpoint-x-large) {
|
|
57
|
-
background-size: map-get($icon-sizes, small)
|
|
58
|
+
background-size: math.div(map-get($icon-sizes, small), $font-size-ratio--largescreen); //ensure no rounding happens as it positions the icon off center
|
|
58
59
|
}
|
|
59
60
|
}
|
|
60
61
|
|