css

Understanding CSS clip-path

Understanding CSS clip-path

The world of CSS just keeps getting better as new specs are introduced and eventually adopted by major browsers. One of those exciting specs is CSS Masking. While not fully supported across the major browser line up, it’s an interesting addition that’s generating a lot of attention. One absolutely outstanding example of what can be achieved with css masking is a project by Bryan James - Species in Pieces that showcases a collection of endangered species, made and animated using clip-path. 

Defined in the CSS Masking Module Level 1 spec, CSS masking provides two ways to hide sections of full images or objects: masking and clipping. Masking allows the use of another element to create a luminance or an alpha mask. Clipping simply provides a mechanism to only show a certain section of an object. Think of it as taking scissors and cutting a part of a piece of paper into a shape you want. 

In this post, I want to explore specifically the clip-path property and show a quick example of what can be achieved by it. 

The case against SASS nested CSS selectors

For a long time I have been a proponent for LESS. Simple, basic, and does what matters most - CSS compilation from multiple sources. While SASS comes with a variety of merits, the supposed "benefit" that people seem to often enjoy is the ability to nest CSS selectors. Those in the DRY (Don't Repeat Yourself) mindset absolutely love this feature. Personally, I hate it. I hate it for the simple reason that I don't believe that this mess:

.show-some-thing .show-another-thing {
   color: #FFF;
   margin: 10px;

   .some-ugly-button {
      background-color: blue;
      border: 1px solid red; 

      .selected {
         background-color: green;
      }
   }
}

offers enough of a benefit from the supposed "conciseness" to offset the eyesore that it causes.

Sure, this might not be as "concise", but it sure is easier to read and debug:

.show-some-thing .show-another-thing {
   color: #FFF;
   margin: 10px;
}

.show-some-thing .show-another-thing .some-ugly-button {
   background-color: blue;
   border: 1px solid red; 
}

.show-some-thing .show-another-thing .some-ugly-button .selected {
   background-color: green;
}

And that's just a basic example. The more nesting, the harder it is to read SASS nested code. My advice - don't do nest your CSS.

Removing the large screen site option from Bootstrap 3

Last year I endorsed the idea of a full-width blog. No sidebars, no distractions, content in plain focus. While the design is very clean, one flaw with the default settings of the Bootstrap 3 grid is the large screen mode that is enabled for devices with widths larger than 1200px. It took me a bit of digging around how to properly disable the large screen mode, leaving only xs (extra small), sm (small) and md (medium) @media-query breakpoints. The solution is simple:

In app.less (do not modify Bootstrap LESS files for easier upgrades), first change the medium screen width breakpoint if you're not satisfied with the default. This will become your maximum container width.

@screen-md: 960px;

Then, override the default media query with the medium screen as the maximum width:

@media (min-width: @screen-md) {
   .container {
      width:@screen-md;
   }
}