-
-
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; } | |
*/ |
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 li
s. 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.)
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:
This site offers a useful tool:
Modular Scale
From what I have learned:
% of 13
unless you're using YUI fonts/resets (more info here).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:
mhulse / bassline
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).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