@texastribune/queso-ui - npm Package Compare versions

Comparing version 8.4.0 to 8.5.0

package.json

 {
   "name": "@texastribune/queso-ui",
-  "version": "8.4.0",
+  "version": "8.5.0",
   "description": "Asset library of SCSS and SVG files",
@@ -116,11 +116,11 @@ "scripts": {
     "fast-glob": "^3.0.1",
-    "fs-extra": "^8.0.1",
+    "fs-extra": "^9.0.0",
     "glob-watcher": "^5.0.3",
     "kss": "https://github.com/kss-node/kss-node",
     "markdown-it": "^10.0.0",
-    "np": "^6.0.0",
+    "np": "^6.2.0",
     "nunjucks": "^3.1.7",
     "ora": "^4.0.1",
     "passes-wcag": "^0.2.1",
-    "prettier": "1.19.1",
+    "prettier": "2.0.2",
     "purgecss": "^2.0",
@@ -134,6 +134,3 @@ "purgecss-from-html": "^2.0.3",
     "sass-mq": "^5.0.0"
-  },
-  "engines": {
-    "yarn": "YARN NO LONGER USED - use npm instead."
   }
 }

README.md

@@ -14,5 +14,5 @@ # @texastribune/queso-ui
 
-## Installing as a dependency
-To use this library in your project, install the SCSS and SVG files as a dependency.
+## Getting started
 
+### 1. Add the assets as a dependency
 ```sh
@@ -22,164 +22,53 @@ npm install @texastribune/queso-ui --save-dev
 
-Hint: Use [queso-tools](https://github.com/texastribune/queso-tools) to for help compiling into CSS and/or an SVG sprite.
+### 2. Create an imports file
 
+You'll rarely need all of the [components](https://texastribune.github.io/queso-ui/pages/components/index.html) or [layouts](https://texastribune.github.io/queso-ui/pages/layout/index.html) so just take what you need for your project and override as you please.
 
-
-
-
-## Contributing to this CSS Framework
-
-### Previewing the docs
-To preview these assets and accompanying docs locally, run the following commands:
-```sh
-npm install
-```
-
-```sh
-npm run dev
-```
-Visit http://localhost:3000
-
-This spins up a browsersync server and watch task for all SCSS and HTML files.
-
-**Requirements**
-- node >=8.11.3 (to be replaced with a docker container)
-
-
-### Organization
-| directory          | description              |
-| -----------       | --------------------|
-| assets/scss       | Various SASS files establishing our CSS framework |
-| assets/icons      | Sets of individual SVG icons used throughout our products            |
-| docs      | Tools and templates to statically render documentation, code examples, and usage info for our design system         |
-
-
-### SCSS docs boilerplate
-
-When you add a new class, component, scss variable, mixin, etc., you'll want to add a short bit of syntax to enable it to appear in the docs. Use the boilerplate below to get started.
-
-> How to document a new CSS class
-
-We use a comment parser along with some [extra logic](https://github.com/texastribune/queso-ui/blob/master/tasks/style-doc.js) to generate our docs. To add a new section of documentation, add a boilerplate above your CSS rules like the one below: 
-
+Example:
 ```scss
-// Title of Section (root-class-name)
-//
-// Description {{isWide}} {{isHelper}}
-//
-// root-class-name-modifier - desc
-//
-// Markup: 6-components/test/test.html
-//
-// Keywords: category1, category2
-//
-// Styleguide 6.0.1
-//
-.root-class-name {
-  // your styles
-}
-```
-- `{{isWide}}` is used to display the demo of each modifier at full width
-- `{{isHelper}}` is used to hide main demo and only display modifiers
-- `{{isRecipe}}` is used to document standard design element that doesn't need any extra CSS. This signifies that it's a section of the docs that's used as a handy recipe of helper classes that accomplish a commonly used look.
-- `// Deprecated` is used to signify a class to be removed. See _Deprecating a CSS class_ for details.
+// styles.scss
 
+@import '@texastribune/queso-ui/assets/scss/1-settings/all';
+// Optional: Add overrides to queso SCSS variables or new variables here
+// @import 'settings/all';
+// @import 'settings/my-custom-vars';
 
-### Naming and organization
+@import '@texastribune/queso-ui/assets/scss/2-tools/all';
+@import '@texastribune/queso-ui/assets/scss/3-resets/all';
+@import '@texastribune/queso-ui/assets/scss/4-elements/all';
+@import '@texastribune/queso-ui/assets/scss/5-typography/all';
 
-When building CSS dispersed on a variety of platforms, it can be difficult to know where certain style rules should live and what to call them. We use the following guideline to help with those decisions as we scale our framework.
+// components
+@import '@texastribune/queso-ui/assets/scss/6-components/icon/icon';
+@import '@texastribune/queso-ui/assets/scss/6-components/navbar/navbar';
+@import '@texastribune/queso-ui/assets/scss/6-components/site-footer/site-footer';
 
-#### ITCSS
-We organize our SCSS files with the [inverted triangle](https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/) approach in mind. We put our own spin on it by adding a `typography` and `layouts` folder, but the general idea is all the same; increased specificity as you move down the stylesheet.
+// Optional: Add overrides to queso components or new components here
+// @import 'components/navbar';
+// @import 'components/site-footer';
+// @import 'components/my-custom-component';
 
-#### BEM
-We closely follow the BEM (Block Element Modifier) class naming convention in our `components` folder, but we break BEM rules in other places. This is a deliberate attempt to create a hybrid approach of using BEM when scoped to a component and helper classes when styling globally in a more ad hoc context.
+// layout
+@import '@texastribune/queso-ui/assets/scss/7-layout/align';
+@import '@texastribune/queso-ui/assets/scss/7-layout/container';
+@import '@texastribune/queso-ui/assets/scss/7-layout/content-grid';
+@import '@texastribune/queso-ui/assets/scss/7-layout/display';
+@import '@texastribune/queso-ui/assets/scss/7-layout/width';
 
-#### Namespacing
-Use namespacing for quick reference of the function of a CSS class. The following key can be used as a guideline for naming your class:
+// utilities
+@import '@texastribune/queso-ui/assets/scss/utilities/all';
 
----
-
-Components
-```css
-.c-component-name[__<element>|--<-modifier>] {}
 ```
-_Example: `c-button`_
 
----
+Note: You may need to adjust the paths on the @imports to something like `@import 'node_modules/@texastribune/queso-ui/assets/scss/1-settings/all';`
 
-Typography
-```css
-.t-type-util {}
-```
-_Example: `t-headline`_
 
----
+### 3. Compile SCSS into CSS
 
-Layout
-```css
-.l-layout-util {}
-```
-_Example: `l-container`_
+In many projects, we use [queso-tools](https://github.com/texastribune/queso-tools) to handle compiling assets.
 
----
+Alternatively, [dart-sass](https://www.npmjs.com/package/sass) is a great, low-dependency compiler.
 
-Utilities
-```css
-.[is|has]-state {}
-```
-_Example: `has-bg-yellow`_
-
 ---
 
-### Publishing
-
-Make sure you're authenticated for npm publishing.
-
-1. `npm login` - then follow the prompts
-2. `npm run release` - Then use semantic versioning to release your change.
-
-#### Semantic versioning
-The npm helper we use for versioning simplifies matching version numbers with the various `MAJOR`, `MINOR`, `PATCH` increment types. For guidance on what type of release you're making, refer to [https://semver.org/](https://semver.org/)
-
-Generally, you could base your increment type on the following list:
-
-- MAJOR version = CSS changes that visually break layouts where `queso-ui` is used on production
-- MINOR version = CSS changes that have no visual effect on production
-- PATCH version = CSS changes that fix a previous bug introduced on production or in development 
-
-#### Steps to test breaking changes:
-
-## Using this system in our products
-This system is experimental and under rapid development. Use it in situations where it makes sense for the scope of your task.
-
-**Do** use this system when...
-- Coding a new template from scratch (new landing pages)
-- Creating something in a isolated environment outside of legacy systems (newsletters, new static sites, UMP)
-
-**Don't** use this system when...
-- Making a small CSS change to the legacy system (tiny visual tweak to our main repo)
-- The system creates an unnecessarily layer of complexity (take the path of least resistance)
-
-
-
-1. Publish these changes on npm: `npm run release`. Copy the version number.
-2. Create a new branch in the repo in question.
-3. `npm install @texastribune/queso-ui@VERSION`
-4. Compile the CSS
-5. Scan the various places where queso-ui is used. At the time of writing, that's most of texastribune.org.
-
-##  Features/Wishlist
-
-* [x] Watch task
-* [x] Pre commit linting
-* [x] Fix code preview
-* [x] Allow for hiding main demo
-* [x] GitHub search feature (needs automation)
-* [x] Cache busting hash options for assets
-* [ ] File size tracker
-* [ ] Component status tracker
-* [ ] Accessibility compliance checking
-* [ ] VS code comment snippet
-* [ ] Way to easily build universal stylesheet
-* [ ] Way to easily build universal sprite
-* [ ] Establish a merge to master deployment flow
+[Contributing to this CSS Framework](/contributing.md)

No alert changes

Improved metrics

Total package byte prevSize

323873

increased by10.3%

Number of package files

175

increased by2.94%

Worsened metrics

Number of lines in readme file

72

decreased by-60.87%

No dependency changes