VBlog

Tag: CSS

Using front-end frameworks come with all sorts of side effects if used incorrectly. This post looks into the pros and cons of using Bootstrap but is also applicable to other frameworks. Nice simple educational read.

Offset a background image from the right or the bottom

Until recently, if you needed to offset a background image from the right, there was no easy road. One of the most common tricks was to use the calc() function of CSS and do something like background-position: calc(100% - 10px) top. That worked like a charm, but there must be a way to achieve this more easily, right?

Right! Meet Background Position Edge Offset.

This new(ish) feature of CSS3 allows you to position the background relative to the specified edge, like so:

background-position: right 10px top;

Or:

background-position: right 100% bottom 5px;

The support is solid, with all browsers implementing it, even Internet Explorer starting from IE11.

 

Pure CSS image filter effects

I just (re)discovered all the amazing effects you can apply to images purely in CSS. We rarely use them in our designs and code, while they are now quite strongly supported by major browsers (only IE doesn’t, but Edge does).

Here’s a list of each effect. And they can be combined too!

Continue reading

A Gulp task to easily generate and use Sprite images

Using sprites can significantly improve a webpage’s performance, we should definetly use them in all of our projects… But building sprites can be a pain.

This small Gulp task is meant to make it a lot easier to both build and use sprites. It does two things:

  1. Combine all the image contained in a folder into a unified sprite PNG file
  2. Generate CSS rules to easily include those images in a webpage.

The task:

gulp.task('sprite', function () {
    var spriteData = gulp.src('source_img/*.png') // Source images
        .pipe(spritesmith({
            imgName: 'sprite.png', // Name of the final sprite
            imgPath: 'sprite.png', // Path to the final sprite
            cssName: 'sprite.css', // Name of the CSS file that will be generated
            cssTemplate: 'sprite.mustache' // Path to the mustache template (used to build the CSS file)
        }));

    var imgStream = spriteData.img
        .pipe(gulp.dest('.')); // Path to the final sprite

    return cssStream = spriteData.css
        .pipe(gulp.dest('.')); // Path to the generated CSS file
});

Example of generated sprite:

sprite

Example of CSS rules generated by the task:

.sprite {
    background: url("sprite.png") top left no-repeat;
    display: inline-block;
    vertical-align: middle;
    background-size: calc(512px/2) calc(384px/2);
}

.sprite-box {
    background-position: calc(-128px/2) calc(0px/2);
    width: calc(128px/2);
    height: calc(128px/2);
}
.sprite-browser {
    background-position: calc(-256px/2) calc(-128px/2);
    width: calc(128px/2);
    height: calc(128px/2);
}

Example of HTML using those classes to include images:

<div class="sprite sprite-box"></div>
<div class="sprite sprite-browser"></div>

This Gulp task has proven very useful to our team, it’s now included by default in all of our projects. If you’d like to grab the entire code or contribute to it, it’s available on my Github.

In this 1 year old talk at Beyond Tellerand, Brad Frost introduces Atomic Design, a relatively new concept encouraging developers and UX designers to build component based systems instead of pages.

It’s a long video (nearly 1h), but I find it really inspiring, definitely worth the watch.

Building a Responsive and Scalable Typography

I recently watched Aquent’s Responsive Web Design course, and  one part especially catched my attention: Web Typography. This topic has always been confusing for me, and at the end of this course I finally have some ground rules for building a responsive and scalable typography for any website, which I’m sharing with you today.

1. Starting from a clean slate

The first thing to do, and I bet you already do it on your projects, is to reset your styles so you can start building a typography that will render the same on every browser and device.

Including normalize.css stylesheet in your page will do the trick, in association with this CSS code :

html {
    font-size: 100%;
    line-height: 1;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

Font-size: 100%
All browsers agreed that 100% = 16px
More info: http://filamentgroup.com/lab/how_we_learned_to_leave_body_font_size_alone/

Line-height: 1
Unitless value. 1 = 16px
More info: http://meyerweb.com/eric/thoughts/2008/05/06/line-height-abnormal/
About Unitless: http://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/

Text-ajust-size: 100%
Mobile browsers attempt to adjust text size to be nice to users. This code disables that auto scale feature.
More info : https://developer.mozilla.org/en-US/docs/CSS/text-size-adjust

2. Converting Pixels to Ems

This part is tricky. I had to replay Aquent’s course 3 times to fully understand it. It’s actually quite trivial if you know how to tackle the issue. The important thing is to start with the paragraphs (<p>) typography, to extend it to other components like headings.

It all starts with this simple formula:

EM = Target font size in PX / Default line height (16px)

So for example, if my paragraph font-size is 17px, then I should use 17px / 16px = 1.063em. Same goes for the line-height.

font-size: 17px /* 17px / 16px = 1.063 */
font-height: 20px /* 20px / 16px = 1.25 */

Let’s now style our headings. Here are our rules:

Font Size:
H1 = 3 x Paragraph Size
H2 = 2 x Paragraph Size

Line-height:
Should stay the same as for paragraphs.

So if my paragraphs font-size is 1.063em (17px), then here goes the styles for my headings:

h1 {
    font-size: 3.189em; /* 1.063 x 3 */
    line-height: 1.25;
}
h2 {
    font-size: 2.126em; /* 1.063 x 2 */
    line-height: 1.25;
}

3. Typographic Scale & Vertical Rhythm

This method will allow us to determine the font-size of any component on our page and maintain some vertical rhythm (finding the ideal combination of font-size and line-height for all the text on a page).

All of it is based on magic numbers:

Scale = Paragraph font-size x Paragraph line-height

Scale: 1.063 x 1.25 = 1.3 (rounded)
3/4 Scale = 0.975
1/2 Scale = 0.65
1/4 Scale = 0.325

We can use these to determine spacing on our page.

For example, let’s say we need to add margin around our <blockquote> element. To determine this margin, we used to try 10px, then 20px, and chose the spacing that seemed to fit the best. Now, we can use our scale.

Always start with 1 scale (1.3em). If margin: 1.3em doesn’t seem enough, then add 1/2 scale to it, so 1.3 + 0.65 = 1.95em. It’s still up to us to use the correct spacing, but at least we guarantee vertical rhythm on our page.

The same methodology is relevant for any CSS property, from width and height to box-shadow.

Copyright © 2018 VBlog

Theme by Anders NorenUp ↑