This is more of a general best practice question rather than a very focused one.
I'm a big fan of the font shorthand as it solves most of the line-height headaches I had when I was using just font-family, font-size etc etc and it really cuts down on the total number of the CSS declarations while providing full control on the typography.
The problem is, as font-sizes change throught a page, so do the line-heights, so I'm finding myself redefining font several times, like so:
.lastUnit h2 {font:normal 23px/23px Calibri,Tahoma,sans-serif;color:#a51d21;padding: 21px 0 15px 70px;}
.lastUnit a:link, .lastUnit a:visited {color:#a57129;font:normal 16px/16px Calibri,Tahoma,sans-serif;}
h1 {font: normal 26px/26px Calibri,Tahoma,sans-serif;border-bottom:2px dotted #bababa;color:#204fe7;padding-bottom: 8px;margin-bottom: 8px;}
h2 {font: normal 22px/22px Calibri,Tahoma,sans-serif;color: #a41d21;margin-bottom:12px;padding-bottom: 12px;}
.internal h2 {border-bottom: 2px dotted #62c6c7;}h2.section {font:normal 20px/16px Calibri,Tahoma,sans-serif;color:#1d7373;border:0;margin: 0 0 15px 0;padding-bottom:12px;border-bottom:2px dotted #62c7c8;clear:both;height:18px;text-transform:uppercase;}
ul,ol,p {font:normal 16px/24px Calibri,Tahoma,serif;}
h3 {font: normal 18px/18px Calibri,Tahoma,sans-serif;color:#204fe7;margin:6px 0;}
I have a strong feeling this code is not optimized... I'm thinking to declare the font-family on my body (or on an id very high in the markup) so I don't have to repeat it each time, but then I'll have to use font-family, line-height and some times font-weight.. Which makes for pretty much the same amount of CSS.
Any ideas or tips to optimise this procedure? Maybe additional classes in the markup?
ps: for Stackoverflow admins: That would be a question for "coding style" tag but it's not allowed to use it..
I would try to write CSS as if I were designing a database or defining OO-classes. I would:
try to eliminate redundancy in the CSS
define generic CSS rules first and then the specific cases
avoid shorthands if necessary
Here is an example:
h1, h2, h3 {
font: normal large/1em Calibri,Tahoma,sans-serif;
}
h1 {
font-size: 26px;
}
h2 {
font-size: 22px;
}
h3 {
font-size: 18px;
}
Start from this:
body { font-family: Calibri, sans-serif; }
* { line-height: 1.3; }
Then define h1, h2 etc. sizes in percentages. Then set colors, and so on. To tune spacing between blocks (e.g. between a heading and a paragraph, or between items of a list), it is almost always better to use vertical margins rather than line height.
There is no need to create a mixed salad of font settings, and the font shorthand tends to confuse rather than help.
Calibri is a nice little font, unfortunately with no suitable fallback on systems that lack it—but virtually any sans-serif font is a better fallback than Tahoma, which is completely different from Calibri in almost every way (except being sans-serif).
if all share the same font-family, why not declare it in one place at the top, and then define the "fine details". In other words, the best practice is to set the common/general rules and then redefine the ones you need.
example:
/* define the font family/general characteristics */
h1, h2, h3 {
font:normal 23px/23px Calibri,Tahoma,sans-serif;
}
/* define the details for the ones you would like */
h1 {
font-size:26px;
line-height:26px;
border-bottom:2px dotted #bababa;
color:#204fe7;
padding-bottom: 8px;
margin-bottom: 8px;
}
I believe the best way to shorten this down would be to specify one tag that sets the font family. A bit like this
body {
font-family:Calibri,Tahoma,sans-serif;
}
Then you can fine tune each element further down your css styles.
Also just to mention. CSS doesn't cause that much of an issue when loading the page. I would focus more on optimizing images and any server side code.
Related
In SMACSS where should I be defining colours?
I have defined my base font in the base\base.css for the general content, but my footer requires a different coloured font.
Should I be declaring this in my layout/footer.css so it can cascade down to the components, like so:
.l-footer {
background: #333333;
margin: auto;
color: #FFFFFF; /* Here ? */
}
or, at the module level of the actual component which resides inside the footer in modules/testimonial.css.
.testimonial {
color: #FFFFFF; /* Or here ? */
}
Is there any documentation or links that discuss this?
Thanks so much.
If i were you i would use THEME for such tasks. You define BASE, colors, background and so on, then attach THEME classes (theme.css):
.l-footer {
color: #FFFFFF;
}
More info about THEME rules type
Theme Rules - are things like your page background, typography, colors, etc. This is another area I often pass on, except for when I need to override theme elements for different pages. An example of this would be maybe a content-type that has a different style in order to set it apart from the rest of the site. So if your page has a white background - body {background: #fff;} but on blog pages it should be gray, I’d use a theme rule to overwrite my base rule - .node-type-blog {background: #ccc;}
See more at: https://dev.acquia.com/blog/organize-your-styles-introduction-smacss
First off, I admit that my knowledge of HTML and CSS is very limited. I'm surprised I was able to create a website in the first place.
In working on my SEO, I come to realize that I need a printer friendly version of my website. I have been able to hide the elements I don't want printed (pictures, facebook/pinterest/blog buttons, etc.), but I can't get passed two things.
I want my logo/header to be much smaller on the printable sheet.
I can't get rid of the space on the left hand side that my navigation (sidebar) occupies. Apparently it's not enough to simply hide it?
My website is www.minnesotamarryingman.com and if you print it out, you can see the larger-than-need-be header and the large left sided column.
Here is what I have for my print.css...
#header {width:128; height:29;}
#body {margin:0; padding:0; float: none; line-height: 1.4em; word-spacing:1px; letter-spacing:0.2px; font: 16px Arial, Helvetica,"Lucida Grande", serif; color: #000;}
div#sidebar{display: none}
div#pinterest{display: none}
div#pinterest1{display: none}
div#facebook{display: none}
div#blog{display: none}
div#picture1{display: none}
div#picture2{display: none}
div#list{display: none}
Can someone please help me see where I'm going wrong?
It actually looks pretty decent on my MacBook Pro in Chrome and on Safari, so I'm guessing you figured out the Navbar issue on the left. To make the logo smaller I'd just include an id tag in the logo image and then set that in your print.css instead of just setting a new height and width for the header. Also, it's important to say the units in the size, so use 'px' after the number as shown below!
In your file:
<img src="....." id="logo">
And in your print-css:
#logo { width:128px; height:29px; }
I am new to using syntaxhighlighter. I am using there latest version 3.0.83. Can some one help how to customize the color of comments, header, etc ?
I am using < pre class="brush: c"> for coding style.
The easiest solution would be to override the CSS rules for comments, but they're marked as !important so you have to do a little extra work.
Open your shBrushCpp.js file. Down towards the bottom there's a set of regular expression rules paired with a css property. Those values correspond to class names in shThemeDefault.css (or whatever theme you're using).
Copy your theme file to something like shThemeCustom.css or whatever you want. Include this file on your page instead of the original theme. From here, you can change whatever you want. Just reference the CSS rules from the brush file against your custom theme to know what needs to be changed.
In case you don't have full control over the .css or .js files, as is my case (since I followed these instructions here and am using Alex Gorbatchev's hosted files instead), there is still a way to override the !important parameter.
You can customize any of the settings shown here (http://agorbatchev.typepad.com/pub/sh/3_0_83/styles/shThemeDefault.css), for example, as follows:
With the default theme, this HTML...
<pre class="brush:cpp" title="test code">
int myFunc()
{
//do something
return 1;
}
</pre>
...yields this result:
Looking here (http://agorbatchev.typepad.com/pub/sh/3_0_83/styles/shThemeDefault.css), I can see the parameters I am currently using. For example, it contains:
.syntaxhighlighter {
background-color: white !important;
}
.syntaxhighlighter .line.alt1 {
background-color: white !important;
}
.syntaxhighlighter .line.alt2 {
background-color: white !important;
}
...
.syntaxhighlighter .comments, .syntaxhighlighter .comments a {
color: #008200 !important;
}
In order from top to bottom, as shown just above, my header background color is white and my alternating code lines 1 and 2 are both white. Comments are green (#008200). Let's change all of that. Add the following code to your blogger template, at the very end of your header, just above </head>:
<style type='text/css'>
.syntaxhighlighter {
max-height: 550px;
background-color: #ff0000 !important;
overflow-y: auto !important;
overflow-x: auto !important;
}
.syntaxhighlighter .line.alt1 {
background-color: #99ff99 !important;
}
.syntaxhighlighter .line.alt2 {
background-color: #99ff99 !important;
}
.syntaxhighlighter .comments, .syntaxhighlighter .comments a {
color: #000082 !important;
font-weight: bold !important;
}
</style>
Now, I have set my max-heightto 550 pixels (make a really long code block and you'll see it constrained to this height now, with a vertical slider to see it all), my header background color is red (#ff0000), my code background color (both alternating lines) is light green (#99ff99), and my comments are blue (#000082) and bold. Follow this format to customize anything you see in your .css theme file--example, for me, here: http://agorbatchev.typepad.com/pub/sh/3_0_83/styles/shThemeDefault.css.
Here is my final result--very different from the default look above:
Note that the font-weight parameter I set is simply a CSS styling you can apply. Many other options exist. See here: http://www.w3schools.com/cssref/pr_font_weight.asp.
I'm using the 62.5% font-size trick, and while it works on some bits of text, it doesn't work for others.
Any ideas?
body {
font: 62.5% HelveticaNeue, Arial, Verdana, sans-serif;
}
For example, this isn't 16px: http://jsfiddle.net/vfGJa/6/
On the jsfiddle link, the problem is that em is like a relative value, so that element is recieving first the size 62.5%, than is increased to 1.4em, and than increased again to 1.6em but based on previous 1.4em value. Remove that 1.4em and you'll see that you get the size you're looking for.
Sorry my bad english.
Some elements don't inherit font properties. Use a Css Reset file and this will work fine.
I have not had any luck changing the line height for sIFR. I have tried changing the sIFR css and config file as well as my general style sheet. Is there a special trick?
GENERAL CSS
h1 {
font-family: Georgia, Times, serif;
font-size: 24px;
font-style: normal;
line-height: 16px; (has had zero impact, even when I go negative)
color: #000000;
text-transform: uppercase;
margin: 0;
padding: 0;
outline: none;
}
CONFIG FILE
sIFR.replace(minionpro, {
selector: 'h1', wmode: 'transparent',
css: '.sIFR-root { color:#000000; text-transform: uppercase; }'
});
Flash uses leading instead of line-height, so simply just use:
sIFR.replace(minionpro, {
selector: 'h1', wmode: 'transparent',
css: '.sIFR-root { color:#000000; text-transform: uppercase; leading: 1.5; }'
});
The leading value must just be a number on its own with no measurement value such as px, em, %, etc.
At first I thought it wasn't working, but I realized that the units for leading are totally different from em. I tried a larger value "leading: -10;" and it worked fine. I'm using sIFR 3 r436.
I'm going to take a wild guess and say that because your font-size > line-height (24px > 16px) sIFR is going to ignore the line-height property and use the font-size to create your flash.
If you're trying to get two lines of overlapping text (24px text on a 16px line will result in 8px of overlap), you're probably stretching the capabilities of sIFR.
EDIT
It looks like sIFR has some strange methods for calculating font size based on different factors...check out the link for the details (without knowing your version of sIFR, I can't comment on your situation).
Novemberborn: Font Sizing with sIFR
Line height inside the Flash movie is controlled using the (custom) leading CSS property for the .sIFR-root class. Flash doesn't have the concept of line-height as you might be familiar with from CSS.