@7ninjas/scss-mixins

`scss-mixins` is a collection of scss mixins and functions to ease and improve implementations of common style-code patterns.

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
456Jun 21, 2018Jan 5, 2018Minified + gzip package size for @7ninjas/scss-mixins in KB

Readme

7ninjas

`scss-mixins` is a collection of scss mixins and functions to ease and improve implementations of common style-code patterns.

Discover our scss practices »

PortfolioCareersContact

Be like a Ninja! Style like a Ninja!

Status

npm npm npm

CircleCI branch David GitHub code size in bytes

GitHub pull requests GitHub issues GitHub closed issues

GitHub stars GitHub watchers

Quick start

Several quick start options are available:

  • Clone the repo: git clone https://github.com/7ninjas/scss-mixins.git
  • Install with npm: npm install @7ninjas/scss-mixins
  • Install with yarn: yarn add @7ninjas/scss-mixins

Usage

Import all file to your core scss file for importing all mixins from package

Example:

@import '~@7ninjas/scss-mixins/all';

Table of contents

Animations Border Radius
  • Full documentation

  • Mixin border-radius

  • Mixin border-top-radius

  • Mixin border-right-radius

  • Mixin border-bottom-radius

  • Mixin border-left-radius

  • Breakpoints
  • Full documentation

  • Mixin media-breakpoint-up

  • Mixin media-breakpoint-down

  • Mixin media-breakpoint-between

  • Mixin media-breakpoint-only

  • Buttons
  • Full documentation

  • Mixin button-variant

  • Mixin button-outline-variant

  • Mixin button-size

  • Flex
  • Full documentation

  • Mixin flex

  • Mixin inline-flex

  • Fonts
  • Full documentation

  • Mixin font-face

  • Forms
  • Full documentation

  • Mixin placeholder

  • Gradients
  • Full documentation

  • Mixin gradient-bg

  • Mixin gradient-x

  • Mixin gradient-y

  • Mixin gradient-directional

  • Mixin gradient-x-three-colors

  • Mixin gradient-y-three-colors

  • Mixin gradient-radial

  • Mixin gradient-striped

  • Grid
  • Full documentation

  • Mixin center

  • Mixin container

  • Mixin col

  • Hover
  • Full documentation

  • Mixin hover

  • Mixin hover-focus

  • Mixin plain-hover-focus

  • Mixin hover-focus-active

  • Icons
  • Full documentation

  • Mixin svg-icon

  • Images
  • Full documentation

  • Mixin img-fluid

  • Lists
  • Full documentation

  • Mixin list-unstyled

  • Positioning
  • Full documentation

  • Mixin size

  • Mixin clearfix

  • Mixin z-index

  • Mixin pseudo

  • Mixin absolute

  • Mixin fixed

  • Mixin relative

  • Mixin sticky

  • Responsive
  • Full documentation

  • Mixin responsive-prop

  • Mixin responsive-embed

  • Mixin responsive-col

  • Shapes
  • Full documentation

  • Mixin triangle

  • Spacing
  • Full documentation

  • Mixin ml

  • Mixin mt

  • Mixin mr

  • Mixin mb

  • Mixin mx

  • Mixin my

  • Mixin m

  • Mixin pl

  • Mixin pt

  • Mixin pr

  • Mixin pb

  • Mixin px

  • Mixin py

  • Mixin p

  • Tables
  • Full documentation

  • Mixin table

  • Mixin table-bordered

  • Mixin table-responsible

  • Mixin table-striped

  • Mixin table-hover

  • Typography
  • Full documentation

  • Mixin text-hide

  • Mixin text-truncate

  • Mixin font

  • Variables
  • Full documentation

  • Bugs and feature requests

    Found bug? Or maybe you've got great idea for feature request? Please first search for existing and closed issues. If your problem or idea is not addressed yet - don't hesitate to open a new issue!

    Community

    Get updates on 7ninjas's development and chat with the project maintainers and community members.

    Versioning

    To see new features and changes for each released version checkout the Releases section of our GitHub project

    License

    Code released under the MIT License.

    If you find any bugs or have a feature request, please open an issue on github!

    The npm package download data comes from npm's download counts api and package details come from npms.io.