-
-
Save cballenar/4277585 to your computer and use it in GitHub Desktop.
| /* --------------------------------------------------- | |
| Production Versions ( Minified ) | |
| --------------------------------------------------- */ | |
| /* Background */ | |
| /**/ .baseline{font-size:1em;background:none;background-image:-webkit-linear-gradient(rgba(0,0,0,0.2) 1px,transparent 1px);background-image:-moz-linear-gradient(rgba(0,0,0,0.2) 1px,transparent 1px);background-image:linear-gradient(rgba(0,0,0,0.2) 1px,transparent 1px);background-size:100% 1.5em;background-origin:content-box;background-attachment:local} | |
| /**/ .baseline *{background:none !important;outline:1px dashed rgba(100%,0%,0%,.5)} | |
| /* Overlay + Hover switch */ | |
| /**/ body{position:relative}body:hover:before{width:100%;height:100%;display:block;content:"";position:absolute;z-index:9999;pointer-events:none;background-size:100% .75em;background-origin:content-box;background-attachment:local;background-image:-webkit-linear-gradient(rgba(0,255,255,.75) 1px,transparent 1px);background-image:-moz-linear-gradient(rgba(0,255,255,.75) 1px,transparent 1px);background-image:linear-gradient(rgba(0,255,255,.75) 1px,transparent 1px)} | |
| /**/ body:hover *{background:none !important;outline:1px dashed rgba(100%,0%,0%,.5)} | |
| /* --------------------------------------------------- | |
| Background Baseline - Dev | |
| --------------------------------------------------- */ | |
| .baseline { | |
| font-size: 1em; | |
| background: none; /* Removes any pre existing background */ | |
| background-image: -webkit-linear-gradient(rgba(0,0,0,0.2) 1px, transparent 1px); | |
| background-image: -moz-linear-gradient(rgba(0,0,0,0.2) 1px, transparent 1px); | |
| background-image: linear-gradient(rgba(0,0,0,0.2) 1px, transparent 1px); | |
| background-size: 100% 1.5em; /* line-height */ | |
| background-origin: content-box; /* regardless of padding, background will begin in the corner of the box */ | |
| background-attachment: local; /* for scrolling */ | |
| } | |
| /* For Debugging */ | |
| .baseline * { | |
| background: none !important; /* Remove all backgrounds */ | |
| outline:1px dashed rgba(100%,0%,0%,.5); /* Add a dashed outline around elements to view where they begin/end in relationship to baseline. */ | |
| } | |
| /* --------------------------------------------------- | |
| Overlay Baseline + Hover switch - Dev | |
| - Thanks to mhulse for the overlay update! | |
| --------------------------------------------------- */ | |
| body { position:relative; } | |
| body:hover:before { | |
| width: 100%; height: 100%; /* sizes element */ | |
| display: block; content: ""; /* displays element */ | |
| position: absolute; z-index: 9999; /* positions element */ | |
| pointer-events:none; /* click through overlay */ | |
| background-size: 100% .75em; /* sets baseline height */ | |
| background-origin: content-box; /* for correct display of grid */ | |
| background-attachment: local; /* for scrolling */ | |
| background-image: -webkit-linear-gradient(rgba(0, 255, 255, .75) 1px, transparent 1px); | |
| background-image: -moz-linear-gradient(rgba(0, 255, 255, .75) 1px, transparent 1px); | |
| background-image: linear-gradient(rgba(0, 255, 255, .75) 1px, transparent 1px); | |
| } | |
| /* Debugging */ | |
| body:hover * { | |
| background: none !important; /* removes all backgrounds */ | |
| outline:1px dashed rgba(100%,0%,0%,.5); /* red dashed outline around elements */ | |
| } | |
| /* --------------------------------------------------- | |
| Deprecated | |
| ------------------------------------------------------ | |
| Shifts lines to bottom of type. { background-position: 0 -0.6em; } | |
| */ |
Oops, Just saw your other comment. Thanks for the links!
Hi Carlos!
I was gonna suggest the same. Pointer events is awesome but as you mentioned it is not fully supported. After thinking more about it I think the css3 switch may not be such a good idea, it'd be cool but it would have to be added as markup as well making this grid solution more annoying. However one option would be to turn it on/off via :hover.
Yah, that seems to make sense to me too! Thanks updated code snippet, that's pretty cool! I'm going to play with it now. :)
The biggest change is the switch from .baseline to simply body. The way I'm using it now is by dropping the class in the stylesheet, or in the Dev tools, and commenting it on/off. However I understand that the way you're using it is more modular so that it can be dropped in different elements; in which case I do agree that having the baseline class, along with the line-height classes, is the way to go.
Interesting! I haven't completely committed my workflow to "modules"… I'm kinda trying to build something I can use for a simple personal site, to something that I can adapt to a larger newspaper website with lots of coming/going news content… For my personal site, the <body> approach makes a lot of sense, but for my work's site, the modular approach seems way more sane. :D
While testing it at work the bottom: -1px was adding an empty pixel at the bottom which I found a little annoying. I guess if the height of the page matches the grid then it would make sense but overall I didn't think it was necessary. Now, since those properties were setting the height I had to add height:100% I don't know how this will affect other browsers yet.
That makes sense… I had added the extra pixel because the last line of the baseline would not show when applying it to "modules" on the page. I had not tested thoroughly on the <body> tag. :(
This version includes the on hover switch. I'm still getting used to it, it's not all that versatile since every time I scroll it shows the grid even if I don't want to, unless I use the keyboard. However it is very nice not having to switch on/off the grid via comments, I simply hover out of the window and it's gone. I'll continue using it for now.
That's cool! I was kinda getting tired of commenting out the CSS (or adding an x in front of the class name).
I'm looking forward to testing your code. :)
Idea: Multiple colored baselines. Say you want to have the .75em baseline but would like to see how the elements line up to the true 1.5em bl.
Check it out:
In this case I've added 1/4, 1/2 and the full baseline. I think one can work on improving the colors but you get the idea.
In this case I've added 1/4, 1/2 and the full baseline. I think one can work on improving the colors but you get the idea.
WHOA! That's AWESOME!!!!!!!!!!!!!!
Carlos, you ROCK!!!! :)
I can't wait to test the latest version of your code (thanks for updating the gist).
The following is mostly a rant that i need to get out of my head regarding the concept of a baseline grid on the web.
I need some more feedback on the overall idea of baselines in websites. I love the concept but perhaps it's too impractical. I think it may be worth the amount of work it takes but I don't think it's something that can be easily implemented into any site. And while creating a boilerplate such as BaselineCSS.com is a noble idea I often find myself needing more options which are often limited by a boilerplate. Perhaps a boilerplate for something such as this is just not justifiable. Maybe all we can do is give advice on how to do certain things and some steps to follow but not a modular solution that can be just copy n pasted.
Programs such as InDesign make the idea of a baseline easy as it automatically shifts the text to sit ON the baseline, but unless this is possible via JS, one would resort to a faux baseline where elements don't actually sit on it OR a few hours of work to figure out how much each element should be offset, e.g. top:.15em. Now, offsetting the text will only work when the design stays as it was delivered which may not be ideal in all situations, say if you worry about people zooming in/out, there may be some discrepancies. Now perhaps that's going too far and it's unnecessary, idk. I can see someone making the argument that it should always work; which, as we know, it's sometimes nothing more than wishful thinking in our world.
For now I have accepted that obeying a true baseline is not practical. However we CAN resort to a one half/third/quarter sub-baseline. Where we can make sure that the spacing between elements follows AT LEAST some pattern and will at some point, depending on the length of the page, fall back within the 'true' baseline.
I would like to emphasize the idea of a 1/3 sub-baseline (let's call it that for now) Perhaps this allows some more flexibility in some cases and it works fairly well if one uses a 24px baseline.
Nonetheless an implementation of this kind will require some researches and deep involvement with the site. Taking an existing site and updating it to follow a baseline may(most likely) not be possible overnight and in some cases it will require some deep reconfiguration of the CSS which, in turn, will result into a whole lot of work depending on the number of pages.
Thoughts?
SATURDAY REPLY:
Hi Carlos! Just FYI, I'll be back later tonight with some thoughts. :)
MONDAY UPDATE:
Ugh, sorry Carlos, the weekend got away from me. :(
I plan on replying more thoroughly as soon as I can find some time to break away from my day job duties... In the meantime, I was wondering if you have a demo, or demos, of the BLG experiments you've been working on? I'd like to see where you've been successful vs. where you think you haven't (or, at least see examples of the sticking points you've run into).
Also, not sure if this will be of any help, but I've recently realized that some folks are using "modular scale" instead of a baseline grid. Some links/examples:
Baseline grid or modular scale? Both? Neither?
Specifically, Joni's reply:
I use both of them. Here's how.
- I pick a base font-size and line-height.
- I create a baseline grid based on the line-height.
- I create a modular scale based on the font-size.
- I round (or "snap") the results from the modular scale to fit the baseline grid, much like Gridlover does.
Two special things I do with the baseline grid:
- I rarely use just line-height as the unit. Instead, I split it: (line-height/2), (line-height/3) or (line-height/4). I think of this as changing the "resolution" of the baseline grid. Here's an example of Aen Tan applying this method to iOS: aentan.com
- I use this split baseline grid horizontally too. It's great for determining things like paddings for buttons and widths for columns.
This site offers a useful tool:
From what I have learned:
- Related ALA article here.
- Ignore
% of 13unless you're using YUI fonts/resets (more info here). - Important number:
I’ve found that a variety of things can serve as an important number. The size at which caption text looks best, for instance, or a large number like the width of a piece of media—if the project at hand mandates ads or embedded videos, for instance—ensures that something about those elements resonates with the layout as a whole.
– More Meaningful Typography
Other good reads (found linked to from the modularscale.com website):
With all that said, modular scale is, obviously, not a new term/concept... I just wanted to mention it in this thread of ours, as a "scale" could be used in place of (or, in conjunction with) a baseline grid; the beauty of, from what I understand, using a modular scale is that the focus is more on using numbers that fit on the chosen scale vs. line up on a particular baseline.
Me personally? I still like using a baseline grid. Though, admittedly, my experiments have been focused on lining up "modules" on "local" baselines; I think I'd go crazy if I had to line up elements to a global baseline.
Also, there's something about using just a modular scale that doesn't appeal to me... I can't put my finger on it yet, but my gut is telling me to stick with the baseline (and utilize the modular scale when needed).
The key words (concepts?) for me have been "local" and "modules".
Anyway, not sure if you'd be interested, but here's what I've been working on:
There's not much there as I haven't had a ton of free time to work on it... Day job and all. :D
I have yet to impliment the new version of your baseline CSS, and I've been wanting to change the baseline when I get down to "mobile" sizes. In other words, I have a lot more work to do.
If you scroll down to the bottom of the demo page, you can see an example of a "local" baseline "module".
If you view this css (also posted below), you can see where I was playing with a "local" modular scale for the heading tags (96px being the "important number", which is the largest heading size).
/**
* Represent headings and subheadings. These elements rank in importance
* according to the number in their name. The `<h1>` element is said to
* have the highest rank, the `<h6>` element has the lowest rank, and two
* elements with the same name have equal rank.
*
* Note: The `.h1`-`.h6` classes should be used to maintain the
* semantically appropriate heading levels.
*
* Attention: Classes NOT for use on non-headings.
*
* @see https://groups.google.com/d/topic/object-oriented-css/GE1uzU2Bu48/discussion
* @see http://www.stubbornella.org/content/2011/09/06/style-headings-using-html5-sections/
* @see https://github.com/stubbornella/oocss/blob/master/core/heading/heading.css
* @see http://csswizardry.com/2012/02/pragmatic-practical-font-sizing-in-css/
*/
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { margin: 0; }
/**
* (16px = base font size) * (6 heading levels) = (96px = "important number")
* Scale: 1:2 octave.
*
* @see http://modularscale.com/scale/?px1=16&px2=96&ra1=2&ra2=0
*/
h1, .h1 {
font-size: 6em; /* 96px */
line-height: 1.2; /* 7.2 / 6 */
}
h2, .h2 {
font-size: 4em; /* 64px */
line-height: 1.35; /* 5.4 / 4 */
}
h3, .h3 {
font-size: 3em; /* 48px */
line-height: 1.2; /* 3.6 / 3 */
}
h4, .h4 {
font-size: 2em; /* 32px */
line-height: 1.8; /* 3.6 / 2 */
}
h5, .h5 {
font-size: 1.5em; /* 24px */
line-height: 1.2; /* 1.8 / 1.5 */
padding: .6em 0; /* 1.2 / 2 */
}
h6, .h6 {
font-size: 1em; /* 16px */
line-height: 1.8; /* 1.8 / 1 */
padding: .9em 0; /* 1.8 / 2 */
}NOTE TO FUTURE READERS: All of my repository related links, and code, may change over time as I work on things.
I have to get back to work for now. Not sure if any of what I have said is helpful to your endeavors; I mostly wanted to point out the modular scale as an alternative (or, an addition to) baseline grids.
I'll be back if I think of anything else... I'll hopefully have some time this weekend to continue working on my baseline experiments (and, in turn, have something more meaningful to contribute to this conversation). :)
Have an awesome day!
Cheers,
Micky
Hey man, sorry I haven't gotten back to you. I'll try to do so over the weekend.
Hey! No rush at all! I know how that goes. Take your time. :)
Hey Micky,
Thanks a lot for those links, I def agree with Joni's comment. That's exactly what I was going for in my previous comment. Not sure I would call it baseline resolution but that's a minor detail.
I can't say I've been working a lot on this lately. I took some time to work on a small js project but I'm trying to keep an eye on this as well.
Btw, nice job on the bassline project and thanks for putting me in the credits ;) One thing you may want to keep an eye on are the list items. I understand that for baseline purposes it makes sense to make them as even as possible; however from a readability point of view, I think it's better to emphasize the difference between items. This can be achieved by adding top/bottom margin to the lis. In the project I had been working on I added half the baseline which worked nicely with the model I had. At work we made the line height tighter so that we wouldn't need to add as much margin. I think so far you don't have that problem but neither did I at the beginning ;)
Hey did u hear about the new plans for CSS? I can't wait to get my hands on the parent selector.
[http://coding.smashingmagazine.com/2013/01/21/sneak-peek-future-selectors-level-4/]
Anyway, let me know how your project is going.
Oh hey, one more thing. On the hover switch for the baseline, here's something you may wanna try. This will activate the outline from the third child on, leaving the body and top most elements untouched, in some cases it works well, you may wanna add another asterisk.
body:hover * *:hover{background:none !important;outline:1px dashed rgba(100%,0%,0%,.5)}
Thanks a lot for those links, I def agree with Joni's comment. That's exactly what I was going for in my previous comment. Not sure I would call it baseline resolution but that's a minor detail.
Great minds think alike! :)
I can't say I've been working a lot on this lately. I took some time to work on a small js project but I'm trying to keep an eye on this as well.
Ditto. Pretty much the same boat here. I've been back and forth working on various projects myself.
Btw, nice job on the bassline project and thanks for putting me in the credits ;)
Lol, I was hoping you wouldn't mind the shout out.
Not that my repo is useful to anyone other than myself ... I just wanted to make sure anyone stumbling along GitHub would know where (and who) to look for when it comes to all the juicy details. :)
One thing you may want to keep an eye on are the list items. I understand that for baseline purposes it makes sense to make them as even as possible; however from a readability point of view, I think it's better to emphasize the difference between items.
Oh, good tip! Yah, I was having some issues with my lists for sure (especially at the mobile sizes).
This can be achieved by adding top/bottom margin to the lis. In the project I had been working on I added half the baseline which worked nicely with the model I had. At work we made the line height tighter so that we wouldn't need to add as much margin. I think so far you don't have that problem but neither did I at the beginning ;)
Interesting! I think I understand.
Just to clarify, are you saying that you like to put more space between list elements (say, more than the line-height that's applied to <li> items)? Sorry, I guess I'm having a hard time visualizing.
Actually, I ended up boosting my overall font-size/line-height to 16px/28px:
Base font size = 16px or 100% or 1em.
Base line height = 28px or 175% or 1.75em.
... because I was having issues with the 24px line-height for when it cames to things like <code>. I kinda like the airiness of 28px.
Hey did u hear about the new plans for CSS? I can't wait to get my hands on the parent selector.
[http://coding.smashingmagazine.com/2013/01/21/sneak-peek-future-selectors-level-4/]
Oooh, sick! I had not seen that article or read anything about CSS4. Thanks for linkage!
Anyway, let me know how your project is going.
Sure thing. Ditto.
I'm actually going to apply some of these concepts to a larger site over the next few weeks; I have my fingers crossed. I'll let you know how it goes. :)
Btw, not sure if you'd find this interesting, but the 2012 Wordpress template is using vertical rythm:
http://core.trac.wordpress.org/browser/trunk/wp-content/themes/twentytwelve/style.css
Looks like they're using a CSS preprocessor to do some of the math. That's my long-term goal is to convert my bassline project into LESS/SASS/other (and Grunt.js or Yeoman or other), so I can automate the math!!! That would make life so much easier! :D
Keep me posted and I'll do the same.
Cheers,
Micky
I kinda got derailed from ems and baselines:
That's awesome! I'm looking forward to using it in the coming weeks. :)
(P.S. I've tried commenting in the last week and there was something wrong on GitHub's end ... Sorry for my late reply.)
I was gonna suggest the same. Pointer events is awesome but as you mentioned it is not fully supported. After thinking more about it I think the css3 switch may not be such a good idea, it'd be cool but it would have to be added as markup as well making this grid solution more annoying. However one option would be to turn it on/off via
:hover.I've done some modifications to your grid which adapt to the way I work
The biggest change is the switch from
.baselineto simplybody. The way I'm using it now is by dropping the class in the stylesheet, or in the Dev tools, and commenting it on/off. However I understand that the way you're using it is more modular so that it can be dropped in different elements; in which case I do agree that having thebaselineclass, along with the line-height classes, is the way to go.While testing it at work the
bottom: -1pxwas adding an empty pixel at the bottom which I found a little annoying. I guess if the height of the page matches the grid then it would make sense but overall I didn't think it was necessary. Now, since those properties were setting the height I had to addheight:100%I don't know how this will affect other browsers yet.This version includes the on
hoverswitch. I'm still getting used to it, it's not all that versatile since every time I scroll it shows the grid even if I don't want to, unless I use the keyboard. However it is very nice not having to switch on/off the grid via comments, I simply hover out of the window and it's gone. I'll continue using it for now.