{"id":753,"date":"2008-05-07T07:42:53","date_gmt":"2008-05-07T14:42:53","guid":{"rendered":"http:\/\/css-tricks.com\/?p=753"},"modified":"2008-05-07T07:42:53","modified_gmt":"2008-05-07T14:42:53","slug":"toolbox-css","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/toolbox-css\/","title":{"rendered":"Toolbox CSS"},"content":{"rendered":"

\"toolbox-css-csstricks\"<\/p>\n

Over on Tutorial Blog, I shared my “Toolbox CSS” that I like to use:<\/p>\n

What is Toolbox CSS?<\/h3>\n

Toolbox CSS is styling information that has nothing uniquely<\/em> to do with any particular website. These are a collection of common styles that can be useful on any web project. How many times have you written a class for clearing a float? Too many, is my guess. The idea with Toolbox CSS is to include a separate stylesheet for these “utility” styles.<\/p>\n

View Article on Tutorial Blog<\/a><\/p>\n

Direct Link to CSS File<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

Over on Tutorial Blog, I shared my “Toolbox CSS” that I like to use: What is Toolbox CSS? Toolbox CSS is styling information that has nothing uniquely to do with any particular website. These are a collection of common styles that can be useful on any web project. How many times have you written a […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":339074,"url":"https:\/\/css-tricks.com\/webpagetest-api\/","url_meta":{"origin":753,"position":0},"title":"WebPageTest API","date":"May 3, 2021","format":false,"excerpt":"I'm willing to bet you know WebPageTest. It is the premier tool in the toolbox of web performance people. Maybe you didn't know that WebPageTest was a side project of one fella, Patrick Meenan, for most of its lifetime, with literal racks of real devices he maintained himself. An amazing\u2026","rel":"","context":"In "Sponsored"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/04\/Screen-Shot-2021-04-21-at-10.29.33-AM.png?fit=1200%2C1187&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":346418,"url":"https:\/\/css-tricks.com\/tabs-in-html\/","url_meta":{"origin":753,"position":1},"title":"Tabs in HTML?","date":"August 16, 2021","format":false,"excerpt":"Brian Kardell shares a bit about the progress of bringing \"Tabs\" to HTML. We kinda think we know what they are, but you have to be really specific when dealing with specs and defining them. It's tricky.","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/Screen-Shot-2021-08-09-at-7.53.13-AM.png?fit=1200%2C769&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":366260,"url":"https:\/\/css-tricks.com\/useful-tools-for-visualizing-databases-on-a-budget\/","url_meta":{"origin":753,"position":2},"title":"Useful Tools for Visualizing Databases on a Budget","date":"June 13, 2022","format":false,"excerpt":"A diagram is a graphical representation of information that depicts the structure, relationship, or operation of anything. Diagrams enable your audience to visually grasp hidden information and engage with them in ways that words alone cannot. Depending on the type of project, there are numerous ways to use diagrams. For\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/06\/dbviz-featured-image.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":374302,"url":"https:\/\/css-tricks.com\/fancy-image-decorations-outlines-and-complex-animations\/","url_meta":{"origin":753,"position":3},"title":"Fancy Image Decorations: Outlines and Complex Animations","date":"October 28, 2022","format":false,"excerpt":"We\u2019ve spent the last two articles in this three-part series playing with gradients to make really neat image decorations using nothing but the element. In this third and final piece, we are going to explore more techniques using the CSS outline property. That might sound odd because we generally\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/10\/image-decorations-4.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":304927,"url":"https:\/\/css-tricks.com\/fluid-width-video\/","url_meta":{"origin":753,"position":4},"title":"Fluid Width Video","date":"March 11, 2020","format":false,"excerpt":"IN A WORLD of responsive and fluid layouts on the web, ONE MEDIA TYPE stands in the way of perfect harmony: video. There are lots of ways in which video can be displayed on your site. You might be self-hosting the video and presenting it via the HTML5