Scss Mixins including user and Bourbon Mixins

To see the full code for the mixins see css/root/mixins.scss

-- Links --

Center Elements hide from screenreaders media breakpoints ellipsis

-- Mixins --

Center Elements

.center-element {
  @include center;//mixin
  background: #E03D44;
  @include size(80%, 60px);
  }

hide from both screenreaders and browsers

@mixin hidden {
  display: none !important;
  visibility: hidden;
  }
  
  .hidden-box {
   @include size(300px, 70px);
   @include center;
   padding: 7px;
   font-size: .9rem;
   color: orange;
   border: 1px solid blue;
  
    &:hover span {
     @include hidden;//mixin
   }
  }

This text will hide on hover and be invisible to screen readers and browsers

media breakpoints

Base styles are phone-first

.media-points p {
   color: red;
  }
  
  @include media(600) {
   .media-points p {
    color: blue;
   }
  }
  
  @include media(700) {
   .media-points p {
    color: rgb(153, 71, 236);
   }
  }
  
  @include media(934) {
   .media-points p {
    color: rgb(34, 224, 126);
   }
  }
  
   @include media(93rem) {
   .media-points p {
    color: rgb(235, 220, 85);
   }
  }

At base level this text is red
At 600px this text is blue
At 700px this text is purple
At 934px this text is green
At 93rem this text is yellow

border radius

@include border-top-radius(15px);
  @include border-bottom-radius(10px);

@include border-left-radius(10px);
  @include border-right-radius(5px);

ellipsis

@include ellipsis;

Hover over me to see the ellipsis in action

hide text

.hide-text {
  @include size(220px, 120px);
  @include center;
  padding: 7px;
  border: 1px solid blue;
  
   &:hover {
    @include hide-text;//mixin
    background: url(../test-images/taj-mahal.jpg);
    background-repeat: no-repeat;
    background-size: cover;
   }
  }

On hover replace text with image, text still available for SEO

hide visually

.hide-visually {
  @include size(220px, 120px);
  @include center;
  font-size: .9rem;
  padding: 7px;
  border: 1px solid blue;
  
   span {
    font-size: 1.3rem;
    color:#a60b55;
    @include hide-visually;//mixin
   }
  
   &:hover span {
    @include hide-visually("unhide");//alt mixin
   }
  }

Box title is hidden but still available to screen readers, hover to view
Box Title

size

@include size(300px, 1.8em);

triangle

.element {
  @include size(300px, 50px);
  @include center;
  background-color: #b25c9c;
  position: relative;
  
   &::before {
    @include triangle(up, 2rem, 1rem, #b25c9c);//mixin
    position: absolute;
    content: "";
    //position triangle on box
    top:-1rem;
    left:6rem;
   }
  }

Home | About | Test Page | Classes