npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

flexbox-grid-pro

v1.0.1

Published

Rich modular grid system based on flexbox css property

Downloads

3

Readme

Flexbox Grid Pro

flexbox-grid-pro.github.io/grid

Description

Flexbox Grid Pro is a rich modular grid system for creating adaptive, responsive layouts. The grid is available in two versions - as a set of predefined css classes and as a set of sass mixins ( sass & scss syntax ). That is, you can either put necessary classes in the html markup to the necessary elements or connect the necessary mixins in your sass code in the selectors. Both options are equivalent and give similar results. Which one to use is just a matter of your preference.

Install

npm i flexbox-grid-pro

Sass source files and grid customization

Along with the finished css file, the library is available as Sass source files. Both sass and scss syntax are available. When using Sass, you can use a set of ready-made variables and mixins to customize the grid and its flexible settings. All predefined grid classes use the same variables and mixins to provide a whole set of ready-to-use classes for quickly creating adaptive layouts.

Variables

Variables and maps determine the width of the grid container and its internal horizontal indents, the number of columns and the horizontal and vertical distance between them, control points for media queries, as well as parts of the library that will be included in the generated css file. They are used to generate the specified grid classes, as well as for the mixins used in the examples above.

Mixins

The directory grid/mixins/ contains mixins that are used with mesh variables to generate css. All generated library classes use the same mixins.

Grid

The file grid/grid.scss contains all the variables and grid settings that you can override:

$container-width: 1140px !default;
$container-padding: 15px !default;
$h-gutter: 30px !default;
$v-gutter: $h-gutter !default;
$columns: 12 !default;
$mobile-first: false !default;

@function query-direction() {
  @if($mobile-first) {
    @return min;
  } @else {
    @return max;
  }
}

$media-query: query-direction();

$grid-breakpoints: (
  desktop: 1280px,
  laptop: 1024px,
  laptop-md: 960px,
  tablet-landscape: 768px,
  phone-landscape: 640px,
  phone: 480px,
  phone-md: 360px,
  phone-sm: 320px
) !default;

$partials: (
  alignment,
  direction,
  hide,
  offset,
  ordering,
  show,
  gutters
) !default;

@import 'mixins/mixins';
@import 'partials/alignment';
@import 'partials/ordering';
@import 'partials/direction';
@import 'partials/hide';
@import 'partials/show';
@import 'partials/offset';
@import 'partials/gutters.scss';
@import 'base';

In order to override the default variables, give them your values before importing the main library file grid/grid.scss:

$container-width: 1920px;
$container-padding: 10px;
$h-gutter: 15px;
$columns: 24;
$mobile-first: true;

$grid-breakpoints: (
  lg: 1280px,
  md: 960px,
  sm: 768px,
  xs: 480px
);

@import 'path/to/grid/grid.scss';

See documentation for more details.

Compilation of source sass files

When using the Flexbox Grid Pro library as sass files, it is strongly recommended that you use the minifiers group-css-media-queries and csso. This will significantly reduce the amount of library css-file collected.