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

v0.3.4

Published

Sass Mixins to generate Flexbox grid

Downloads

3,366

Readme

Flexbox Grid Mixins

Sass Mixins to generate Flexbox grid.

Flexbox Grid Mixins is Sass Mixins library to help you write well-structured, readable, maintainable, component-based grid using Flexbox (CSS Flexible Box Layout Module).

Flexbox Grid Mixins documentation: https://thingsym.github.io/flexbox-grid-mixins/

Example

HTML

<div class="grid">
<div class="grid__col-3">
  3
</div>
<div class="grid__col-9">
  9
</div>
</div>

Sass

Dart Sass

@use 'node_modules/flexbox-grid-mixins/dart-sass/flexbox-grid-mixins';

$default-grid-gutter: 2%;

.grid {
  @include flexbox-grid-mixins.grid($gutter: $default-grid-gutter);

  > .grid__col-3 {
    @include flexbox-grid-mixins.grid-col($col: 3, $gutter: $default-grid-gutter);
  }
  > .grid__col-9 {
    @include flexbox-grid-mixins.grid-col($col: 9, $gutter: $default-grid-gutter);
  }
}

LibSass

@import 'node_modules/flexbox-grid-mixins/sass/flexbox-grid-mixins';

$default-grid-gutter: 2%;

.grid {
  @include grid($gutter: $default-grid-gutter);

  > .grid__col-3 {
    @include grid-col($col: 3, $gutter: $default-grid-gutter);
  }
  > .grid__col-9 {
    @include grid-col($col: 9, $gutter: $default-grid-gutter);
  }
}

CSS

.grid {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-left: -1%;
  margin-right: -1%;
}

.grid > .grid__col-3 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 23%;
  flex: 0 0 23%;
  margin-left: 1%;
  margin-right: 1%;
  margin-bottom: 2%;
}

.grid > .grid__col-9 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 73%;
  flex: 0 0 73%;
  margin-left: 1%;
  margin-right: 1%;
  margin-bottom: 2%;
}

Installation

npm

$ npm install flexbox-grid-mixins --save-dev

Yarn

$ yarn add flexbox-grid-mixins --dev

Manual Install

Include dart-sass/\_flexbox-grid-mixins.scss or sass/\_flexbox-grid-mixins.scss in the appropriate location in your project.

Getting Started using Dart Sass

1. Import Flexbox Grid Mixins in Sass/SCSS file

@use 'flexbox-grid-mixins';

Example : import from node_modules

@use 'node_modules/flexbox-grid-mixins/dart-sass/flexbox-grid-mixins';

2. Define the grid container

.grid {
  @include flexbox-grid-mixins.grid();
}

3. Generate the grid columns

.grid__col-3 {
  @include flexbox-grid-mixins.grid-col(3);
}
.grid__col-9 {
  @include flexbox-grid-mixins.grid-col(9);
}

Getting Started using LibSass

Note: LibSass is Deprecated. See Future Plans.

1. Import Flexbox Grid Mixins in Sass/SCSS file

@import 'flexbox-grid-mixins';

Example : import from node_modules

@import 'node_modules/flexbox-grid-mixins/sass/flexbox-grid-mixins';

2. Define the grid container

.grid {
  @include grid();
}

3. Generate the grid columns

.grid__col-3 {
  @include grid-col(3);
}
.grid__col-9 {
  @include grid-col(9);
}

Documentation

See Flexbox Grid Mixins documentation: http://thingsym.github.io/flexbox-grid-mixins/

Mixins Reference

Mixins Reference

Example

Dart Sass

LibSass

Package manager

flexbox-grid-mixins - npm

Development

  1. run $ sudo yum install nodejs npm
  2. Forking on GitHub
  3. run $ cd /path/to/flexbox-grid-mixins
  4. run $ npm install
  5. run $ npm run serve
  6. Access URL http://localhost:3000

Docker Development Environment

Build and launch website

docker-compose run --rm node npm install
docker-compose run --rm  -p 3000:3000 node npm run serve

Access to URL http://localhost:3000

listing tasks

docker-compose run --rm node npm run

Contribution

Patches and Bug Fixes

Small patches and bug reports can be submitted a issue tracker in Github. Forking on Github is another good way. You can send a pull request.

  1. Fork Flexbox Grid Mixins from GitHub repository
  2. Create a feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -am 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Create new Pull Request on GitHub

Changelog

  • Version 0.3.4
    • fix npm script
    • fix Mixins Reference
    • add Docker Development Environment
    • gulpfile.js for docker
    • update package.json
    • update github actions, Node.js 12 actions are deprecated
    • fix layout margin
    • add Cards Layout example
  • Version 0.3.3
    • update README
    • update index.html
    • update example
    • add condense
    • add $gap argument for gap CSS property
  • Version 0.3.2
    • fix gulp-sass compiler
    • update package.json
    • fix Deprecation Warning: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
    • add timeout-minutes to workflows
  • Version 0.3.1
    • update example
    • fix items row/column alignment example
    • add auto margin example
  • Version 0.3.0
    • add example for dart sass
    • add Flexbox Grid Mixins for Dart Sass
    • add dart sass workfows with gulpfile.js
  • Version 0.2.2
    • remove .travis.yml, change CI/CD to GitHub Actions
  • Version 0.2.1
    • auto release to npm only version tags
    • gulp bump up version to 4.0
  • Version 0.2.0
    • update example
    • update package.json
    • add Default Values flexbox-grid-mixins-stack
    • change margin property, remove @mixin, grid-margin and grid-col-margin
    • remove breakpoint value of col argument
    • remove condensed argument
    • change grid-type from argument to Default Values flexbox-grid-mixins-grid-type
    • remove bower.json
    • add .travis.yml
  • Version 0.1.6
    • add Default Values $flexbox-grid-mixins-box-sizing
    • update package.json
    • change lint from scss-lint to stylelint
  • Version 0.1.5
    • update package.json
    • add optional arguments $shorthand to @mixin grid-col
  • Version 0.1.4
    • update example
    • update document
    • fix conditional expression
    • add optional arguments $width, $max-width, $min-width, $height, $max-height and $min-height to @mixin grid-col
    • enable flex-grow with number column
    • add positive preset column
    • change readme.md file name to upper case
  • Version 0.1.3
    • rename folder to docs from doc, change gh-pages
    • update document
    • update example
    • add optional arguments $flex-direction and $flex-wrap to the mixin grid
  • Version 0.1.2
    • update document
    • update example
    • improve unit-set column, using CSS calc()
  • Version 0.1.1
    • fix breakpoint preset column
    • fix example
    • fix Holy Grail Layout
  • Version 0.1.0
    • Initial release.

License

Licensed under the MIT License.

Author

thingsym

Copyright (c) 2016-2022 thingsym