Status

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

• Full documentation
• Mixin hardware

• Full documentation
• Mixin border-radius
• Mixin border-top-radius
• Mixin border-right-radius
• Mixin border-bottom-radius
• Mixin border-left-radius

• Full documentation
• Mixin media-breakpoint-up
• Mixin media-breakpoint-down
• Mixin media-breakpoint-between
• Mixin media-breakpoint-only

• Full documentation
• Mixin button-variant
• Mixin button-outline-variant
• Mixin button-size

• Full documentation
• Mixin flex
• Mixin inline-flex

• Full documentation
• Mixin font-face

• Full documentation
• Mixin placeholder

• 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

• Full documentation
• Mixin center
• Mixin container
• Mixin col

• Full documentation
• Mixin hover
• Mixin hover-focus
• Mixin plain-hover-focus
• Mixin hover-focus-active

• Full documentation
• Mixin svg-icon

• Full documentation
• Mixin img-fluid

• Full documentation
• Mixin list-unstyled

• Full documentation
• Mixin size
• Mixin clearfix
• Mixin z-index
• Mixin pseudo
• Mixin absolute
• Mixin fixed
• Mixin relative
• Mixin sticky

• Full documentation
• Mixin responsive-prop
• Mixin responsive-embed
• Mixin responsive-col

• Full documentation
• Mixin triangle

• 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

• Full documentation
• Mixin table
• Mixin table-bordered
• Mixin table-responsible
• Mixin table-striped
• Mixin table-hover

• Full documentation
• Mixin text-hide
• Mixin text-truncate
• Mixin font

• 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.

• Like @7ninjas on Facebook.
• Follow @7ninjas on Twitter.
• Discover @7ninjas Dribbble
• Explore @7ninjas Behance.
• Enjoy @7ninjas Instagram.

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.