While there are many resources for Icons, free graphic files why can't i find any that hosts CSS Sprite images so that as a web developer that saves me time from uploading, stacking and doing nonsense stuff rather than developing the website.(I am not looking for css sprite generator but one that provided css sprite images as a whole that i can readily use)
Best i could find was this one :
http://www.spritecow.com/
I picked some from jQueryUi, Yahoo YUI anymore ??
Some More Examples:
http://developer.yahoo.com/yui/button/img/buttons.png
http://static.jquery.com/ui/css/demo-docs-theme/images/222222_256x240_icons_icons.png
http://p.yusukekamiyamane.com/icons/preview/diagona.png
http://p.yusukekamiyamane.com/icons/preview/fugue.png
I am a web developer and frequent this site: http://csssprites.com/
I think it is an awesomely designed system, that automates the whole spriting task.
Interesting question.
I have never seen a CDN (content delivery network) for sprites, in the same way that there are CDNs for javascript libraries, etc.
I am guessing the reason is this: CSS spites are usually particular to a specific site. They are usually clips of various images related to a specific design. So they might not be as portable as a framework.
If you were to have several of your own sites using similar designs, you could "roll your own" sprites file and serve it from one domain to all your sites.
Related
I've been using Google PageSpeed to improve my site's performance. One of its recommendations is eliminating unused CSS in my app. Although a lot of the CSS is unused for a given page, it is used elsehwere in the app.
What's the right approach here? I'm considering creating a base CSS file for common CSS and then separate files for each individual page. Luckily there aren't that many pages. Is this overkill? And is there a better approach?
This is a Rails app, and I'm using asset_packager to minify my CSS and Javascript
Thanks!
Moe
It won't speed up your application because you will be adding new http requests, while if you pack all CSS into one file, that file will stay in the cache and you won't have to have an http-request for it for subsequent pages.
Google PageSpeed simply mean that you shouldn't provide styles you don't use anywhere in your application or only in pages that a user can't visit, for example the admin area.
As people in here mentioned, definitely not. You will just add new http requests. You should really keep in mind that pagespeed will probably always show that you have unused css on a given page, but that's not really a big issue.
Take a look at the other recommandations page speed is showing like enabling compression, optimizing the images (consider using css sprites if you aren't already) and more.
See also yahoo best practices to speed up your site.
That'll depend on the size of the file(s) and the way people use your site. If the file isn't huge to begin with and people will often go to many different pages, having page-specific css files will forfeit the benefit of caching, which is generally going to garner more benefit.
The overhead of an extra HTTP request to download yet another CSS file greatly outweighs the overhead of an extra few KB in the master CSS file.
I think it is best to componentise your stylesheets. For example, you might have a base css that provides the layout for your pages. Then you might have a theme css that provides colours, images, borders - visual elements. Then you might have separate css files for individual UI components, e.g. popup.css, calendar.css etc.
base.css
theme-blue.css
theme-blue-popup.css
theme-blue-calendar.css
This approach makes it easier to manage your styles (and switch them if you need to). More relevant to your question however, is that you now have the ability to specify what stylesheets are needed for each page on your site. Now if the user visits the homepage of your site only, and the homepage has no popups or calendars, then they haven't downloaded the styles for the components they aren't using. As they proceed further into the site, they will get the required stylesheets as and when they need them.
There is a website with a master-page, set of css-files,... menus. It is necessary to implement another one that will have same (or at least very similar) look-and-feel. And also it is necessary to have look-and-feel in sync.
I've tried to find for appropriate solution (at least idea, not implementation) in the internet but didn't find anything.
My idea is to use an additional project (class library) that will contain an implementation of the master-page and all its comnponents (menus, images, css, etc will be stored as resources), this project will be refferenced from all web-sites that need to sare look-and-feel.
Do you see any best approach or any pitfalls in my idea?
Thanks.
I would recommend a class library for your masterpage, but I would put images and css on a web server and make links to it from your sites with absolute paths.
Maintaining images, css and menus (? menu entries?) in resources seems a lot of pain to me.
Would it not be enough to simply share a common css file and the images needed? That's what css files are for.
You probably could set up version control to have every project include the same css and image files.
I've recently begun working on a very large, high traffic website. We would very much like to reduce the size and number of our style sheets, minification is one route we will pursue but is anyone aware of any tools for checking ID and class use? Literally scanning the website to see what's active and what isn't?
Alternatively any software for redacting the css to reduce repition and size?
Thanks in advance
Literally scanning the website to see
what's active and what isn't?
Dust-Me Selectors is a Firefox plugin that you can use to show what css rules aren't being used.
http://www.sitepoint.com/dustmeselectors/
I can certainly recommend Page Speed (http://code.google.com/speed/page-speed/) by Google to check the performance (and possible improvements) of your webpages.
Page Speed also checks CSS and usage of classes on your webpages.
It is used in combination with Firebug.
Gzip compression in the webserver.
Expiry dates that lie far in the future to avoid redownloading the CSS files.
Alternatively any software for
redacting the css to reduce repition
and size?
Yet another level of indirection ... You (and your team) should write long CSS files with as many comments as needed and then write a tool that will publish merged files as needed (different templates need different files), stripped comments and minified as http://www.cleancss.com could do (CSSTidy). Readability comes first if you wan't to be able to modify a file in 1 month or keep track of modifications (or worse if sb else must do that!).
Other options are to reduce the number of templates used throughout the site. No need of two templates with 2px differences (grid layouts are a good way to stick to this) or inconsistent ways of displaying error messages. Define a common look and feel to your site and give instructions to webdesigners, if it isn't already done.
I am building a new WebSite based on Grails technology.
Concerning the graphical design of my website, I plan to use services from a professional web designer but meanwhile, I need to do some basics graphical design myself in order to have a "user-friendly" beta-version.
I have read through the stackoverflow.com site but couldn't make up my mind. Here is what I have found out:
how-do-you-choose-a-css-framework
what-is-the-best-css-grid-framework
can-someone-recommend-a-bells-and-whistles-css-framework
what-is-the-best-css-framework-and-are-they-worth-the-effort
But unfortunately there are many contradictory answers.
First, some say that using CSS framework is backwards authoring and not a good thing. Others advice YUI Grids, BluePrint, 960 gs, YAML...And many say that Compass allows to develop CSS layouts easily and reusable.
So considering that:
I am new to the CSS world and I do not intend to be a web designer
My layout should be user-friendly (but not necessary awesome L&F)
It should be maintanable and easily improvable (by a professionnal web designer)
Easy to implement (in order to have something quickly)
What do you advice me for getting started with the web design of my site?
Thank you for your advices.
Fabien
First, if you don't intend to be a web designer, I'd suggest outsourcing your CSS. There are several websites where you can supply HTML or a Photoshop design and have it coded up for well under a grand (1k). Or get HTML/CSS designs free.
Then there is one thing you need to know and another two you need to work out:
all HTML should be written in a semantic and valid manner: semantic = properly ordered headings, lists, no excessive divs etc.; valid = will pass WC3 validation tests. None of this is rocket science, but is still a skill that needs to be learned. Andy Clarke's Transcending CSS is a great book on semantic HTML/CSS. For ease of maintenance, the HTML and CSS should be tidy and consistently indented, etc.
you need to determine whether you'll be needing an admin backend and database for managing content, or if you're just building a site consisting of static pages (i.e. html and css files, images and other media etc.). If it's the former, that's a whole other learning curve :-)
what are your best skills? If you're a good designer, get other people to write the HTML/CSS, or use a ready-made template (there are many on the web) and customise it. Here's a good start for multi-column layouts. If you're a programmer, learn to use a framework like Django (Python), Titanium (Perl), something smaller in Ruby (because Ruby on Rails is a bit big to start with) or one in your favourite language.
Good CSS is a craft, and simplicity is the essence, but if you want to learn enough to get started, my advice would be to:
understand inheritance (the 'cascade' in CSS) and the fact that anything can be a 'block', so don't use lots of nested divs just to apply a style. Instead, apply the style to the HTML element itself, or to the element only when it appears in a parent block (like a menu unordered list contained in a sidebar div);
learn about block and inline elements (Web Design from Scratch is a great learning resource and I'd recommend it), and that CSS can change this behaviour;
test in Firefox, then test in Internet Explorer. >= IE7's not so bad (but look out for HasLayout). What you can't tweak to get right in IE, use conditional comments to add CSS that only IE can see - never use CSS hacks - .htc files that add missing IE functionality (e.g. rollover styles on any element) are available;
learn about CSS positioning, and use 'fixed' sparingly;
put all your CSS in one file (for starters), and don't use inline CSS in the HTML;
styling forms and form fields is almost a separate skill :-)
Use background images to add style, but also understand that you can offset and overlap images using positioning. You'll need to use PNGs for nice transparency, though. Oh yes, and opacity looks nice, but requires non-standard CSS for now. although the more flexible rgba (a=alpha) method is widely-supported. As do rounded corners, but both worth using.
I'd avoid CSS frameworks and resets for now - they'll complicate things at this stage by adding yet another DSL to learn (but read the arguments and the pros and cons). To avoid annoying default margins and padding, I always reset everything by doing html *, body * {margin: 0; padding 0;} then build padding and margins back in wherever needed - never been a problem so far :-)
What do you advice me for getting started with the web design of my site?
Get Firebug plugin for Firefox now!
Primary CSS uses:
See which CSS rules apply
Change CSS in real time and see the affect
Inspect other websites to see how they do things
I would not be able to develop CSS (and other web related technologies) without this tool
Take a look at YUI CSS reset/base/font/grid
http://developer.yahoo.com/yui/3/cssreset/
And Grid 960 also has some nice layouts (search for their site in google)
I don't know what OS you are running, but if you are a Mac user, I suggest a great free tool for CSS: Xyle Scope. It's not an editor but a CSS viewer/scanner, it let you browse easily the CSS code of any web page so you can learn better how css works and you can analyze any well done layout on the web.
CSSEdit (Mac Only) is a good solution for writing Cascade sheets, easy to use, not expensive, and reach of features.
Fireworks: I think is a great software to draft your layouts and make some good graphical works!
Dreamweaver: it's an all in one solution for web developing ... it's a really great tool to easily maintain synched your remote version of the website with your local one.
Coda (Mac Only) is a very good alternative to Dreamweaver, even if it don't let you manage and edit the .htaccess files!
For coding your web site I suggest dreamweaver or Coda, but an other good alternative is BBEdit (Mac Only).
Bootstrap, Its the best css framework i can suggest, there is another one called foundation also but i prefer bootstrap more since it is popular among developers and is extendible. There are few more other frameworks, I wrote a blog about that, Here Read it too if you want http://www.andwecode.com/freebies/5-responsive-css-frameworks :)
A couple of years ago, we had a graphic designer revamp our website. His results looked great, but he unfortunately introduced a new unsupported font by the web browser.
At first I was like, "What!?!"... since most of our content is dynamic and there was no real way to pre-make all of the images. There was also the issue of multiple languages (since we knew Spanish was on the horizon).
Anyway, I decided to create some classes to auto-generate images via GDI+ and programatically cache them as needed. This solved most of our initial problems. However, now that our load has increased dramatically, there has been a drain on our UI server.
Now to the question... I am looking to replace most of the dynamic GDI+ images with a standard web browser font. I am thinking of keeping some of the rendered GDI+ images and putting them in a resx file, but plan to replace most of them with Tahoma or Arial fonts via asp:Labels.
Which have you found to be a better localized image solution?
Embedding images into the resx
Only adding the image url into the resx
Some other solution
My main concern is to limit the processing on the UI server. If that is the case, would adding the image url to the resx be a better solution compared to actually embedding the image into the resx?
You should only need to generate each image once, and then save it on the hard disk. The load on your site shouldn't increase the amount of processing you have to do. That being said, it almost sounds like you are using images for things you shouldn't be. If there are so many different images that you can't keep up with generating them, it's time to abandon your fancy images for things that shouldn't be images, and go back to straight text. If the user doesn't have the specified font installed, it should just fall back to a similar looking font. CSS has good support for this.
see my response here
This can be done manually or using some sort of automated (CMS) system.
The basic method is to cache your images in a language specific directory structure and then write an HTTP handler that effectively removes the additional directory layer. eg:
/images/
/en/
header1.gif
/es/
header1.gif
In your markup or CSS you would just reference /images/header1.gif. The http hander then uses session (if language is user specific), or config (if site specific) to choose which directory to serve the image from.
This provides a clean line bewteen code and content, and allows for client side caching. Resx is great for small strings but I much prefer a system like this for images and larger content. especially on the web where it is typically easy to switch images around.
I had the same problem a few years back and our interface team pointed us to SIFr. http://wiki.novemberborn.net/sifr/
You embed your font into a Flash movie and then use the SIFr JavaScript to dynamically convert your text into your font. Because it's client-side, there is no server-side impact.
If the user doesn't have Flash or JavaScript installed, they get the closest web-friendly font.
As an added bonus: because your content is still Text -- Google can search and index the content -- a huge SEO optimization.
Because of caching, I'd rather add only the image url into the resx. Caching is much better for static content (i-e plain files ) than for generated content.
I'd be very cautious about putting text in images at all, CSS with appropriate font-family fallback is probably the correct response on accessibility and good MVC grounds.
Where generation really is required I think Kiblee and JayArr outline good solutions