How to calculate CSS letter-spacing vs. “tracking” in typography? Photoshop/Illustrator to CSS

Today we are going to show you how you can convert letter-spacing from tracking from design programmes like Photoshop or Illustrator to CSS.

Have you ever had that conversation with a graphic designer for a layout that specifies tracking (letter-spacing in our language) for text elements?

So how do you make this conversion?

The Simple Answer

Divide the tracking by 1000 and use em’s.

A bit of background about letter-spacing is that it is always applied to text so we should use a relative unit of length. Font size can change by the user or even by the cascade.

The best unit of length for text is the em unit.

Why is tracking different?

Programmes like Adobe’s Photoshop, Illustrator and InDesign use em’s in their tracking but manipulate the unit so it’s an easier number for designers to play with. To make it easier they multiply it by 1000.

Take a look at this screenshot from Illustrator:

Note: Tracking (in thousandth of an em)

Converting tracking back to whole em’s

To do this, all we need to do is divide the tracking number by 1000 to get the unit back to a whole em that you can use in CSS.

So 75/1000 = 0.075em.

Pretty simple right?

How to calculate this in CSS/SCSS

If like us, you use SCSS and want a reusable solution, then here is an awesome mixin for you:


/* Convert Illustrator, InDesign and Photoshop tracking into letter spacing.
-------------------------*/

@function tracking( $target ){
    @return ($target / 1000) * 1em;
}

@mixin tracking( $target ){
    letter-spacing: tracking( $target );
}

Then to use the above function you can simply type:


.txt-element {
     @include tracking(75);
}

Alternatively, you can just to the maths inline without a mixin so it’s less abstracted as follows:


.txt-element {
    letter-spacing: #{(75/1000)}em;
}

The output of the above code would be:


.txt-element{
    letter-spacing: 0.05em;
}

A few things to note…

You should not use a pixel-based value as pixels are fixed and break when:

  1. The designer changes the font-size. You would need to recalculate the value.
  2. If the user changes their text size the design of your site won’t appear as desired or even illegible to read.

In addition to this, browsers render text different to how the graphic design programs do so don’t be surprised if the designer tweaks the tracking/letter-spacing on review of the implementation ; )

We hope you enjoyed this article and that it has helped you. Happy coding all!

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

13 Amazing SASS (SCSS) Mixins We Use On Every Website

We absolutely love Sass (SCSS), it’s such a massive time-saver and makes building front-end design such a breeze!

There are many JavaScript tools for working with files and automating other tasks, but Sass’s built-in mixin capabilities allow one to write modular front-end style code. In this article, we have listed thirteen of our favourite Sass mixins for automating the writing of web styles.

The mixins we will be covering in this article are the following:

  • Media Breakpoints
  • Retina Images
  • Clearfix
  • Box Sizing
  • Border Radius
  • Opacity
  • Center Block
  • Text Overflow
  • Font Size
  • Line Height
  • Transitions
  • Calc
  • Converting Tracking to Letter Spacing

If you want to just simply download the Sass Mixin you can click here.

Alternatively, you can copy and paste this below:

Note: If you continue reading, you will find a breakdown of all the mixins, what they do and how to use them


/* Breakpoints
-------------------------*/

@mixin breakpoint($point) {
  @if $point == xl {
    @media (max-width: 75em) { @content; }
  }
  @else if $point == minxl {
    @media (min-width: 75em) { @content; }
  }  
  @else if $point == lg {
    @media (max-width: 62em) { @content; }
  }
  @else if $point == md {
    @media (max-width: 48em)  { @content; }
  }
  @else if $point == sm {
    @media (max-width: 34em)  { @content; }
  }  
  @else if $point == mobile {
    @media (max-width: 25em)  { @content; }
  }  
  @else if $point == mobilexs {
    @media (max-width: 21.875em)  { @content; }
  }      
}

/* Retina Images
-------------------------*/

@mixin image-2x($image, $width, $height) {
  @media (min--moz-device-pixel-ratio: 1.3),
         (-o-min-device-pixel-ratio: 2.6/2),
         (-webkit-min-device-pixel-ratio: 1.3),
         (min-device-pixel-ratio: 1.3),
         (min-resolution: 1.3dppx) {
    /* on retina, use image that's scaled by 2 */
    background-image: url($image);
    background-size: $width $height;
  }
}

/* Clearfix
-------------------------*/

@mixin clearfix() {
    &:before,
    &:after {
        content: "";
        display: table;
    }
    &:after {
        clear: both;
    }
}

/* Box Sizing
-------------------------*/

@mixin box-sizing($box-model) {
  -webkit-box-sizing: $box-model; // Safari <= 5
     -moz-box-sizing: $box-model; // Firefox <= 19
          box-sizing: $box-model;
}

/* Border Radius
-------------------------*/

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  border-radius: $radius;
  background-clip: padding-box;  /* stops bg color from leaking outside the border: */
}

// Single side border-radius

@mixin border-top-radius($radius) {
  -webkit-border-top-right-radius: $radius;
  border-top-right-radius: $radius;
   -webkit-border-top-left-radius: $radius;
   border-top-left-radius: $radius;
   background-clip: padding-box;
}
@mixin border-right-radius($radius) {
  -webkit-border-bottom-right-radius: $radius;
  border-bottom-right-radius: $radius;
     -webkit-border-top-right-radius: $radius;
     border-top-right-radius: $radius;
     background-clip: padding-box;
}
@mixin border-bottom-radius($radius) {
  -webkit-border-bottom-right-radius: $radius;
  border-bottom-right-radius: $radius;
   -webkit-border-bottom-left-radius: $radius;
   border-bottom-left-radius: $radius;
   background-clip: padding-box;
}
@mixin border-left-radius($radius) {
  -webkit-border-bottom-left-radius: $radius;
  border-bottom-left-radius: $radius;
     -webkit-border-top-left-radius: $radius;
     border-top-left-radius: $radius;
     background-clip: padding-box;
}

/* Opacity
-------------------------*/

@mixin opacity($opacity) {
  opacity: $opacity;
  $opacity-ie: $opacity * 100;
  filter: alpha(opacity=$opacity-ie); //IE8
}

/* Center Block
-------------------------*/

@mixin center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Text overflow
-------------------------*/

@mixin text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Font Size
-------------------------*/

@mixin font-size($size: 12, $base: 16) {
    font-size: $size + px;
    font-size: ($size / $base) * 1rem;
}

/* Line Height
-------------------------*/

@mixin line-height($height: 12, $base: 16){
    line-height: $height + px;
    line-height: ($height / $base) * 1rem;
}

/* Transitions
-------------------------*/

@function prefix($property, $prefixes: (webkit moz o ms)) {
    $vendor-prefixed-properties: transform background-clip background-size;
    $result: ();
    @each $prefix in $prefixes {
       @if index($vendor-prefixed-properties, $property) {
         $property: -#{$prefix}-#{$property}
       }
       $result: append($result, $property);
    }
    @return $result;
}

@function trans-prefix($transition, $prefix: moz) {
    $prefixed: ();
    @each $trans in $transition {
        $prop-name: nth($trans, 1);
        $vendor-prop-name: prefix($prop-name, $prefix);
        $prop-vals: nth($trans, 2);
        $prefixed: append($prefixed, ($vendor-prop-name $prop-vals), comma);
    }
    
    @return $prefixed;
}


@mixin transition($values...) { 
    $transitions: ();
    @each $declaration in $values {
        $prop: nth($declaration, 1);
        $prop-opts: ();
        $length: length($declaration);
        @for $i from 2 through $length {
            $prop-opts: append($prop-opts, nth($declaration, $i));   
        }
        $trans: ($prop, $prop-opts);
        $transitions: append($transitions, $trans, comma);
    }
      
    -webkit-transition: trans-prefix($transitions, webkit);
    -moz-transition: trans-prefix($transitions, moz);
    -o-transition: trans-prefix($transitions, o);
    transition: $values;
}

Media Breakpoints

Media queries allow you us to easily add breakpoints to our stylesheet. With those, we can quickly define custom responsive behaviour for any element within several different breakpoints.

This works perfectly on its own or with popular grid frameworks such as Bootstrap.

The if statement allows us to change any properties of elements based on the size of the screen. This allows you to easily change the behaviour of your CSS attributes for the breakpoints you wish to define.

With the Sass mixins we supplied above, we typically add a new file called responsive.scss and the way we use this is as follows:


@include breakpoint(minxl) { /* Min 1200px */
    /* Add code Here */
}

@include breakpoint(xl) { /* Max 1200px */

}

@include breakpoint(lg) { /* 992px */

}

@include breakpoint(md) { /* 768px */

}

@include breakpoint(sm) { /* 575px */

}

Clearfix

We can apply the clearfix css property easily to any element.

This mixin will definately benefit you whenever you have content floating both to the left and right and want to clear the space below the floated element to insert new content below. We use this as follows:


.element {
    @include clearfix();
}

Box Sizing

box-sizing border-box is a great way to handle the pesky box model issue that comes with setting padding to your layouts. It works from IE8+.

Example usage:


*,
*:after,
*:before {
    @include box-sizing(border-box);
}

Border Radius

Like all other mixins with featured, this is all about saving time. The border-radius CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners. Like a lot of examples we have showcases, there are ways to add certain CSS properties so they work cross-browser. So to avoid constantly having to write several lines of codes just do make a cross-browser border-radius, we can define this is just one simple line of code as follows:


.element {
    /* For even border-radius */
    @include border-radius(20px);

    /* For different border-radius values */
    @include border-radius(20px, 10px, 5px, 25px);
}

Opacity

The opacity property sets the opacity level for any type of element.

The opacity-level describes the transparency-level, where 1 is not transparent at all, 0.5 which is 50% see-through, and 0 which is completely transparent.

To use this Sass mixin we can use the below code:


.element {
    @include opacity(0.5);
    /* or */
    @include opacity(50%);
}

Both examples above are the same, it's just a matter of preference. The above will both show the .element with 50% transparency. One as an integer from 0 to 1, the other as a percentage from to 100%.

Center Block

If we have an element in which we need to centre without affecting the margin-top and margin-bottom properties we can use our Center Block mixin. This basically centred an element in the middle of its parent container. To use this we can simply use:


.element {
    @include center-block;
}

Text Overflow

The text-overflow CSS property sets how hidden overflow content is signalled to users. It can be clipped, display an ellipsis (' … '), or display a custom string of your choice.

As always, we can avoid writing three lines of code by just writing the following to any element:


.element {
    @include text-truncate;
}

Font Size

With this mixin, we can set a rem font size to all-our elements by just defining the font-size. This is a better way to scale up and down fonts instead of em. Using em will compound based on the other CSS attributes, but rem will only scale up or down based on the size you define in your HTML document. By using this, you will drastically automate your typography coding workflow.

The beauty of this as most of these mixins is that it is cross-browser. This mixin creates a pixel fallback from browsers that don't support rem such as IE8 and below. When the browser doesn't support rem sizing, the mixin will use the pixel equivalent and set the output in both rem and px value for any given element. We use this as follows:


.element {
    @include font-size(16);
}

Line Height

This works in the exact same way as the Font Size mixin describes above. The line-height CSS property sets the height of a line box. It's commonly used to set the distance between lines of text. On block-level elements, it specifies the minimum height of line boxes within the element. On non-replaced inline elements, it specifies the height that is used to calculate line box height.

We use this mixin as follows:


.element {
    @include line-height(24);
}

Transitions

With this, we can easily define animation properties and add them to any element. As of right now, the animation CSS property still needs vendor prefixes, so this will also automatically add that to the CSS in a much quicker way.

This can be time-consuming if you like to use a lot of animation on your website as you have to write a lot of CSS code to make it work cross-browser.

We can use this quite simply with our Sass mixin as follows:


.element {
    @include transition(transform 0.2s ease-in 0.2s, opacity 0.2s ease);
}

Calc

The calc() CSS function lets you perform calculations when specifying CSS property values.

Again, when using calc you have to add several lines of code to make it work cross-browser. Now we can use this as simply as:


.element {
    @include calc( width, '100% - 100px');
}

Converting Tracking to Letter Spacing

If you've used applications such as Photoshop or Illustrator, for example, you will notice that they use 'Tracking' which is essentially the same as letter-spacing. They are calculated differently and so we created a way to make the conversion without having to think about it. If you develop a lot of websites based on PSD's, this will save you quite a bit of time.

We can simply use this as follows:


.element {
    @include tracking(100);
}

This will convert the tracking of the given element to the correct letter-spacing value in pixels. If you want to read more about this you can read an article we wrote specifically on this here: How to calculate CSS letter-spacing vs. “tracking” in typography? Photoshop/Illustrator to CSS

Conclusion

Using Sass mixins like the ones we have outlined above in this article is a great way of making your workflow more efficient and will significantly reduce the amount of time you spend writing CSS code.

The benefits of Sass extend beyond automation and can help to easily create and manage your project stylesheets. Even some of the most basic web projects can have thousands of lines of CSS code. Sass is a great way to break this code up into more manageable bits, each with their own focus.

We hope you enjoyed this article, if you've decided to use this in your project, let us know!

Do you have any other great Sass mixins you use? Let us know in the comments below.

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

10 Frontend Web Development Tools for 2020

Web development is constantly evolving, with so many libraries and frameworks available and appearing all the time and replacing other less efficient tools. As developers, we must always keep up-to-date with the latest trends and find out the best solutions for your digital projects. Today, we will go through the best tools to use for Frontend Development in 2020.

1. Chrome Developer Tools

This is a set of tools that helps developers get easy access using the browser, which saves devs a lot of time. It makes things super easy by showing you errors in the code directly through the console. When it comes to styling, you get a real-time preview of the changes you make on the fly saving a lot of time. It’s super easy to use and it includes so many additional features. You can even audit your website through the console using PageSpeed Insights. If this is a new tool for you, just know it is perfect to ensure that your website is fully optimised for speed, giving recommendations on how you can make your site faster which in turn will improve your SEO.

The Google browser updates every 6 weeks, so you need to check its web portal to continue developing at an advanced level and to keep up-to-date with the new features. These tools allow you to perform a wide variety of tests in your browser, which helps you save a huge amount of time. Using ‘Device mode’ for example, you can work and test your site to ensure it’s responsive and works across several devices. The ‘sources panel’ allows JavaScript debugging with breakpoints which makes life a lot easier when it comes to debugging. ‘Timeline assists’ helps you find performance issues during running time. It’s essential to have a super-fast website and this tool is extremely helpful.

2. TypeScript

TypeScript is an open-source programming language. It is a strict syntactical superset of JavaScript and it adds optional static typing to the language. TypeScript can be used to develop JavaScript applications for both client-side and server-side execution just like Node.JS or Deno.

TypeScript is designed for the development of large applications and transcompiles to JavaScript. As TypeScript is a superset of JavaScript, existing JavaScript programs are also valid TypeScript programs.

TypeScript creates a great web development environment for front-end developers.

TypeScript is a very modern front-end development tool that accepts many integrations. One of the key features is that it accepts other JS libraries, making it possible to use TypeScript on any environment running JavaScript. It accepts definition files that can contain type information of existing JavaScript libraries, such as C, C ++ header files and it is portable in browsers, devices and operating systems.

3. GitHub

GitHub is a Git repository hosting service and it includes many features. Git is a command-line tool that provides a Web-based graphical interface. It also provides access control and several collaboration features, such as wikis and basic task management tools for every project.

The key features of GitHub are allowing all the code in one place, coordinating use, staying aligned, and, after each GitHub project management tool, the developers can host the direct documentation through the repositories.

4. Sass / SCSS

Sass/SCSS is the most reliable and robust CSS extension language. This web development tool helps to extend the functionality of an existing CSS such as variables, inheritance, and nesting with ease. Sass is an open-source project that attracts updated CSS preprocessors. This tool gives you a hand in writing a code that can be easily maintained, thus reducing the amount of CSS you need to code.

Usually, with this, you have a ‘mixins’ file which contains code to simplify coding. As a brief example, let’s say you execute the following code to work cross-browser:


    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear;

Well, the awesome thing with Sass/SCSS is that we can condense this to a single line of code as follows:-


    @include transition(all 0.3s linear);

It’s a massive time-saver!

Before you can use Sass/SCSS, it needs to be configured on your project. Sass allows you to nest your CSS sectors using a technique that follows the visual hierarchy of your HTML. There are also several applications that will help you use Sass for Mac, Linux and Windows platforms. Some of the key features are that it is simple and easy to use this front-end tool to write any code, it accepts language extensions such as variables, inheritance, and nesting, it has many useful functions for manipulating colours and other values and it has advanced functions such as library control directives.

To get started, I would recommend reading this post that will give you a starter template to use mixins and save a lot of time when it comes to writing CSS code.

5. jQuery

jQuery is one of the most popular JavaScript libraries that is widely used for front-end development. This large library allows developers to focus on the functionality of different aspects. Through this JavaScript library, development can become very easy, such as handling HTML documents, traversing and Ajax. The key features are that it facilitates the creation of highly interactive web applications, offers a powerful theme mechanism, is very friendly and stable, offers extensive support for the browser. On top of this, it’s free and it’s always updating.

In a nutshell, jQuery is very lightweight (write less, do more”) based on the JavaScript library. The purpose of jQuery is to make it much easier to use JavaScript on your website. jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish and wraps them into methods that you can call with a single line of code. Simplicity and giving devs the ability to code faster is always a bonus!

6. Sublime Text

Sublime Text is a sophisticated text editor which is widely used among developers. It includes wide features such as Syntax Highlighting, Auto Indentation, File Type Recognition, a wicked sidebar, Macros, Plug-in and Packages that make it easy for working with codebase.

The key features of Sublime Text are that it is compatible with many programming languages, offers Python-based plugin API and it has simultaneous editing which allows for the same interactive changes across multiple domains. We 100% recommend you checking this out, once we started using it, we never looked back!

7. CodePen

CodePen is a web development environment for front-end designers and developers. It enables faster and smoother development. It allows you to add HTML, CSS and JS code to create test cases before implementing it on websites. Another cool feature is that it has a massive library of functions that could be applicable to your site. What does this mean? Well, it’s going to save you a lot of time coding something from scratch when an already implemented code may just need a few edits to make it applicable to your website.

The key features are that it includes great features for faster CSS writing, allows live viewing and live synchronisation and the API prefill feature allows you to add links and demo pages, without having to code anything. A similar website we tend to use is JSFiddle, which offers all the same features. However, the preference is dependant on each user.

8. AngularJS

AngularJS is a structural framework for dynamic web applications. It lets you use HTML as your template language and lets you extend HTML’s syntax to express your application components clearly and succinctly. Its data binding and dependency injection eliminate much of the code you currently have to write. It is an open-source web application framework that allows you to simplify the front-end development process by creating an expressive environment that is legible and accessible. Some of its key advantages are that it is free, it’s open-source and widely used by thousands of developers, allowing you to create RICH Internet Applications, it automatically manages the appropriate JavaScript code for each browser and offers the option to write the application from the client using JavaScript and MVC. AngularJS is quite commonly used today so it’s an important framework to learn moving forward. There have been many times where we have had to take over websites that utilise AngularJS, so stay ahead of the game and learn something new, this is definitely worthwhile!

9. Grunt

Grunt is one of the best front-end development tools when it comes to automating tasks. It is quite commonly used with NodeJs, which offers plugins for common tasks and is very flexible and widely adopted. It offers an alternative to writing down all kinds of tasks that go well with your requirements.

The key features of Grunt are allowing automation of repetitive tasks without a great deal of effort, creating the workflow simply by writing a configuration file, including activities for extending the functionality of plugins/scripts, it speeds up the development process, it also increases the performance of your projects and reduces the chance of errors while you are performing repetitive tasks.

10. Npm

Another great tool is Npm which represents the Node package manager for JavaScript. With Npm, you are able to discover reusable code packages and assemble them in powerful and new ways. It is a command-line utility used for interacting with a named repository that helps in a package.

Some of its key features include the ability to publish and control access to a namespace, you can reuse and discover a massive library of free code packages in the registry, manage public and private code using the same workflow and find out where you have reused code within your teams.

Conclusion

So why is it so important to keep up to date with the latest technologies? Well, as we already mentioned, the world wide web is always evolving and new tools are always being created to make it easier for developers to code. Quite a lot of these tools mentioned help developers by enabling them to create the same functionalities a lot quicker; delivering a project in a shorter time frame is highly cost-effective and it saves you the time you can use for other tasks. In addition to this, you may have to take over a project that uses a framework that you are not familiar with. That being said, it’s always best to keep up-to-date with the latest technologies to prepare you to complete any given task which in turn will allow you to complete more jobs more quickly and effectively.

Well, we sure hope you loved this post, leave us a comment and let us know your thoughts. If we missed anything you might think that should be in this post, let us know in the comments!

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

We’re Hiring! 1 x Freelance Web Developer

We are currently in need of a website developer to work with to complete ad-hoc jobs as required as we quite often we tend to get a work overload that we could do with some assistance in order to complete tasks in a timely manner. We always aim to deliver any type of project in a timely manner which is how we maintain long-term relationships with our clients.

Please only submit your application if you are competent in the following:-

  • Bespoke WordPress Theme Builds
  • Plugin Customisation
  • HTML5 / CSS3 / PHP / jQuery / JavaScript / SASS / SCSS
  • Bootstrap 4
  • Providing estimates and delivering on time
  • Developing Email Templates using MailChimp
  • Based in Europe*

 

Optional requirements but not essential:-

  • Magento
  • Shopify
  • Laravel
  • Various other frameworks as there tends to be a varied type of work.

 

Please submit your hourly rate and a list of your expertise within your application.

To get started, email your CV and Cover Letter to [email protected]

Thank you for reading, and we look forward to hearing from you!

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

Useful Sass Mixins to include in your web projects

If you don’t know already, mixins are one of the most powerful features of Sass. Mixins allow for efficient and clean code repetitions as well as an easy way to adjust your code with ease. If you are using Sass in your development workflow, no doubt you are using some of the mixins that I have covered below but some might also be new and helpful.

If you are new to Sass, I would highly recommend you check out my Why you scared of Sass? post first.

Responsive Breakpoints

Just set your breakpoint at whatever width you desire and go crazy.


@mixin breakpoint($point) {
  @if $point == large {
    @media (min-width: 64.375em) { @content; }
  }
  @else if $point == medium {
    @media (min-width: 50em) { @content; }
  }
  @else if $point == small {
    @media (min-width: 37.5em)  { @content; }
  }
}

Usage:


.page-wrap {
  width: 75%;
  @include breakpoint(large) { width: 60%; }
  @include breakpoint(medium) { width: 80%; }
  @include breakpoint(small) { width: 95%; }
}

Output:


.page-wrap {
  width: 75%;
}
@media (min-width: 64.375em) {
  .page-wrap {
    width: 60%;
  }
}
@media (min-width: 50em) {
  .page-wrap {
    width: 80%;
  }
}
@media (min-width: 37.5em) {
  .page-wrap {
    width: 95%;
  }
}

Retina Images

This mixin by Jason Zimdars is a breeze to use and offers a greater visual experience to those that are lucky enough to have a retina device.


@mixin image-2x($image, $width, $height) {
  @media (min--moz-device-pixel-ratio: 1.3),
         (-o-min-device-pixel-ratio: 2.6/2),
         (-webkit-min-device-pixel-ratio: 1.3),
         (min-device-pixel-ratio: 1.3),
         (min-resolution: 1.3dppx) {
    /* on retina, use image that's scaled by 2 */
    background-image: url($image);
    background-size: $width $height;
  }
}

Usage:


div.logo {
   background: url("logo.png") no-repeat;
   @include image-2x("logo2x.png", 100px, 25px);
 }

Output:


div.logo {
  background: url("logo.png") no-repeat;
}
@media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
  div.logo {
    /* on retina, use image that's scaled by 2 */
    background-image: url("logo2x.png");
    background-size: 100px 25px;
  }
}

Clearfix

There are a few ways to implement the clearfix hack but the following Sass Mixin has been in my toolbox for the last year thanks to this article on Nicolas Gallagher’s blog.


@mixin clearfix() {
    &:before,
    &:after {
        content: "";
        display: table;
    }
    &:after {
        clear: both;
    }
}

Usage:


.article {
     @include clearfix();
}

Output:


.article {
  *zoom: 1;
}
.article:before, .article:after {
  content: "";
  display: table;
}
.article:after {
  clear: both;
}

Box Sizing

Reset your elements box model with ease.


@mixin box-sizing($box-model) {
  -webkit-box-sizing: $box-model; // Safari <= 5
     -moz-box-sizing: $box-model; // Firefox <= 19
          box-sizing: $box-model;
}

Usage:


*,
*:after,
*:before {
  @include box-sizing(border-box);
}

Output:


*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

Border Radius

Always a handy mixin. Set every border radius or just a single side without worrying about all those prefixes.


@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  border-radius: $radius;
  background-clip: padding-box;  /* stops bg color from leaking outside the border: */
}

// Single side border-radius

@mixin border-top-radius($radius) {
  -webkit-border-top-right-radius: $radius;
  border-top-right-radius: $radius;
   -webkit-border-top-left-radius: $radius;
   border-top-left-radius: $radius;
   background-clip: padding-box;
}
@mixin border-right-radius($radius) {
  -webkit-border-bottom-right-radius: $radius;
  border-bottom-right-radius: $radius;
     -webkit-border-top-right-radius: $radius;
     border-top-right-radius: $radius;
     background-clip: padding-box;
}
@mixin border-bottom-radius($radius) {
  -webkit-border-bottom-right-radius: $radius;
  border-bottom-right-radius: $radius;
   -webkit-border-bottom-left-radius: $radius;
   border-bottom-left-radius: $radius;
   background-clip: padding-box;
}
@mixin border-left-radius($radius) {
  -webkit-border-bottom-left-radius: $radius;
  border-bottom-left-radius: $radius;
     -webkit-border-top-left-radius: $radius;
     border-top-left-radius: $radius;
     background-clip: padding-box;
}

Usage:


.button {
  @include border-radius(5px);
}

.submit-button {
  @include border-top-radius(10px);
  @include border-right-radius(8px);
  @include border-bottom-radius(10px);
  @include border-left-radius (6px);
}

Output:


.button {
  -webkit-border-radius: 5px;
  border-radius: 5px;
  background-clip: padding-box;
  /* stops bg color from leaking outside the border: */
}

.submit-button {
  -webkit-border-top-right-radius: 10px;
  border-top-right-radius: 10px;
  -webkit-border-top-left-radius: 10px;
  border-top-left-radius: 10px;
  background-clip: padding-box;
}

Opacity

Set the opacity for all browsers and provide a filter fallback for IE8.


@mixin opacity($opacity) {
  opacity: $opacity;
  $opacity-ie: $opacity * 100;
  filter: alpha(opacity=$opacity-ie); //IE8
}

Usage:


.article-heading {
  @include opacity(0.8);
}

Output:


.article-heading {
  opacity: 0.8;
  filter: alpha(opacity=0.8);
}

Center-align a block level element

Quickly center any element within its parent. Requires width or max-width to be set.


@mixin center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

Usage:


.footer-wrap {
  width: 450px;
  @include center-block;
}

Output:


.footer-wrap {
  width: 450px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

Text Overflow

An easy way to truncate text with an ellipsis. Requires the element to be block or inline-block.


@mixin text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Usage:


.text-truncate {
  @include text-truncate;
}

Output:


.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Absolute Positioned

Pass in the desired location of your target element to produce all the necessary positioning code.


@mixin abs-pos ($top: auto, $right: auto, $bottom: auto, $left: auto) {
  top: $top;
  right: $right;
  bottom: $bottom;
  left: $left;
  position: absolute;
}

Usage:


.abs {
  @include abs-pos(10px, 10px, 5px, 15px);
}

Output:


.abs {
  top: 10px;
  right: 10px;
  bottom: 5px;
  left: 15px;
  position: absolute;
}

Font Size

This mixin sets the font size in rem's with a px fallback.


@mixin font-size($sizeValue: 12 ){
  font-size: $sizeValue + px; //fallback for old browsers
  font-size: (0.125 * $sizeValue) + rem;
}

Usage:


body {
  @include font-size(16);
}

Output:


body {
  font-size: 16px;
  font-size: 2rem;
}

Line Height

This mixin sets the line height in rem's with a px fallback.


@mixin line-height($heightValue: 12 ){
    line-height: $heightValue + px; //fallback for old browsers
    line-height: (0.125 * $heightValue) + rem;
}

Usage:


body {
  @include line-height (16);
}

Output:


body {
  line-height: 16px;
  line-height: 2rem;
}

Reference: Web Design Weekly

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share