7ninjas / scss-mixins Goto Github PK

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

• 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 ()

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?

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

• 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

  @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

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

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

Please add contributing, issue and pull request template

my suggestion:

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

https://getbootstrap.com/

I tried to use code from this example

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

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

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)

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

Would be great to use something like:

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

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

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

jsfiddle examples for each mixin

Nothing to add... :)

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)

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

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;

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)