New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

@barguide/style-guide

Package Overview
Dependencies
Maintainers
1
Versions
73
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@barguide/style-guide - npm Package Compare versions

Comparing version 0.0.2 to 0.0.3

dist/build/bundler/helpers.d.ts

8

CHANGELOG.md

@@ -6,4 +6,12 @@ # Change Log

## [0.0.3](https://github.com/barguide/taps/compare/@barguide/style-guide@0.0.2...@barguide/style-guide@0.0.3) (2020-05-12)
**Note:** Version bump only for package @barguide/style-guide
## 0.0.2 (2020-05-05)
**Note:** Version bump only for package @barguide/style-guide

2

dist/index.umd.js
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
typeof define === 'function' && define.amd ? define(['exports'], factory) :
(global = global || self, factory(global.Component = {}));
(global = global || self, factory(global.default = {}));
}(this, (function (exports) { 'use strict';

@@ -6,0 +6,0 @@

@@ -5,3 +5,3 @@ {

"name": "@barguide/style-guide",
"version": "0.0.2",
"version": "0.0.3",
"--------": "--------------------------------------------------------",

@@ -38,3 +38,3 @@ "bugs": {

},
"gitHead": "39bfae9f29955cd934974a0487f7026448733483"
"gitHead": "ea82b5c6e277288080e870f7f4926f06651021a5"
}

@@ -1,39 +0,3 @@

# Applications CSS
# @barguide/style-guide
This folder should remain pretty slim. Everything in here should have and continue to follow the patterns provided. If we need 100 yellows that's fine but, we need to follow the `--spot` convention and carefully name things.
**Folder Structure:**
The basic idea is to separate concerns and minimize duplication of code. No longer will variables need to live everywhere in the site, they will **ALWAYS** be in the variables folder. If you need one off variables in your Component just create a `:root {}` tag in the CSS module limit the scope to that file.
## Base
These files reset and normalize our CSS. It sets up the overall `feel` for `Applications` and should remain extremely simple. Using this approach we will eventually be able to throw together a page of just standard tags with no classes, and it would still `feel right`.
## Global
This folder is imported into this new `style-guide`. This serves as an easy spot to add new `Global CSS` that will not be parsed through the CSS Module loader, meaning it will output `Standard CSS` which is very useful for 3rd party / vendor code.
## Variables
Colors, grid, typography and all that good stuff goes in here, as a variable within a `:root {}` tag. Following this pattern, we can `@import 'node_modules/@barguide/style-guide/src/variables/index.css'` from each new CSS module. The variables values are brought in to replace our `var()` with the value from the style-guide producing `0` waste or duplication.
**Note:** If, we were to add standard `.selector { color: orange; }` in these files, that CSS would be brought into EACH and EVERY file that imported it 👎 👎 👎
### Style linter
The basic idea here is the same as Eslint... We can enforce rules and standards around how we write CSS. This is setup to run on all CSS files in the shop application.
- prevent the usage of ID selectors,
- the are less performant
- Preferred spacing and allowed values
- ex: don't use seconds, instead use `milliseconds`
- Avoid compound selectors ie: `a.link-class` -> `.link-class`
- Avoid long selectors (capped at 3)
**Note:** we can still disable these rules as needed:
```css
/* stylelint-disable-line */
/* stylelint-disable-next-line */
```
This package is a high level abstraction of our site-wide CSS for [BarGuide.io](https://barguide.io).
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc