Socket
Book a DemoInstallSign in
Socket

@sq-ui/sq-grid

Package Overview
Dependencies
Maintainers
2
Versions
1
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@sq-ui/sq-grid

A simple and clean CSS grid which can be configured to use either CSS Grid or Flexbox.

1.0.1
latest
Source
npmnpm
Version published
Weekly downloads
1
Maintainers
2
Weekly downloads
 
Created
Source

sq-grid

A simple and clean CSS grid which can be configured to use either CSS Grid or Flexbox.

See a combined live preview here

Documentation can be found here

Types of grid implementations

SQ-Grid offers three types of grids:

The grid which the browser should use is determined by @supports queries. In case the browser supports either native CSS grids or flexbox, the UI kit exposes class rules which the developer can use to manipulate the grid according to either grid or flexbox rules. In case the browser doesn't support either of those two features, the UI kit defaults to using floats to establish the grid rules.

Installation

  • Install the package: npm install @sq-ui/sq-grid
  • Import whatever you need:
./node_modules/@sq-ui/sq-grid/dist/sq-grid.css
./node_modules/@sq-ui/sq-grid/mixins.scss
./node_modules/@sq-ui/sq-grid/sq-grid.scss

Usage

The grid uses a maximum of 12 columns per row. All the width calculations and corresponding classes are based on the 12-column layout.

The grid consists of the following classes:

  • .sq-grid - The parent which wraps the grid columns. By default, it does not contain any CSS rules.
  • (.sq-grid).css-grid - This is an additional class to .sq-grid which enables the usage of the native CSS grid feature.
  • (.sq-grid).css-flexbox - An additional class to .sq-grid. It enables the flexbox implementation of the grid system.
  • (.sq-grid).auto-col-width - An additional class to .sq-grid. When this class is added, the columns width is calculated automatically (based on 12-column layout).
  • .col - The class for every child of the .sq-grid container. Represents a single column of the grid.
  • (.col).span-{<number>, where <number> can be an integer between 1 and 12} - An additional class to .col. It can be used to manually set the width of box. For example, .col.span-4 would mean that the box would span 4 columns.

Local Development

  • Clone the repository
  • Run npm install
  • After you modify either of the scss files, you would need to run: npm run build:sass

Keywords

css

FAQs

Package last updated on 20 Feb 2019

Did you know?

Socket

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc

U.S. Patent No. 12,346,443 & 12,314,394. Other pending.