@webpixels/css - npm Package Compare versions

Comparing version 1.1.93 to 1.2.13

package.json

 {
-    "name": "@webpixels/css",
-    "description": "Utility and component-centric Design System based on Bootstrap for fast, responsive UI development.",
-    "version": "1.1.93",
-    "version_short": "1.1",
-    "license": "MIT",
-    "style": "dist/index.css",
-    "sass": "index.scss",
-    "keywords": [
-        "webpixels",
-        "css",
-        "sass",
-        "mobile-first",
-        "responsive",
-        "front-end",
-        "framework",
-        "web",
-        "bootstrap",
-        "component-centric",
-        "utilities"
-    ],
-    "homepage": "https://webpixels.io",
-    "author": "Webpixels (https://webpixels.io)",
-    "contributors": [
-        "Alexis Enache <[e-mail]>"
-    ],
-    "repository": {
-        "type": "git",
-        "url": "git+https://github.com/webpixels/css.git"
-    },
-    "bugs": {
-        "url": "https://github.com/webpixels/css/issues"
-    },
-    "scripts": {
-        "build": "npm run css",
-        "css-compile": "sass --load-path=node_modules --style=compressed --source-map --embed-sources src:dist/",
-        "css-lint": "stylelint src/",
-        "css-prefix": "postcss --replace dist/index.css --use autoprefixer --map",
-        "css-purge": "purgecss --css dist/index.css --content index.html --output dist/css/",
-        "css": "npm-run-all css-compile css-prefix",
-        "postpublish": "script/postpublish",
-        "prepublishOnly": "script/prepublish",
-        "server": "serve --listen 3000",
-        "start": "npm-run-all --parallel watch server",
-        "watch": "nodemon -e html,scss -x \"npm run css\"",
-        "test": "npm run css-lint && npm run css"
-    },
-    "peerDependencies": {
-        "@popperjs/core": "^2.9.2",
-        "bootstrap": "^5.1.3"
-    },
-    "devDependencies": {
-        "autoprefixer": "^10.2.6",
-        "nodemon": "^2.0.7",
-        "npm-run-all": "^4.1.5",
-        "postcss": "^8.3.0",
-        "postcss-cli": "^8.3.1",
-        "purgecss": "^4.0.3",
-        "sass": "^1.35.1",
-        "serve": "^11.3.2"
-    }
+  "name": "@webpixels/css",
+  "description": "Utility and component-centric design system based on Bootstrap for fast, responsive UI development.",
+  "version": "1.2.13",
+  "version_short": "1.2",
+  "license": "MIT",
+  "style": "dist/index.css",
+  "sass": "index.scss",
+  "keywords": [
+    "webpixels",
+    "bootstrap",
+    "design-system",
+    "ui-components",
+    "html",
+    "css",
+    "sass",
+    "responsive",
+    "front-end",
+    "framework",
+    "web",
+    "component-centric",
+    "utilities"
+  ],
+  "homepage": "https://webpixels.io",
+  "author": "Webpixels (https://webpixels.io)",
+  "contributors": [
+    "Alexis Enache <[e-mail]>"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/webpixels/css.git"
+  },
+  "bugs": {
+    "url": "https://github.com/webpixels/css/issues"
+  },
+  "scripts": {
+    "build": "npm run css",
+    "css:compile": "sass --load-path=node_modules --style=compressed --source-map --embed-sources scss:dist/",
+    "css:lint": "stylelint \"**/*.{css,scss}\" --cache --cache-location .cache/.stylelintcache --rd",
+    "css:prefix": "postcss --replace dist/*.css --use autoprefixer --map",
+    "css:purge": "purgecss --css dist/index.css --content index.html --output dist/css/",
+    "css:fusv": "fusv scss/ site/assets/scss/",
+    "css": "npm-run-all css:compile css:prefix",
+    "postpublish": "script/postpublish",
+    "prepublishOnly": "script/prepublish",
+    "server": "serve --listen 3000",
+    "start": "npm-run-all --parallel watch server",
+    "watch": "nodemon -e html,scss -x \"npm run css\"",
+    "test": "npm run css:lint && npm run css"
+  },
+  "peerDependencies": {
+    "@popperjs/core": "^2.11.6",
+    "bootstrap": "^5.2.2"
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.2.6",
+    "find-unused-sass-variables": "^4.0.4",
+    "install": "^0.13.0",
+    "nodemon": "^2.0.7",
+    "npm": "^8.19.2",
+    "npm-run-all": "^4.1.5",
+    "postcss": "^8.3.0",
+    "postcss-cli": "^8.3.1",
+    "purgecss": "^4.0.3",
+    "sass": "^1.35.1",
+    "serve": "^14.0.1",
+    "stylelint": "^14.11.0",
+    "stylelint-config-prettier-scss": "^0.0.1",
+    "stylelint-config-standard-scss": "^5.0.0",
+    "stylelint-config-twbs-bootstrap": "^6.0.0"
+  }
 }

README.md

@@ -32,10 +32,19 @@ <p align="center"><a href="https://webpixels.io/start" target="_blank"><img src="https://webpixels.s3.eu-central-1.amazonaws.com/public/github/logo.png" width="200" height=""></a></p>
 
-## Import the styles into your CSS
+## Create the Sass files
 
+In your `scss` folder create two new files and name them:
+
+- main.scss
+- utility.scss
+
+### Import the base styles and components
+
 In your main.scss, you’ll import the source Sass files. Bootstrap is automatically loaded when you use the source files, so you don't need to worry about what Bootstrap files should you incorporate in your styles.
 
-You have two options: include all of styles at once:
+```scss
+@import "@webpixels/css/base";
+@import "@webpixels/css/forms";
 
-```scss
-@import "@webpixels/css";
+// Load all the components
+@import "@webpixels/css/components";
 ```
@@ -48,3 +57,20 @@
 @import "@webpixels/css/forms";
-@import "@webpixels/css/components";
+
+// Load only the components you use
+@import "@webpixels/css/components/alerts";
+@import "@webpixels/css/components/avatars";
+@import "@webpixels/css/components/buttons";
+@import "@webpixels/css/components/navbars";
+@import "@webpixels/css/components/cards";
+```
+
+[**Click here**](https://github.com/webpixels/css/blob/master/scss/components/_index.scss) to see the complete list of available components.
+
+### Import the utility classes
+
+In Webpixels CSS you'll notice that we don't create custom styles, but rather make use of the utility classes. We are using the new Bootstrap Utility API to generate a comprehensive list of classes.
+
+In your utility.scss you'll import all the utilities:
+
+```scss
 @import "@webpixels/css/utilities";
@@ -55,8 +81,22 @@ ```
 
-Check out our [documentation website](https://webpixels.io/docs).
+Check out our [documentation website](https://webpixels.io/docs?ref=github).
 
-## UI Components
+## Integrations
 
-Explore, copy, use and mix hundreds of carefully crafted components made just for Bootstrap. [Explore components](https://webpixels.io/components)
+If you want to see how it works, check out these functional examples of using Bootstrap and Webpixels CSS in common JS frameworks like Webpack, Parcel, Vite, and more!
 
+[See all integrations](https://github.com/webpixels/css/tree/master/integrations)
+
+## Detailed UI components library
+
+Explore, copy, use and mix hundreds of carefully crafted components made just for Bootstrap.
+
+[Explore components](https://webpixels.io/components?ref=github)
+
+## Beautiful designer-made templates
+
+Get your new web design project started with these amazing templates, or copy and paste elements into your existing projects to give them a creative boost.
+
+[Explore templates](https://webpixels.io/templates?ref=github)
+
 ## Community
@@ -66,8 +106,13 @@
 
-- Follow [@webpxs](https://twitter.com/intent/user?screen_name=webpxs) on Twitter
+- Follow [@webpixels_](https://twitter.com/intent/user?screen_name=webpixels_) on Twitter
+- Get inspired through our designs on [Dribbble](https://dribbble.com/webpixels)
 - Read and subscribe to [The Official Webpixels Blog](https://webpixels.io/blog)
 - Join [Github Discussions](https://github.com/webpixels/css/discussions)
 
+## Thank you
+
+- [Mark Otto and the Team](https://github.com/twbs/bootstrap)
+
 ## License
 
-Webpixels CSS is open-sourced software licensed under the [MIT license](https://github.com/webpixels/css/blob/master/LICENSE).
+Made with ❤️ by [Webpixels](https://webpixels.io?ref=github). Webpixels CSS is open-sourced software licensed under the [MIT license](https://github.com/webpixels/css/blob/master/LICENSE).

New alerts

Unpublished package

Supply chain risk

Package version was not found on the registry. It may exist on a different registry and need to be configured to pull from that registry.

Found 1 instance in 1 package

Uses eval

Supply chain risk

Package uses eval() which is a dangerous function. This prevents the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

8442167

increased by191.75%

Number of package files

308

increased by121.58%

Lines of code

55517

increased by1368.32%

Number of lines in readme file

115

increased by64.29%

Worsened metrics

Dev dependency count

15

increased by87.5%

Number of medium supply chain risk alerts

3

increased byInfinity%

No dependency changes