We provide a default CSS file (and the HTML mock-up) which they modify (e.g., color, background-image) to fit with their intended look and feel and feedback the CSS files to us.
Now the problem comes. We have a dozen of partners. If we need add new selectors in default CSS, we also need to add default CSS selectors to all partners CSS files first. We then send the new CSS files to partners to modify. It's a maintenance nightmare for our web designers.
Is there any CSS generator solution that we can just modify the CSS template and then populate the changes to all CSS files?
Thank you for any suggestion.
The main CSS generators/preprocessors are LESS and Sass. More reading: https://stackoverflow.com/questions/8411066/less-vs-sass-vs
I didn't quite understand what you are trying to do, but I will share some CSS generators that I use regularly:
If you want to generate CSS automatically from the markup online for free, then you need this:
http://beecss.theextremewebdesigns.com/
If you already have (messy) CSS & you would like to clean/minify it online for free, then you need this:
http://beecss.theextremewebdesigns.com/css_clean_css_minify/
As #Wesley mentioned, if you can post more examples/specifications, perhaps then I can help more.
There are no CSS generator as you like. But we can get css generator (on internet) from the scratch for a image mockup.
You can try this, newly founded on the web:
http://www.css3generator.net
You can adjust different parameters, and compare differentes, and it provides the css codes.
Great when you forgot how to write some pieces of code and syntaxes.
Related
From what I've seen CSS variables aren't compatible with a lot of email providers. Is there anything similar I could use?
I know there are frameworks like Tailwind that might be a solution but I would like to use pure CSS. Just want to find a way to easily change an image for example in several places.
What I want to accomplish is building a sort of template where I would use the same code just with a different main image for example, so instead of going into the code it would simply be on top of the file and I would change it there (for simplifying purposes)
You can use CSS preprocessors, or frameworks for building emails like MJML or Foundation.
Do you know a source for pure CSS Templates? After setting up a simple Web Project I always wish to have a CSS file to:
Set reasonable font settings for paragraphs and headers
Polish my anchor tags
Style my forms (if I have to touch the HTML for this one - no problem)
Style my tables (I use headers and footers etc) using even & odd
Maybe give me some handy classes for error boxes, etc.
So if I Google for a such CSS file I find CSS Homepage Templates with HTML Structure and massive CSS which I can't use without changing much. I find CSS examples for perfect tables, other examples for perfect forms but what I don't find is a single CSS File which when loaded in a properly formatted HTML website will make it look "okay" instead of the pure HTML look.
Do you get me?
Does anybody have a hint for me?
Twitter Bootstrap might interested you but I believe it has a bit of javascript in it as well.
Edit: As mentioned in comment you can use many of the Bootstrap features without using any javascript.
I've personally used bootstrap and I love it. I've also bookmarked few others to play with when bandwidth permits.
Bootstrap
Blueprint
960 Grid
Update: On related matter, I would also checkout CSS Preprocessors such as Sass and LESS that could help in writing better CSS and build up a custom library to use across projects.
Perhaps try the CSS off of Twitter Bootstrap. Provides all sorts of consistent styling that's simple but elegant, in addition to some fancier element behaviors.
Update:
Adding to Yonix's related list, the following are alternative CSS preprocessors, which makes working with CSS a little more digestible:
Compass
Stylus
There's a bit of a learning curve when teaching yourself CSS, but some basic CSS is easier than you think.
For quick prototyping/wireframing and pre-made HTML templates, I use Zurb Foundation, as compared to Twitter Bootstrap. My advice is to familiarize yourself with their online documentation and delve into the main CSS file (foundation.css). You can build on top of that CSS file with the provided app.css file.
It comes with a lot of pre-made styles (buttons, forms, etc) and everything is responsive (fits on any size screen). You can choose to include all the plugins, or just the HTML and CSS. It also has an option to download the HTML templates, which come with a variety a layouts, such as a blog or a basic structure. I absolutely love it!
html5boilerplate is excellent, and I plan to use it. It basically reset browser styling, and provides some tools for optimizing page performance. Is there a styling/themes for html elements to jump start the development. similar to the themes listed at http://html5boilerplate.com/docs/#Home★html5-boilerplate-themes , but framework agnostic. In short, I am looking for styling for html elements (as a base for customization) to include in style.css file, right after the comment line that begins with 'Primary Styles'.
Thanks,
Bsr
You are basically looking for a stylesheet that magically gives a good style to a page without having to do anything? I doubt that exists, since the CSS is built on top of the HTML, and that would require knowing your HTML. There are probably examples of different layouts around the interwebs, but I don't think you are going to find anything similar to a "theme".
I have a project with 1 css file and a lot of templates (.tpl), so I know that in my css file there are a lot of classes which I don't use . How can I find these classes?
Is there an editor, plugin or other way, without searching each class in the whole project?
There is another add-on from sitepoint that finds unused selectors
http://www.sitepoint.com/dustmeselectors/
What you're looking for is a kind of code coverage tool for CSS, like:
https://addons.mozilla.org/en-US/firefox/addon/10704
http://css-discuss.incutio.com/?page=CssEditors
http://www.jetbrains.com/idea/features/html_css_editor.html
Long Method
This method uses a feature that I know is available in Eclipse, the multi-language IDE. Take each class and search for eat in the project. If there is only one match (the css file, you can safely remove the class) else keep the class in the css file.
Try CSS Brush, a chrome plugin for creating CSS live. many features like select from page, use complete CSS path or filter to shorten the selector. Context-sensitive-menu and many more features.
The Separation of Layout and Content is the domain of CSS and HTML - so far well understood. Now about separating...
I'm looking for hints and Best Practices to get started with the task of providing a "skin" or "theme" for a content management system.
Background:
We are starting to embrace a Portal Server/Content Management System and are starting to change the look and feel to match our needs.
Our designer has so far mainly worked with full control over HTML and CSS, tweaking either one in order to get pixelperfect layout. With adoption of the cms there's a lot precreated HTML (very semantic, almost no tables :) that needs to be skinned with CSS and Images. Though it is possible to change the HTML fragments, I'd prefer to do so only as a last resort.
As this provides the challenge of "how to get started" my question is about any tipps how to proceed or articles that can help managing or organizing this task - e.g. best practices in designing, how to slice this task or what tool to use.
It seems bad practice to just save a dynamically generated page to disk and make changes locally. This would be somewhat ok for the CSS files but changes to HTML elements must be retrofitted to the fragments that they are generated from. I'd like to keep this out of the designer's realm if possible. Also, the thought of Dreamweaver (or any similar tool) making implicit tweaks to the HTML structure is frightening for me.
For the curious: The mentioned CMS/Portalserver is Liferay, but the question is really language- and tool-agnostic.
Edit: FireBug (as Josh suggested) is awesome for trying on-the-fly changes to css. Is there more - either in the area of tools or in-process and self-organization?
If you're looking for practical examples of separating style and content, then I'd suggestion the CSS Zen Garden. Trawling through the HTML and CSS is inspirational and enlightening and should help with what you're trying to do.
My #1 tip would be be to make everything as semantic as possible and use lots of classes and ids to hook your styles onto.
Usually, Whenever I am in a situation Like this, I bring up the page in FireFox, inspect the different elements using FireBug and see exactly what css is applied to them. THen I'l just modify the existing css until I get what I like. You can even play around in firebug and modify the CSS without "saving" those changes.
Have look at CSS Tidy, we normally use this to clean up the CSS and reorganise for development and production. However, I personally prefer writing HTML/CSS by hand before using this. It is just a matter of individual preference I guess.