CSS tips: Initializr, HTML5 Boilerplate, skype phone display, minify CSS
Blogs20132013-03-18
1. How do I prevent phone numbers looking twice as large and having a Skype highlight?
If this is occurring, it is because a user has the Skype browser extension installed. Use the following CSS to prevent Skype from formatting the numbers on your page:
span.skype_pnh_container {
display: none !important;
}
span.skype_pnh_print_container {
display: inline !important;
}
2. How can I integrate Twitter Bootstrap with HTML5 Boilerplate?
You can use Initializr to create a custom build that includes HTML5 Boilerplate with Twitter Bootstrap.
Read more about how HTML5 Boilerplate and Twitter Bootstrap complement each other.
3. Minify Your CSS
Here is a Free CSS Compressor and CSS Compression Tool: http://www.minifycss.com/css-compressor
4. CSS tips
Here are some CSS Best Practices extracted from the book āVisual QuickStart Guideā by āJason Cranford Teagueā.
- Prefer shorthand properties. use āFontā to set multiple values with a single property.
This not only cuts down on the amount of code, it also keeps similar property values together, makeing editing easier. - Use RGB for color:
RGB values are easier for mere mortals to understan and you can now set transparent colors using RGBA. - Use background images or other styles for interface chrome.
- Use CSS form simple background gradients.
- Favor margin over padding.
- Favor over @import.