7ninjas / scss-mixins

Collection of scss mixins and functions to ease and improve implementations of common style-code patterns.

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 »

Portfolio ◦ Careers ◦ Contact

Be like a Ninja! Style like a Ninja!

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

Animations

• Full documentation
• Mixin hardware

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.

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

scss-mixins's Issues

Proposal - color and background mixins

Would be great to use something like:

@include color(primary);
@include background(primary, someBackgoundSettings);

list of small improvments

• remove - /docs/base.md
• fix title - /docs/forms.md#_flexscss
• add description to responive col and prop about down-xs, between -/docs/responsive.md
• add example with hex - /docs/colors.md
• add usage example - /docs/forms.md#mixin-input-focus
• fix example, more examples, error if size > columns - /docs/grid.md
• more info about responsive and examples - /docs/typography.md
• set $cross as x and $main as y, add if which can check flex-direction - /docs/flex.md
• remove helpers
• remove unnecessary ()

Incorrect docs description for triangle mixin

change docs example for triangle, right now it's css-triangle and in the code we have triangle

breakpoints throw error

after import mixins @import '~@7ninjas/scss-mixins/all'; compilator throws this error

Module build failed: 
    if($mixin != 'down' || $mixin != 'only' || $mixin != 'up') {
   ^
      Property "if" must be followed by a ':'
      in /my-project/node_modules/@7ninjas/scss-mixins/src/_breakpoints.scss (line 32, column 5)

Add jsfiddle examples

jsfiddle examples for each mixin

Best Practices - SCSS Styleguide

Please add best practices document for project

• reboot.css or normalize.css
• help yourself with stylelint
• naming conventions
  • don't reuse parent's class name in child's classes
  • keep order of declaring classes and it states (firstly declare state of current class then declare nested children ie. .active is higher than nested child class)
  • class should be described by entity, behaviour, state or look
  • camelCase in react, rest in hypen-case
  • color naming
• spaces and indentations (2) (no tabs)
• use mixins for margins and paddings
• assign value to variable in variables.scss
• first use mixins, then override styles (if needed)
• never wander too deep -> don't go more than 3 levels deep (add stylelint rule)
• don't style elements, style classes
• don't use id if not needed
• global styles
• styles from another packages
• creating JavaScript-specific classes to bind to, prefixed with .js-
• overusing unclassed divs

update main color

white color isn't visible on white background

$body-color: $color-white;
$body-bg: $color-white;

fix:

$body-color: $color-black;
$body-bg: $color-white;

configure stylelint

my suggestion:

{
  "extends": [
    "stylelint-config-standard"
  ],
  "rules": {
  }
}

invalid url in readme

this link doesn't work. images.md doesn't have any svg-icon mixin

https://github.com/7ninjas/scss-mixins/blob/develop/docs/images.md#mixin-svg-icon

No mixin named border-radius

I tried to use border-radius, in all.scss border-radius is not imported

Failed to compile.

./src/routes/Home/components/home.scss
Module build failed:
  @include border-radius(10px);
          ^
      No mixin named border-radius
      in /Users/arek/better-config-xd/src/routes/Home/components/home.scss (line 5, column 12)

import doesn't work

When I try to import mixins like @import '~scss-mixins/all' import doesn't work correctly

https://github.com/7ninjas/scss-mixins/blob/develop/docs/variables.md

Possible Fix

I fixed this issue using this import @import '~@7ninjas/scss-mixins/all';

Your Environment

• Version used: 1.0.0-alpha
• Browser Name and version: chrome 64
• Operating System and version (desktop or mobile): macbook pro
• Link to your project: -

triangle mixin doesn't work - Mixin pseudo has no parameter named $pos

I tried to use code from this example

  @include triangle($color: $color-black, $direction: up, $round: true);

upgrade to stable bootstrap 4

https://getbootstrap.com/

add templates

Please add contributing, issue and pull request template

Proposal - cover background image

How about adding mixin which can indicate how background image will work?
Many times we write

.example-class {
  background-image: url('...');
  background-size: cover;
  background-position: center;
}

Example:

.example-class {
  @include background-image($source: '...', $size: cover, $position: center);
}

• as a source we would just past path to file, and inside mixin it would put variable into url tag?

It would faster our work. What do you think about it?

Font-variant mixin - color dont work

Please add mixin for placeholder in forms

grid overriding gutters

  @include container;
  @include media-breakpoint-down(sm) {
    @include container($gutter: false);
  }

it's not possible to override first container by container without gutters. I have to use breakpoints:

  @include media-breakpoint-up(sm) {
    @include container;
  }
  @include media-breakpoint-down(sm) {
    @include container($gutter: false);
  }

how to fix it:

we need to update gutter mixin by adding else if

@mixin gutter($gutter: $grid-gutter-widths) {
  @if $gutter {
    @each $breakpoint-query, $gutter-width in $gutter {
      @include media-breakpoint-variant($breakpoint-query) {
        padding-left: ($gutter-width / 2);
        padding-right: ($gutter-width / 2);
      }
    }
  }
} else { 
  padding-left: 0;
  padding-right: 0;
}

It's breaking change so should be available on 2.0 version

Change stylelint configuration

how to use font-face mixin with css modules?

when I paste code like this:

:global {
    @include font-face(Graphik Regular, './fonts/Graphik-Regular', 500);
    @include font-face(Graphik Light, './fonts/Graphik-Light', 300);
    @include font-face(Graphik Medium, './fonts/Graphik-Medium', 500);
    @include font-face(Graphik Semibold, './fonts/Graphik-Semibold', 500);
}

css-modules will remove these lines instead of instert font face

when I paste code like this:

:global {
  html {
    @include font-face(Graphik Regular, './fonts/Graphik-Regular', 500);
    @include font-face(Graphik Light, './fonts/Graphik-Light', 300);
    @include font-face(Graphik Medium, './fonts/Graphik-Medium', 500);
    @include font-face(Graphik Semibold, './fonts/Graphik-Semibold', 500);
  }
}

css modules will generate broken css:

@font-face {
  html {
    font-family: Graphik Regular;
    font-style: normal;
    font-weight: 500;
    src: url(/static/Graphik-Regular.19475240.eot);
    src: url(/static/Graphik-Regular.19475240.eot?#iefix) format('embedded-opentype'),
      url(/static/Graphik-Regular.6253ad31.woff) format('woff'), url(/static/Graphik-Regular.e2a1876e.otf) format('otf'),
      url(/static/Graphik-Regular.cedb86ea.ttf) format('truetype');
    font-family: Graphik Light;
    font-weight: 300;
    src: url(/static/Graphik-Light.b4afb5c4.eot);
    src: url(/static/Graphik-Light.b4afb5c4.eot?#iefix) format('embedded-opentype'), url(/static/Graphik-Light.881624e3.woff)

move some files to todo

these files are not important and will be added after 1.0.0 please remove them

• /docs/utils.md
• /docs/units.md
• docs/transitions.md
• /docs/typography.md

Proposal - plain-hove-focus-active mixin

there is no plain-hove-focus-active, can you add it?

import _forms.scss is missing

Please include _forms.scss into _all.scss file. We cannot use placeholder mixin in projects :/

Add button mixins

move /docs/change.log to /change.log and uppercase

fix main source

https://github.com/7ninjas/scss-mixins/blob/develop/package.json#L6

Wrong arguments in triangle mixin for pseudo mixin

Nothing to add... :)

border radius mixins

grid - update description

• add example how to use gutter in col mixin, and how to disable gutter
• rename $gutter-widths to $gutter

List of enchancments

• Always us breakpoint-up - this is good practice
• svg fonts
• remove all custom colors - only colors as variable
• pseudo mixin - remove position
• reponsive-prop - lack of px

grid doesn't work

.table {
  @include container(true, $gutter: false);
}

.column {
  @include col(1, 7);
}

Module build failed: 
      @error 'Oops! Invalid breakpoint.';
     ^
      Oops! Invalid breakpoint.
      in /node_modules/@7ninjas/scss-mixins/src/_breakpoints.scss (line 33, column 7)