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.
Related
As a front-end designer converting designs (PSD, Sketch, AdobeXD, ..etc) to dynamic HTML pages manual. I'm using bootstrap framework with jQuery library.
When I started this job it took long time to convert the designs to html, after that the time decreased because the work becomes classic and it is routine. But every design is different and I start from the scratch using bootstrap component then adding my override CSS and JS.
I wondering if there is tools or ideas to improve my work and do things faster??
What I know is that I can create my own JS or CSS codes that I use
usually (common things). Then, I can include these files all projects
that I'm working on.
I need other tools and ideas to use.
There are different front end starter tools (boilerplate) which you may use as a basis and write you code on top of them each time.
Also consider remove bootstrap if you need everytime to override it, as you said.
It is better to have less dependencies for sure.
Also try to write your html/css as like you create page full of components, which are independent. Use CSS BEM methodology and try to make components as reausable as you can.
In that into mind you may create something like your own library / framework of most used common components between projects and just to include them everytime.
You may provide simple customization via CSS native variables or LESS/SASS ones with help of mixins.
I really like the getting started guide by Bootstrap (http://getbootstrap.com/css/), and I want to do something similar in my project. I've looked at highlight.js but it seems the color is a bit off to me. I don't know how to implement the copy to clipboard feature. Is this something I should be able to come up with on my own? I prefer third party solutions since this isn't the main crux of my project, but I thought this will be nice to my users.
I'd suggest giving highlight.js another look. There are multiple style themes you can choose from if you find the color to be off on a particular one. Or, you can do a little css to customize the colors yourself.
An alternative for syntax highlighting is prism.js.
For the copy to clipboard piece, take a look at ZeroClipboard.
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.
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!
I'm about to begin working on a web page with a complex table-based layout (coded years ago).
One of the things I'd like to do is convert the layout to a proper CSS layout with divs and spans.
Can you suggest a good approach for tackling problems like this? Should I use a CSS framework like Blueprint? Just get in there and hack on it until it looks right? I already make heavy use of Firebug and the IE Developer Toolbar.
There generally isn't a silver bullet in converting between table and CSS. Every site is different and has different requirements. The only real answer is: simply start the markup from scratch.
The best advice is to write the markup entirely first. Make sure the markup is accurate, semantic, and represents your data entirely. Do not write the stylesheet... yet. After the markup is done, create the CSS. This way you have semantic markup and CSS is purely controlling the presentation.
CSS frameworks often don't advocate this approach to semantic markup because they force you to add additional tags to comply with their approach. Consequently, CSS frameworks are sometimes more trouble than its worth.
Do the markup, then the CSS.
Before you start, ensure you are using a CSS reset. Eric Meyer and Yahoo YUI are both excellent. This will help to make all your browsers look the same.
Also, install the HTML validator too. This will ensure your HTML is looking good and ready for adding the CSS.
Then grab a copy of Firebug and install it in firefox. This is excellent for seeing which CSS rules are doing what. You can disable individual rules by clicking s cross by each rule.
Now, visit some web pages which validate correctly and see what rules they have used in their style sheets.
Web sites to try are www.alistapart.com, CSS Zen Garden, SimpleBits etc.
The converting process will be a painful headache! I suggest you to start a whole redesign.
I don't know is this can be of any help, I build CSS Framework called Emastic (supports fluid and fixed columns) and you can simulate tables if you want here is the example Emastic Table
I second the commenters who say you should re-design the whole thing from scratch. Clean up the HTML and then make the CSS.
I'd like to add a reason to do so. Usually table-based designs are at least a few years old and therefore look quite passe. Take advantage of this opportunity to improve the design. Either a slight refresh or a complete overhaul depending on your taste and needs.
Iterative way works as well. Start with small blocks, converting them to CSS. This should simplify your table structure, hopefully leaving only the "basic grid" in tables and all the rest in CSS.
From there, pick an existing, tested solution if it's a simple layout (for 1 to 3 columns, there are tons of tested solutions out there). If it's more complex, go with Blueprint.
I wouldn't use a framework. Learning a new framework is only useful if you use it over & over again. Each framework has its own bugs and weaknesses. Use
display: table-cell;
to make a column. These will line up like float: left;. See http://quirksmode.org/css/css2/display.html
In some cases, using regular expressions could speed up your process.
For instance, something like this:
<table.*>\R*.*<tr>\R*.*<td[^>]*?>(.*)</td>
would match the start of a table and provide the contents of the first cell in $1 for a replace:
<div class="container">\n\t<div class="row">\n\t\t<div class="span6">$1</div>
Of course you'd need to customize to match your particular use case. If you have a number of similar pages, you might try hand coding one first and then using something like this to make converting the others simpler.
Another approach would be to use something like this jQuery plugin: https://github.com/ryandoom/jquery-plugin-table-to-div
It is intended to modify following rendering, but could be used during development to take a given table and provide a simple DIV based form of it.