radium - npm Package Compare versions

Comparing version 0.0.1 to 0.9.0

package.json

 {
   "name": "radium",
-  "version": "0.0.1"
+  "version": "0.9.0",
+  "description": "",
+  "main": "modules/index.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/formidablelabs/radium.git"
+  },
+  "homepage": "https://github.com/formidablelabs/radium",
+  "bugs": "https://github.com/formidablelabs/radium/issues",
+  "directories": {
+    "example": "examples"
+  },
+  "authors": [
+    "Alex Lande"
+  ],
+  "scripts": {
+    "examples": "webpack-dev-server --config examples/webpack.config.js --no-info --content-base examples/"
+  },
+  "license": "MIT",
+  "peerDependencies": {
+    "react": "0.12.x"
+  },
+  "dependencies": {
+    "lodash": "^3.2.0"
+  },
+  "devDependencies": {
+    "jsx-loader": "^0.12.2",
+    "react": "0.12.x",
+    "webpack": "^1.5.3",
+    "webpack-dev-server": "^1.7.0"
+  }
 }

README.md

 # Radium
 
-An element styling UI framework for React.
+Radium is a **toolchain** for handling modifiers, states, computed styles and
+responsive styles when working with **inline styles in react components**
+(at Formidable, we call this _component styling_ because styles are specific to,
+and scoped to, the component rather than in external style sheets). 
+Radium allows you to handle complex component styling in a declarative, 
+easy to write way. Component styling in React provides a number of 
+benefits over traditional CSS:
 
-Radium is a highly configurable toolkit for building large-scale web
-applications with React and element styling. Element styling in React provides a
-number of benefits over traditional CSS:
-
 - Scoped styles, meaning no more global variables
@@ -15,23 +17,62 @@ - Avoids specificity conflicts
 
-Radium uses these benefits to create UI components to get you running quickly.
-It can be used out of the box for prototypes and experiments, or themed and
-customized to fit any design language.
-
-It provides reusable components and tools for your own element styling.
-
 Inspired by <a href="https://speakerdeck.com/vjeux/react-css-in-js">React: CSS
 in JS</a> by <a href="https://twitter.com/Vjeux">Christopher Chedeau</a>.
 
-## What's Included
+## Docs
 
-- Shared Styles
-  - Color
-  - Typography
-- UI Components
-  - Button
-  - Form controls
-  - Responsive grid system
-  - More coming soon!
-- Styling Utilities
-  - Pseudo-selector support
-  - Media query support
+- [Guides](docs/guides)
+  - [Overview](docs/guides/overview.md)
+  - [Media Queries](docs/guides/media-queries.md)
+  - [Computed Styles](docs/guides/computed-styles.md)
+- [API Docs](docs/api)
+
+## What does it look like?
+
+Start by writing a style object with a combination of default styles, browser states, media queries, and modifiers. Pass the object to `this.buildStyles()` and Radium will determine the correct group of style rules to apply to your component.
+
+```js
+render: function () {
+  var styles = {
+    padding: '1.5em',
+    borderRadius: 4,
+    font-size: window.devicePixelRatio === 2 ? "16px" : "14px",
+    height: function () {
+      return window.innerWidth / 2 + "px";
+    },
+
+    states: [
+      { hover: { color: '#fff' }},
+      { focus: { boxShadow: '0 0 0 5px'}}
+    ],
+
+    mediaQueries: [
+      { small: { margin: 10 }},
+      { large: { margin: 30 }}
+    ],
+
+    modifiers: [
+      {
+        type: {
+          primary: { background: '#0074D9' },
+          warning: { background: '#FF4136' }
+        }
+      }
+    ]
+  };
+
+  return (
+    <div style={this.buildStyles(styles)} />
+  );
+}
+```
+
+For more in-depth usage, see the [overview guide](docs/guides/overview.md).
+
+## Examples
+
+To see local examples in action, do this:
+
+```
+npm install
+npm run examples
+```

New alerts

Major refactor

Supply chain risk

Package 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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

Empty package

Supply chain risk

Package 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

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Found 1 instance in 1 package

No License Found

License

(Experimental) License information could not be found.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

28469

increased by2502.29%

Number of package files

19

increased by850%

Number of low license alerts

0

decreased by-100%

Lines of code

462

increased byInfinity%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

78

increased by110.81%

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dependency count

2

increased byInfinity%

Dev dependency count

4

increased byInfinity%

Number of medium supply chain risk alerts

2

increased by100%

Dependency changes

• + Addedlodash@^3.2.0

• + Addedacorn@5.7.4(transitive)

• + Addedamdefine@1.0.1(transitive)

• + Addedast-types@0.9.6(transitive)

• + Addedbalanced-match@1.0.2(transitive)

• + Addedbase62@1.2.8(transitive)

• + Addedbrace-expansion@1.1.11(transitive)

• + Addedcommander@2.20.3(transitive)

• + Addedcommoner@0.10.8(transitive)

• + Addedconcat-map@0.0.1(transitive)

• + Addeddefined@1.0.1(transitive)

• + Addeddetective@4.7.1(transitive)

• + Addedenvify@3.4.1(transitive)

• + Addedesprima@3.1.3(transitive)

• + Addedesprima-fb@15001.1.0-dev-harmony-fb(transitive)

• + Addedglob@5.0.15(transitive)

• + Addedgraceful-fs@4.2.11(transitive)

• + Addediconv-lite@0.4.24(transitive)

• + Addedinflight@1.0.6(transitive)

• + Addedinherits@2.0.4(transitive)

• + Addedjstransform@11.0.3(transitive)

• + Addedlodash@3.10.1(transitive)

• + Addedminimatch@3.1.2(transitive)

• + Addedminimist@1.2.8(transitive)

• + Addedmkdirp@0.5.6(transitive)

• + Addedobject-assign@2.1.1(transitive)

• + Addedonce@1.4.0(transitive)

• + Addedpath-is-absolute@1.0.1(transitive)

• + Addedprivate@0.1.8(transitive)

• + Addedq@1.5.1(transitive)

• + Addedreact@0.12.2(transitive)

• + Addedrecast@0.11.23(transitive)

• + Addedsafer-buffer@2.1.2(transitive)

• + Addedsource-map@0.4.40.5.7(transitive)

• + Addedthrough@2.3.8(transitive)

• + Addedwrappy@1.0.2(transitive)