Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
postcss-grid-system
Advanced tools
francoisromain.github.io/postcss-grid-system
A PostCSS plugin to create grids based on a fixed column width.
Install the npm module:
$ npm install postcss-grid-system --save-dev
Require the PostCSS plugin:
postcss([ require('postcss-grid-system') ])
See PostCSS usage to setup with Gulp, Grunt, Webpack, npm scripts…
$ npm install postcss-cli --save-dev
Add a script to package.json:
"scripts": {
"build": "postcss -u postcss-grid-system -i src/styles.css -o dist/styles.css"
}
$ npm run build
Global settings rule (and default values):
@gs {
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 breakpoint is created for each value from min to max. When the screen is narrower than min * unit, elements are fluids.
@gs-media [breakpoint] {
.my-class {
…
}
}
@gs-media 0 { …
.Example: input, output, markup, demo
gs: container
The container width is set for each breakpoint.
.my-container {
gs: container;
}
Example: input, output, markup, demo
gs: row
Rows are intended to contain either a bloc or a fraction element. They have a negative right margin.
.my-row {
gs: row;
}
Example: input, output, markup, demo
gs: bloc [width](-[offset])
Blocs have a fixed width.
.my-bloc {
gs: bloc 2;
}
.my-bloc-with-offset {
gs: bloc 2-3;
}
Example: input, output, markup, demo
Example (with offset): input, output, markup, demo
gs: fraction [ratio]/[total]
.my-fraction {
gs: fraction 3/2;
}
Example: input, output, markup, demo
gs: columns [columns](-[offset])
.my-columns {
gs: columns 4;
}
.my-columns-with-offset {
gs: columns 4-2;
}
FAQs
A PostCSS plugin to create grids based on a fixed column width.
We found that postcss-grid-system demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.