Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
scarab-carapace
Advanced tools
scarab-carapace - npm Package Compare versions
Comparing version 2.0.0 to 3.0.0
| { | ||
| "name": "scarab-carapace", | ||
| "version": "2.0.0", | ||
| "description": "Sass UI framework for rapid prototying", | ||
| "main": "scss/carapace.scss", | ||
| "version": "3.0.0", | ||
| "description": "Highly configurable framework for generating functional CSS classes", | ||
| "main": "core.scss", | ||
| "scripts": { | ||
| "kss": "./node_modules/kss/bin/kss --source ./scss --homepage ../README.md --css ./styleguide.min.css --js ./styleguide.js --title Carapace", | ||
| "start": "gulp styleguide && gulp watch & gulp serve", | ||
| "test": "npm run kss" | ||
| "prebuild": "rm -f build/*", | ||
| "build": "node-sass test/test.scss -o build/", | ||
| "postbuild": "npm run split && npm run minify && npm run gzip", | ||
| "split": "sakugawa -n 9999999999 -m separate build/test.css", | ||
| "preminify": "rm -f build/*.min.css", | ||
| "minify": "for file in build/*.css\ndo\n cssnano \"$file\" \"$file\".min \ndone", | ||
| "gzip": "for file in build/*.css.min\ndo\n tar -zcvf \"$file\".tar.gz \"$file\" \ndone", | ||
| "test": "node-sass test/test.scss -o build/" | ||
| }, | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "git+https://github.com/watchtowerdigital/carapace.git" | ||
| "url": "git+https://github.com/watchtowerdigital/scarab-carapace.git" | ||
| }, | ||
@@ -18,10 +23,8 @@ "keywords": [ | ||
| "scss", | ||
| "placeholders", | ||
| "css", | ||
| "atomic", | ||
| "functional", | ||
| "framework", | ||
| "responsive", | ||
| "ui", | ||
| "library", | ||
| "framework", | ||
| "boilerplate", | ||
| "front-end", | ||
| "components" | ||
| "front-end" | ||
| ], | ||
@@ -31,26 +34,13 @@ "author": "Kyle Oliveiro <kyle@watchtower.digital>", | ||
| "bugs": { | ||
| "url": "https://github.com/watchtowerdigital/carapace/issues" | ||
| "url": "https://github.com/watchtowerdigital/scarab-carapace/issues" | ||
| }, | ||
| "homepage": "https://github.com/watchtowerdigital/carapace#readme", | ||
| "homepage": "https://github.com/watchtowerdigital/scarab-carapace#readme", | ||
| "dependencies": { | ||
| "scarab-scss": "^6.0.0" | ||
| }, | ||
| "devDependencies": { | ||
| "autoprefixer": "^6.3.6", | ||
| "babel-core": "^6.9.0", | ||
| "babel-preset-es2015": "^6.9.0", | ||
| "browser-sync": "^2.12.10", | ||
| "css-mqpacker": "^5.0.1", | ||
| "cssnano": "^3.6.2", | ||
| "gulp": "^3.9.1", | ||
| "gulp-load-plugins": "^1.2.4", | ||
| "gulp-postcss": "^6.1.1", | ||
| "gulp-rename": "^1.2.2", | ||
| "gulp-sass": "^2.3.1", | ||
| "gulp-sass-glob": "^1.0.6", | ||
| "gulp-size": "^2.1.0", | ||
| "gulp-sourcemaps": "^1.6.0", | ||
| "gulp-watch": "^4.3.6", | ||
| "kss": "^3.0.0-beta.14" | ||
| }, | ||
| "dependencies": { | ||
| "scarab-scss": "^4.3.0" | ||
| "cssnano-cli": "^1.0.5", | ||
| "node-sass": "^4.5.3", | ||
| "sakugawa": "^0.5.3" | ||
| } | ||
| } |
138
README.md
@@ -1,30 +0,40 @@ | ||
| # Carapace | ||
| # scarab-carapace | ||
| [](https://www.npmjs.com/package/scarab-carapace) [](https://travis-ci.org/watchtowerdigital/carapace) | ||
| [](https://www.npmjs.com/package/scarab-carapace) [](https://travis-ci.org/watchtowerdigital/scarab-carapace) | ||
| **Highly configurable framework for generating single-purpose, functional CSS classes** | ||
| *Carapace* is a Sass framework which generates [functional/atomic CSS](https://css-tricks.com/lets-define-exactly-atomic-css/) classes based on user-defined configuration. It depends on the [`scarab-scss`](https://github.com/watchtowerdigital/scarab) Sass utility library for low-level functions and mixins. | ||
| ## Sass UI framework for rapid prototying | ||
| Although Carapace provides some defaults, it is not an opinionated CSS library. Think of it instead as a tool for rapidly creating custom CSS libraries on a per-project basis. | ||
| Carapace is an extension of the [Scarab utility framework](https://github.com/watchtowerdigital/scarab.git). | ||
| ## Table of contents | ||
| * [**Installation**](#installation) | ||
| * [**Features**](#features) | ||
| * [**Scarab framework**](#scarab-framework) | ||
| * [**Object-oriented approach**](#object-oriented-approach) | ||
| * [**Responsive by default**](#responsive-by-default) | ||
| * [**Vertical rythmn**](#vertical-rythmn) | ||
| * [**Automatic typesetting**](#automatic-typesetting) | ||
| * [**Layout & helper classes**](#layout-helper-classes) | ||
| * [**Component inventory**](#component-inventory) | ||
| * [**Documentation**](#documentation) | ||
| * [**Resources**](#resources) | ||
| - [Features](#features) | ||
| - [Installation](#installation) | ||
| - [Configuration](#configuration) | ||
| - [Variable Management](#variable-management) | ||
| - [Naming Convention](#naming-convention) | ||
| - [Usage](#usage) | ||
| - [Reset/Normalize](#resetnormalize) | ||
| - [Modules](#modules) | ||
| - [Compiling CSS](#compiling-css) | ||
| - [Documentation](#documentation) | ||
| - [Resources](#resources) | ||
| ## Features | ||
| - Functional CSS *(a.k.a. Atomic CSS)* | ||
| - Configuration-driven stylesheets | ||
| - Bring-your-own naming convention | ||
| - Responsive and mobile-first | ||
| - Optional CSS reset/normalize | ||
| - Easily achieve vertical rythmn | ||
| - Automatic styleguides for your project *(with [`scarab-styleguide`](https://github.com/watchtowerdigital/scarab-styleguide))* | ||
| ## Installation | ||
| To get started, add Carapace as a dependency in your project via npm: | ||
| ## Installation | ||
| Install `scarab-carapace` as a dev-dependency in your project via npm: | ||
| ``` | ||
@@ -34,45 +44,80 @@ npm install scarab-carapace --save-dev | ||
| This will download the `scarab-scss` and `scarab-carapace` packages into your project's `node_modules` folder. | ||
| Import the necessary files in your main stylesheet: | ||
| ```scss | ||
| // IMPORTANT | ||
| // | ||
| // Follow the import order below to ensure modules are generated properly. | ||
| At the beginning of your stylesheet, import `scarab.scss` from `scarab-scss` and `carapace.scss` from `scarab-carapace`, like so: | ||
| @import 'path/to/node_modules/scarab-carapace/core'; // Imports scarab-scss, core utils & config | ||
| @import 'custom/config/settings'; // Your custom Carapace settings | ||
| @import 'custom/config/theme'; // Your custom Carapace theme configuration | ||
| @import 'path/to/node_modules/scarab-carapace/config'; // Imports default module config | ||
| @import 'custom/config/modules'; // Your custom Carapace module configuration | ||
| @import 'path/to/node_modules/scarab-carapace/modules'; // Generates CSS classes | ||
| ``` | ||
| ```scss | ||
| // Import Scarab | ||
| @import "path/to/node_modules/scarab-scss/scss/scarab"; | ||
| ## Configuration | ||
| // Import your custom Scarab/Carapace configuration | ||
| @import "path/to/my/config/config.scss"; | ||
| The quickest way to get up to speed on configuring *Carapace* is by looking at the [default configuration files](src/config/). | ||
| // Import Carapace | ||
| @import "path/to/node_modules/scarab-carapace/scss/carapace"; | ||
| ### Variable management | ||
| *Carapace* imports the `scarab-scss` utility library, exposing the `get()` function and `set()` mixin. These utilities allow you to configure the *Carapace* theme and modules. Refer to the [Configuration section](https://github.com/watchtowerdigital/scarab#configuration) of the `README` in `scarab-scss` for more information on `get()` and `set()`. | ||
| ### Naming convention | ||
| With the default naming convention, class names that *Carpace* generates will look something like this: | ||
| ```html | ||
| <section class="bgc:black c:white m(bgc:white) m(c:black) hv(c:grey) m(hv(c:dark-grey))"> | ||
| <p>This section has a 'black' background with 'white' text. | ||
| When hovered, the text color changes to 'grey'.</p> | ||
| <p>On 'medium'-sized screens, it has a 'white' background with 'black' text. | ||
| When hovered, the text color changes to 'dark-grey'.</p> | ||
| </section> | ||
| ``` | ||
| Importing the Scarab framework creates a new global variable, `$SCARAB` in your Sass project. This is where your stylesheet configuration is stored. | ||
| Breakpoint and state shorthands and values can be configured in the `breakpoints` and `states` maps, while the selector format, prefixes and suffixes can be customized by changing the values of the following keys in `$SCARAB`: | ||
| - `selector-format` | ||
| - `root-prefix` | ||
| - `root-suffix` | ||
| - `variant-prefix` | ||
| - `variant-suffix` | ||
| - `modifier-prefix` | ||
| - `modifier-suffix` | ||
| - `breakpoint-prefix` | ||
| - `breakpoint-suffix` | ||
| - `state-prefix` | ||
| - `state-suffix` | ||
| For more information on configuring Scarab and Carapace, refer to [Scarab: Configuration](https://github.com/watchtowerdigital/scarab#configuration) and the official Configuration section of Carapace's documentation. | ||
| Be sure to prefix any special characters in the `selector-format`, `*-prefix` and `*-suffix` values with a `\`, so that generated CSS class names are properly escaped. | ||
| ## Features | ||
| ## Usage | ||
| ### Scarab framework | ||
| Carapace is an extension of the [Scarab utility framework](https://github.com/watchtowerdigital/scarab.git). Scarab's functions and mixins are compatible with Carapace. | ||
| ### Reset/Normalize | ||
| These styles are included by default. If you wish to turn them off, set the `reset-styles` and/or `normalize-styles` keys in `$SCARAB` to `false`. | ||
| ### Object-oriented approach | ||
| Designed with an object-oriented approach in mind. Carapace kickstarts your projects and helps you write scalable and maintainable stylesheets. | ||
| ### Modules | ||
| Modules are single-purpose, functional CSS classes. Module class names and values are dynamically generated by *Carapace*, depending on the values set in the global `$SCARAB` variable. | ||
| ### Responsive by default | ||
| Everything is designed for mobile first. Use breakpoint hooks which are available on some helper and layout classes to fine-tune your interface at different breakpoints. | ||
| Module class names consist of a `root`, and optionally: `variant`, `modifier`, `breakpoint` and `state`. | ||
| ### Vertical rythmn | ||
| Achieve vertical rythmn by default. Use the `bl()` and `type-scale()` functions and mixins to ensure consistent spacings throughout your interface. | ||
| In Caparace, configuration for a module typically looks like this: | ||
| ```scss | ||
| @include set-default( modules, 'opacity', ( | ||
| root : 'o', // String which defines the module's `root` | ||
| values : get(opacity), // Map of `modifier` names to CSS property values | ||
| states : get-keys(states), // List of `state` names | ||
| breakpoints : get-keys(breakpoints) // List of `breakpoint` names | ||
| ) ); | ||
| ``` | ||
| ### Automatic typesetting | ||
| Scarab includes styles to apply a consistent visual heirarchy to typographical elements. | ||
| Refer to the [`modules/`](src/modules/) folder for more information on how to configure modules. | ||
| ### Layout and helper classes | ||
| Included are layout classes which help with rapid prototyping, and helper classes which overwrite specific styles on an element. | ||
| ### Compiling CSS | ||
| *Carapace* does not include a build step to compile Sass to CSS. The following tasks are recommended for production: | ||
| ### Component inventory | ||
| Carapace provides a convenient method for managing the UI "components" for your application. | ||
| - Prefix compiled CSS for cross-browser compatibility ([`autoprefixer`](https://github.com/postcss/autoprefixer)) | ||
| - Minify compiled CSS ([`cssnano`](https://github.com/ben-eb/cssnano)) | ||
| - Separate base CSS from styles in media queries ([`sakugawa`](https://github.com/paazmaya/sakugawa)) | ||
| - Inline base CSS, and `<link>` media query styles | ||
@@ -82,9 +127,10 @@ | ||
| ## Documentation | ||
| Documentation is a work-in-progress. | ||
| Documentation is available at [https://watchtowerdigital.github.io/carapace/](https://watchtowerdigital.github.io/carapace/). | ||
| ## Resources | ||
| * [**scarab-scss**](https://github.com/watchtowerdigital/scarab.git) — Sass utility framework for rapid stylesheet development | ||
| * [**scarab-styleguide**](https://github.com/watchtowerdigital/scarab-styleguide.git) — Generate automatic styleguides from scarab-carapace configuration | ||
| * [**scarab-cli**](https://github.com/watchtowerdigital/scarab-cli.git) — Command-Line Interface for the Scarab Sass ecosystem | ||
| * [**scarab-snippets**](https://github.com/watchtowerdigital/scarab-snippets.git) — Sublime Text snippets for the Scarab Sass utility framework |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Empty package
Supply chain riskPackage does not contain any code. It may be removed, is name squatting, or the result of a faulty package publish.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Shell access
Supply chain riskThis module accesses the system shell. Accessing the system shell increases the risk of executing arbitrary code.
Found 1 instance in 1 package
Dynamic require
Supply chain riskDynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.
Found 1 instance in 1 package
Mixed license
License(Experimental) Package contains multiple licenses.
Found 1 instance in 1 package
Improved metrics
- Dev dependency count
- decreased by-81.25%
3
- Number of package files
- increased by70.41%
288
- Number of low license alerts
- decreased by-100%
0
- Number of lines in readme file
- increased by51.69%
135
- Number of low supply chain risk alerts
- decreased by-100%
0
Worsened metrics
- Total package byte prevSize
- decreased by-82.87%
114974
- Lines of code
- decreased by-100%
0
- Number of medium supply chain risk alerts
- increased by100%
2
Dependency changes
+ Addedscarab-scss@6.1.8(transitive)
- Removedscarab-scss@4.3.0(transitive)
Updatedscarab-scss@^6.0.0