postcss-structure - npm Package Compare versions

Comparing version 0.8.5 to 0.9.0

package.json

 {
   "name": "postcss-structure",
-  "version": "0.8.5",
-  "description": "A PostCSS plugin to create CSS grids based on a fixed block width.",
+  "version": "0.9.0",
+  "description": "Deprecated. Check postcss-grid-system",
   "keywords": [
@@ -19,3 +19,3 @@ "postcss",
     "type": "git",
-    "url": "https://github.com/francoisromain/postcss-structure.git"
+    "url":  "https://github.com/francoisromain/postcss-structure.git"
   },
@@ -25,36 +25,3 @@ "bugs": {
   },
-  "homepage": "https://github.com/francoisromain/postcss-structure",
-  "dependencies": {
-    "postcss": "^5.0.19"
-  },
-  "scripts": {
-    "build": "babel src --out-dir lib",
-    "test": "ava && eslint *.js"
-  },
-  "main": "./lib/index.js",
-  "devDependencies": {
-    "ava": "^0.14.0",
-    "babel-cli": "^6.7.5",
-    "babel-preset-es2015": "^6.6.0",
-    "babel-register": "^6.7.2",
-    "eslint": "^2.8.0",
-    "eslint-config-airbnb": "^7.0.0",
-    "eslint-plugin-react": "^5.0.1"
-  },
-  "eslintConfig": {
-    "extends": "airbnb"
-  },
-  "ava": {
-    "files": [
-      "test/tests.js"
-    ],
-    "require": [
-      "babel-register"
-    ]
-  },
-  "babel": {
-    "presets": [
-      "es2015"
-    ]
-  }
-}
+  "homepage": "https://github.com/francoisromain/postcss-structure"
+}

README.md

@@ -1,248 +0,1 @@
-# postcss-structure [![Build Status][ci-img]][ci]
-
-[francoisromain.github.io/postcss-structure](http://francoisromain.github.io/postcss-structure)
-
-A [PostCSS] plugin to create grid systems based on a fixed column width.
-
-[PostCSS]: https://github.com/postcss/postcss
-[ci-img]:  https://travis-ci.org/francoisromain/postcss-structure.svg
-[ci]:      https://travis-ci.org/francoisromain/postcss-structure
-
-* * * 
-
-## Installation
-
-Install the [npm module](https://www.npmjs.com/package/postcss-structure):
-
-    $ npm install postcss-structure --save-dev
-
-Require the PostCSS plugin:
-
-``` js
-postcss([ require('postcss-structure') ])
-```
-
-See [PostCSS usage](https://github.com/postcss/postcss#usage) to setup with Gulp, Grunt, Webpack, npm scripts… 
-
-##### Example with a [npm script](https://docs.npmjs.com/misc/scripts) and [postcss-cli](https://www.npmjs.com/package/postcss-cli):
-
-    $ npm install postcss-cli --save-dev
-
-Add a script to package.json:
-
-``` js
-"scripts": {
-  "build": "postcss -u postcss-structure -i src/styles.css -o dist/styles.css"
-}
-```
-
-    $ npm run build
-
-* * * 
-
-## Configuration
-
-Global settings rule (and default values):
-
-``` css
-
-@structure {
-  unit:    20.5rem,  /* width of a single column */
-  gutter:  1.5rem,   /* width of the gutter */
-  padding: 1.5rem,   /* padding of the main container */
-  max:     8,        /* maximum number of blocs (wide screens) */
-  min:     2,        /* minimum number of blocs (mobile) */
-  align:   center,   /* center or left */ 
-  display: flex      /* float or flex */  
-}
-```
-
-A media-query is created for each _unit_ multiple, from _min_ to _max_. When the screen is narrower than _min_ * _unit_, elements are fluids. 
-
-* * * 
-
-## Usage
-
-- [Containers](#containers)
-- [Rows](#rows)
-- [Blocs](#blocs)
-- [Fractions](#fractions)
-- [Blobs](#blobs)
-- [Columns](#columns)
-- [Show](#show)
-- [Hide](#hide)
-- [Right](#right)
-- [Media-queries](#media-queries)
-
-### Containers
-
-`structure: container`
-
-The container width is set for each media-query.
-
-``` css
-
-.my-container {
-  structure: container;
-}
-
-```
-
-Example: [input](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/src/01.css), [output](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/dist/01.css), [markup](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/01.html), [demo](http://localhost/francoisromain.github.io/postcss-structure/test/01.html)
-
-### Rows
-
-`structure: row`
-
-Rows are intended to contain either a _bloc_ or a _blob_ element. They have a negative right margin.
-
-``` css
-
-.my-row {
-  structure: row;
-}
-
-```
-
-Example: [input](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/src/02.css), [output](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/dist/02.css), [markup](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/02.html), [demo](http://localhost/francoisromain.github.io/postcss-structure/test/02.html)
-
-### Blocs
-
-`structure: bloc [breakpoint]-[width](-[offset])`
-
-Blocs have a fixed width.
-
-- _breakpoint_: number of _units_ that fit into the screen. If the screen is narrower than the _breakpoint_, the bloc is fluid and takes full width.
-- _width_: width of the bloc.
-- _offset_ (optional): remaining space before the bloc can take its width. if (_width_ + _offset_) is wider than _breakpoint_, then _width_ shrinks first.
-
-``` css
-
-.my-bloc {
-  structure: bloc 3-2;
-}
-
-.my-bloc-with-offset {
-  structure: bloc 3-2-3;
-}
-
-```
-
-Example: [input](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/src/03.css), [output](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/dist/03.css), [markup](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/03.html), [demo](http://localhost/francoisromain.github.io/postcss-structure/test/03.html)
-
-Example (with offset): [input](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/src/04.css), [output](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/dist/04.css), [markup](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/04.html), [demo](http://localhost/francoisromain.github.io/postcss-structure/test/04.html)
-
-### Fractions
-
-`structure: fraction [ratio]/[total]`
-
-- _ratio_: fraction of the _total_.
-- _total_: divider, relative to _unit_.
-
-``` css
-
-.my-fraction {
-  structure: fraction 3/2;
-}
-
-```
-
-Example: [input](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/src/05.css), [output](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/dist/05.css), [markup](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/05.html), [demo](http://localhost/francoisromain.github.io/postcss-structure/test/05.html)
-
-### Blobs
-
-`structure: blob [breakpoint]-[ratio]/[total]`
-
-Unlike blocs, blobs width will change depending on the breakpoint.
-
-- _breakpoint_: number of _units_ that fit in the screen.
-- _ratio_: fraction of the _total_.
-- _total_: divider, relative to the _breakpoint_.
-
-``` css
-
-.my-blob {
-  structure: blob 3-2/3;
-}
-
-```
-
-Example: [input](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/src/06.css), [output](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/dist/06.css), [markup](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/06.html), [demo](http://localhost/francoisromain.github.io/postcss-structure/test/06.html)
-
-### Columns
-
-`structure: columns [breakpoint]-[columns](-[offset])`
-
-- _breakpoint_:  number of _units_ that fit into the screen. If the screen is narrower than the _breakpoint_, the element has one column.
-- _columns_: number of columns.
-- _offset_ (optional): remaining space before the columns are active. If (_columns_ + _offset_) is greater than _breakpoint_, then _columns_ shrinks first.
-
-``` css
-
-.my-columns {
-  structure: columns 3-4;
-}
-
-.my-columns-with-offset {
-  structure: columns 3-4-2;
-}
-
-```
-
-Example: [input](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/src/07.css), [output](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/dist/07.css), [markup](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/07.html), [demo](http://localhost/francoisromain.github.io/postcss-structure/test/07.html)
-
-Example (with offset): [input](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/src/08.css), [output](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/dist/08.css), [markup](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/08.html), [demo](http://localhost/francoisromain.github.io/postcss-structure/test/08.html)
-
-### Show
-
-`structure: show [breakpoint]`
-
-- _breakpoint_: the element is made visible when the screen is wider than _breakpoint_. A class has to be defined above in the CSS to make it invisible. 
-
-``` css
-.my-element {
-  structure: show 3;
-}
-```
-
-Example: [input](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/src/09.css), [output](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/dist/09.css), [markup](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/09.html), [demo](http://localhost/francoisromain.github.io/postcss-structure/test/09.html)
-
-### Hide
-
-`structure: hide [breakpoint]`
-
-- _breakpoint_: the element is hidden when the screen is wider than _breakpoint_. 
-
-``` css
-.my-element {
-  structure: hide 3;
-}
-```
-
-### Right
-
-`structure: right [breakpoint]`
-
-- _breakpoint_: the element is pushed to the right when the screen is wider than _breakpoint_.
-
-``` css
-.my-element {
-  structure: right 3;
-}
-```
-
-Example: [input](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/src/10.css), [output](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/dist/10.css), [markup](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/10.html), [demo](http://localhost/francoisromain.github.io/postcss-structure/test/10.html)
-
-### Media queries
-
-``` css
-@structure-media [breakpoint] {
-    .my-class {
-        …
-    }
-}
-```
-
-- _breakpoint_: classes are applied when the screen is wider than breakpoint. To set the default styles (mobile first), use `@structure-media 0 { …`.
-
-Example: [input](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/src/11.css), [output](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/dist/11.css), [markup](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/11.html), [demo](http://localhost/francoisromain.github.io/postcss-structure/test/11.html)
+This was deprecated and replaced by [postcss-grid-system](https://github.com/francoisromain/postcss-grid-system).

New alerts

License Policy Violation

License

This 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 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

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

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Dependency count

0

decreased by-100%

Dev dependency count

0

decreased by-100%

Worsened metrics

Total package byte prevSize

717

decreased by-98.82%

Number of package files

2

decreased by-95.12%

Lines of code

0

decreased by-100%

Number of lines in readme file

2

decreased by-99.2%

Number of medium supply chain risk alerts

2

increased byInfinity%

Dependency changes

• - Removedpostcss@^5.0.19

• - Removedansi-regex@2.1.1(transitive)

• - Removedansi-styles@2.2.1(transitive)

• - Removedchalk@1.1.3(transitive)

• - Removedescape-string-regexp@1.0.5(transitive)

• - Removedhas-ansi@2.0.0(transitive)

• - Removedhas-flag@1.0.0(transitive)

• - Removedjs-base64@2.6.4(transitive)

• - Removedpostcss@5.2.18(transitive)

• - Removedsource-map@0.5.7(transitive)

• - Removedstrip-ansi@3.0.1(transitive)

• - Removedsupports-color@2.0.03.2.3(transitive)