{"id":1635,"date":"2016-03-13T20:06:08","date_gmt":"2016-03-13T20:06:08","guid":{"rendered":"http:\/\/www.nathankowald.com\/blog\/?p=1635"},"modified":"2017-03-11T11:33:19","modified_gmt":"2017-03-11T11:33:19","slug":"responsive-utility-classes","status":"publish","type":"post","link":"https:\/\/www.nathankowald.com\/blog\/2016\/03\/responsive-utility-classes\/","title":{"rendered":"Responsive utility classes"},"content":{"rendered":"

Utility classes serve a single purpose.
\nExamples of utility classes: .align-left, .float-left, .clearfix<\/tt>
\nResponsive<\/em> utility classes allow you to create very flexible responsive websites.<\/p>\n

This post is about what makes a great responsive utility class.<\/strong><\/p>\n

I’ll talk about: naming<\/a> and a useful pattern<\/a>.<\/p>\n

For a good introduction to utility classes I suggest David Clark’s excellent article here<\/a>.<\/em><\/p>\n

Naming<\/h2>\n

I don’t like namespaced or aliased utility classes.
\nI don’t like them because they are harder to think about<\/a>.<\/p>\n

An example of a bad utility class is: .u-mt-10@md<\/tt><\/p>\n

Why is this bad?<\/strong>
\nYou must know that .u<\/tt> is a convention for utility classes.
\nYou must know that mt<\/tt> refers to margin-top.
\nYou must know that @md<\/tt> means this utility class targets “Medium” sized devices.<\/p>\n

What’s an alternative?<\/strong><\/p>\n

Utility classes should use CSS property names and values: .margin-top<\/strong>-10-xs<\/tt><\/p><\/blockquote>\n

It is clear that this utility class adds 10 pixels of top margin.
\nUsers familiar with Bootstrap’s grid system may guess that this targets “Extra small” viewports and greater.<\/p>\n

Pattern: Inclusives and Exclusives<\/h2>\n

Two types of responsive utility classes are needed when building layouts: inclusives and exclusives.<\/p>\n

    \n
  1. Inclusive<\/strong>: You need a utility class to target a specific device size and everything greater than it (most common)<\/li>\n
  2. Exclusive<\/strong>: You need a utility class to only target a specific device size<\/li>\n<\/ol>\n

    Separate responsive utility classes into two categories: inclusives and exclusives.<\/p><\/blockquote>\n

    A simple naming convention in your utility class tells you how it will behave.<\/p>\n

    Inclusives<\/h3>\n

    Inclusive classes include the named device size and device sizes greater than itself.<\/strong><\/p>\n

    When you use Bootstrap’s responsive grid you only have to define an element as .col-xs-12<\/tt> and you get 12 columns on mobiles, tablets and desktops.<\/p>\n

    Noticing that this simple pattern results in less classes showed me that by default all responsive utility classes should behave this way.<\/p>\n

    Responsive utility classes are inclusives by default.<\/p><\/blockquote>\n

    Every utility class that uses the convention of .property-value-deviceSize<\/tt> is an inclusive class.<\/p>\n

    You may have noticed our utility classes follow a different convention to Bootstrap’s columns.<\/p>\n

    Bootstrap uses: .property-deviceSize<\/strong>-value<\/tt>
    \nWe use: .property-value-deviceSize<\/strong><\/tt><\/p>\n

    This was intentional because it’s easier to think about.<\/p>\n

    When creating an element I know I want to apply 10 pixels of top margin to an element. The targeted device is a detail.<\/p>\n

    In my head I’ll say “margin top 10 on mobiles and greater”, not “margin top on mobiles and greater, of 10 pixels”.<\/p><\/blockquote>\n

    How inclusives look in code<\/p>\n

    \r\n\/* Inclusives *\/\r\n\r\n\/\/ Mobile and >\r\n.margin-top-10-xs {\r\n    margin-top: 10px;\r\n}\r\n\/\/ Tablet and >\r\n@media screen and (min-width: $screen-sm-min) {\r\n    .margin-top-10-sm {\r\n        margin-top: 10px;\r\n    }\r\n}\r\n\/\/ Desktop and >\r\n@media screen and (min-width: $screen-md-min) {\r\n    .margin-top-10-md {\r\n        margin-top: 10px;\r\n    }\r\n}<\/pre>\n
    Exclusives<\/h3>\n
    Exclusives target the named device size only.<\/strong><\/p>\n
    They follow this convention: .property-value-only<\/strong>-deviceSize<\/tt>
    \nA margin top of 10 pixels applied to only mobiles looks like: .margin-top-10-only<\/strong>-xs<\/tt><\/p>\n
    How exclusives look in code.<\/p>\n
    \r\n\/* Exclusives *\/\r\n\r\n\/\/ Mobile - max-width used\r\n@media screen and (max-width: $screen-xs-max) {\r\n    .margin-top-10-only-xs {\r\n         margin-top: 10px;\r\n     }\r\n}\r\n\/\/ Tablet\r\n@media screen and (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {\r\n    .margin-top-10-only-sm {\r\n        margin-top: 10px;\r\n    }\r\n}\r\n\/\/ Desktop\r\n@media screen and (min-width: $screen-md-min) {\r\n    .margin-top-10-only-md {\r\n        margin-top: 10px;\r\n    }\r\n}<\/pre>\n
    Distinguishing between inclusive and exclusive classes leads to incredibly flexible responsive utility classes.<\/p>\n
    Structural responsive utility classes<\/h2>\n
    Copy this pattern for other structural properties.<\/p>\n
    Responsive utility classes are almost always used on structural CSS.<\/p><\/blockquote>\n
    – Margin
    \n– Padding
    \n– Line breaks<\/a><\/p>\n
    Utility classes should be imported last<\/h2>\n
    Adding utility classes last helps you avoid specificity issues.
    \nUsing Sass or Less simply import your utility classes last.
    \nBy including our utilities last, I’ve not had to use !important yet.<\/p>\n
    \r\n@import base\/reset.scss;\r\n@import layout\/layout.scss\r\n@import module\/headers.scss;\r\n@import page\/homepage.scss;\r\n@import utilities\/utilities.scss;<\/pre>\n
    tl;dr<\/h2>\n
    By naming our responsive utility classes with valid CSS property names and values we have created clear, easy to use utility classes that don’t require education – if you are familiar with CSS properties already.<\/p>\n
    By breaking responsive utility classes into inclusives and exclusives by -xs<\/tt> being inclusives and -only-xs<\/tt> being exclusives, our responsive utility classes are very flexible.<\/p>\n","protected":false},"excerpt":{"rendered":"
    Utility classes serve a single purpose. Examples of utility classes: .align-left, .float-left, .clearfix Responsive utility classes allow you to create very flexible responsive websites. This post is about what makes a great responsive utility class. I’ll talk about: naming and a useful pattern. For a good introduction to utility classes I suggest David Clark’s excellent […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[27,28,7],"tags":[],"class_list":["post-1635","post","type-post","status-publish","format-standard","hentry","category-css","category-responsive-design","category-web-development"],"acf":[],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t