Group items tagged

Saturday   Photoshop template included for color customization. Pre-built in light green/auburn. Dolphin   Photoshop template included for color customization. Pre-built in blue. Fox   Photoshop template included for color customization. Pre-built in red. Background color controlled in css. Slate   Photoshop template included for color customization. Pre-built in red, blue, green and purple. Wax   Photoshop template included for color customization. Pre-built in blue, orange, red, green and grey. Style #1 Photoshop template not included. Pre-built in grey/blue. Style #2 Photoshop template not included. Pre-built in grey/blue. Style #4 Photoshop template not included. Pre-built in red/grey. Top red line controlled via CSS. Style #5 Photoshop template not included. Pre-built in dark blue. Bottom pink-ish line controlled nia CSS.    

var rate87=new rateit(87, "26", "090%") rate87.displaytext("26") 4.5 CSS Gradient Shadow var rate74=new rateit(74, "72", "078%") rate74.displaytext("72") 3.9 CSS Thick Tabs var rate47=new rateit(47, "71", "080%") rate47.displaytext("71") 4 SuckerTree Vertical Menu (v1.1) var rate52=new rateit(52, "60", "074%") rate52.displaytext("60") 3.7 Overlapping horizontal tabs var rate51=new rateit(51, "128", "080%") rate51.displaytext("128") 4 Animated link underlines var rate50=new rateit(50, "78", "075%") rate50.displaytext("78") 3.8 SuckerTree Horizontal Menu <!-- <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xm

Writing CSS is very much like having sex. Not everyone does it the same way and there is no particular “right” way to do it. I guess for me the similarities actually end there, seeing as writing CSS is something I do every day whereas having sex is…anyway I digress. The W3C have set the standards but beyond this, writing CSS is down to an individual’s preferences. Here are 5 little tips and ideas I’ve adopted in the last 6 months that you can use to make your CSS more streamlined, maintainable and easy to read. Written by Jon Disclaimer: The CSS example files are exactly that. They are not meant to be fully functional CSS documents. Class names in the CSS files are named merely so that you may visualise the document in your head (because there is no accompanying html), not because I condone the naming convention in them.

1) Make a table of contents At the top of your CSS document, write out a table of contents. For example, you could outline the different areas that your CSS document is styling (header, main, footer etc). Then, use a large, obvious section break to separate the areas. Not only does this make your CSS look neater, but when it comes to making quick adjustments to certain areas of your website at a later date, finding the corresponding area in your CSS will be much easier. View Example File 1

3) Isolate single properties that you are likely to reuse a lot If you find yourself using a single property a lot, isolate it to save yourself repeating it over and over again and also enabling you to change the display of all parts of the site that use it. View Example File 3

Features:Submit websites? NoSubmit CSS Templates? YesRate websites/designs? YesComment on websites/designs? NoSite Functionality: 5/5Comments: CSSZenGarden is one of the first in it's class and showcases talent through customizing stylesheets to fit the site's design.2. StyleGala.comFeatures:Submit websites? YesSubmit CSS Templates? NoRate websites/designs? YesComment on websites/designs? YesSite Functionality: 5/5Comments: Style Gala not only showcases design but also brings resources into the mix, providing a great community for web designers./3. CSSRemix.comFeatures:Submit websites? YesSubmit CSS Templates? NoRate websites/designs? YesComment on websites/designs? YesSite Functionality: 5/5Comments: In my opinion, the best gallery showcase of CSS websites there is in terms of allowing people to interact.4. CSSReboot.comFeatures:Submit websites? YesSubmit CSS Templates? NoRate websites/designs? YesComment on websites/designs? YesSite Functionality: 5/5Comments: This site is more competitive than the others and submitting a site isn't as easy as the rest. But for what it does, it's great.5. CSSTux.comFeatures:Submit websites? YesSubmit CSS Templates? NoRate websites/designs? NoComment on websites/designs? YesSite Functionality: 4/5Comments: Design is great, showcase is simple yet elegant.6. CSSMania.comFeatures:Submit websites? YesSubmit CSS Templates? NoRate websites/designs? YesComment on websites/designs? NoSite Functionality: 4/5Comments: A site with great functionality but commenting would be nice.7. CSSImport.comFeatures:Submit websites? YesSubmit CSS Templates? NoRate websites/designs? YesComment on websites/designs? YesSite Functionality: 4/5Comments: Another great showcase of design and talent, definitely a site you should check out.8. CSSDrive.comFeatures:Submit websites? YesSubmit CSS Templates? NoRate websites/designs? YesComment on websites/designs? YesSite Functionality: 4/5Comments: Great functionality, not the best design though.9. UnmatchedStyle.comFeatures:Submit websites? YesSubmit CSS Templates? NoRate websites/designs? YesComment on websites/designs? YesSite Functionality: 4/5Comments: They don't give quite enough room for effective showcasing, but overall it works.10. CSSBloom.comFeatures:Submit websites? YesSubmit CSS Templates? NoRate websites/designs? YesComment on websites/designs? YesSite Functionality: 3/5Comments: CSSBloom is based on WordPress, looks like a blog, but works well.Notable Mentions 11. CSS-Galleries.comFeatures:

With the CSS Tab Designer, you can : Quickly design your list visually Choose from a variety of styles/colors (60+ different designs/colors supported). [ Styles Authors / Credits ] Generate strict xhtml compliant code &nbsp;

How should a CSS framework be built? There are several possible ways to go about building a framework, but the most common and arguably the most useful is to abstract your common CSS into individual stylesheets that each cover a particular part of the whole. For example, you may have a stylesheet that sets up the typography and another that handles the mass reset. The beauty of the approach is the ability to selectively include only the styles that you need. You may end up with six or seven different stylesheets in your framework, but if a particular project doesn’t need one or two of them, they don’t have to be included. The framework we created in our office has five stylesheets: reset.css—handles the mass reset. type.css—handles the typography. grid.css—handles the layout grid. widgets.css—handles widgets like tabs, drop-down menus, and “read more” buttons. base.css—includes all the other stylesheets, so that we only need to call base.css from our (X)HTML documents to use the entire framework.

A word of caution This method works quite well, but there is a valid concern to be raised: it adds to the number of HTTP connections needed to render each page. On large, high-traffic sites, adding five more HTTP connections to every page view may result in angry system administrators. Two possible solutions to this are: Include everything in a single file, rather than breaking it into modules. The problem here is that you lose the ability to include only certain parts of the framework, and you also make maintenance more difficult. Have a server-side process that dynamically flattens the individual files into a single response. I’ve not seen this done, but it could be very efficient if done well. Using my example framework above, this dynamic process could occur when base.css is requested, but not when type.css, grids.css, etc. are. This way, the individual components are still available, but the entire framework is available in a flattened version, as well.