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.
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.
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?
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.
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!
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:
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
});
.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);
}
<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.
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.
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
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 SizeLine-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;
}
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 © 2020 VBlog
Theme by Anders Noren — Up ↑