coldfrontlabs / bootstrap-scss-plugins Goto Github PK

Need to add a basic license file.

screen-reader-breakpoints.md should be renamed to sr-breakpoints.md

Should add husky and some githooks to the project to ensure standards are followed.

Should add the 25 and 75 variants into the documentation.

Summary

When using the .text-shadow classes, the display looks offset.

Expected Behaviour

Shadow should have a uniform width around the text.

Screenshots

Additional context

This should fix the issue:

@mixin text-outline-variant ($parent, $colour, $width) {
  $negative-width: -#{$width};

  #{$parent} {
    text-shadow:
    $negative-width $negative-width 0 $colour,
    $width $negative-width 0 $colour,
    $negative-width $width 0 $colour,
    $width $width 0 $colour !important;
  }
}

The readme is currently pretty basic.

Need to provide a little more detail on how to use the plugins and probably some general project documentation.

Should have some basic codes of conduct before official release.

Need to add a PR template.

Need a few updates to the documentation.

• Update contrib information
• Update general class documentation

It would be handy to have breakpoint selectors within the .sr-only class.

An example:
A section on a page has enough visual context (through menus or otherwise) to tell a sighted user where they are, but for visually impaired users you have a heading with .sr-only.

When you go to a mobile display however, maybe some objects are moved or menus collapsed and sighted users no longer have any context as to where they are or what they're looking at. This would be when a class such as .sr-md-only would come in handy.

If we take this one step further, we could hook into all of the media breakpoints to have classes like .sr-md-up, .sr-md-down, and sr-md-only.

Solution

Use both the media-breakpoint mixins and sr-only mixin to create new classes.

@each $breakpoint, $value in $grid-breakpoints {
  .sr-#{$breakpoint}-only {
    @include media-breakpoint-only($breakpoint) {
      @include sr-only;
    }
  }

  .sr-#{$breakpoint}-up {
    @include media-breakpoint-up($breakpoint) {
      @include sr-only;
    }
  }

  .sr-#{$breakpoint}-down {
    @include media-breakpoint-down($breakpoint) {
      @include sr-only;
    }
  }
}

Should probably also hook this into .sr-only-focusable as well.

Should have guide-lines on contributing before official release.

Currently the only aspect of the .border-width classes that is adjustable is the unit used (px, em, etc).

The classes are always going to result in .border-width-1 through .border-width-5. This should be adjustable. $border-width-min and $border-width-max could be made to resolve this issue.

Following the above naming convention, $border-unit should also be changed to $border-width-unit.

See: https://github.com/NickDJM/bootstrap-scss-plugins/blob/dev/scss/utilities/border-widths.scss

Summary

Since the repository moved, we'll need to update the package information.

Some times we need to change the opacity of objects. Having a class for this would be super convenient.

Solution

Have a classes like width is in base bootstrap where we would just use .o-25, .o-50, etc.

We can use opacity: x for all modern browsers and filter: alpha(opacity=x) for IE 8 and below.

Mixin

@mixin opacity-variant ($parent, $value) {
  $percent: $value / 100;

  #{$parent}-#{$value} {
    opacity: $percent;
    filter: alpha(opacity=$value);
  }
}

Utility

@include opacity-variant('.o', 0);
@include opacity-variant('.o', 25);
@include opacity-variant('.o', 50);
@include opacity-variant('.o', 75);
@include opacity-variant('.o', 100);

Alternatives

Fully spell out the class to be more descriptive: .opacity-25

Some basic templates for issues would be a good idea to have before official release.

With the documentation update it makes sense to make a new release to make sure its pushed out.

Having the ability to set background colours to be semi-transparent would be super useful.

e.x. A card overlay where you would like to have a coloured block behind the text, but still see the image behind it.

Solution

The class should match the existing background classes: .bg-primary, but then add on an opacity value.

Should probably have set intervals of 10 (may be able to customize the intervals).

• .bg-primary-10: 10% opacity
• .bg-primary-20: 20% opacity
• .bg-primary-30: 30% opacity
• ...
• bg-primary-90: 90% opacity

No need for 0 or 100 as those are already covered in base bootstrap.

@each $colour, $hex in $theme-colors {
  @for $x from 1 to 9 {
    $num: $x * 10;

    .bg-#{$name}-#{$num} {
      $value: $x / 10;

      background-color: rgba($hex, $value);
    }
  }
}

Should add some tests to ensure all the plugins compile.

Keep everything in a testing folder and use gulp or something to quickly run tests.

Summary

Using the border-width classes applies broken styles

Screenshots