Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I'm working on a little html/css framework that I can use for most of my websites, at least to have a basis to build on. Here's what I've been using so far:
CSS framework
Reset.css - I use the one by Eric Meyer, www.meyerweb.com.
Typography.css - All main typography styles for the site (from blueprintcss.org)
Forms.css - basic form styles (from blueprintcss.org)
Wireframe.css - Here I set up the wireframe for one, two and three columns plus a header and footer. I used the Holy Grail technique, and implemented it so that by setting a class of 'onecolumn', 'twocolumns' or 'threecolumns' to the container div I can switch between the three.
Basic techniques
Some techniques I have some pre-fab examples of for me to re-use in any website:
Suckerfish dropdown menus - Horizontal and vertical in various versions
Sliding Doors tabs - although I try to use CSS3 where possible
Scripting
jQuery - I try to use it as little as possible (that is, if there's css solutions at hand, like the Suckerfish dropdown menu vs. jQ menus)
Plugins
None, yet. I looked into css3pie yesterday and it looked real promising.
Yet to look into
What I haven't used so far but might be interesting is css and js minifiers. Also, currently I include the 5 css files mentioned above in the main.css with #import, maybe I should have them merge automatically before I upload?
Also there's CSS grid systems of course. I never got the hang of those, but maybe I should give it another try. I know the 960 grid is very popular, but I'm not sure if I want to use classes purely for markup (grid_4, column_5, etc.) To me it's a bit like <span class="red"> to make a text red, that's just as bad as using inline style.
Anyway, this is just a basic setup and there's plenty of problems in websites that are not yet incorporated in this framework. So, what should I really check out to improve my framework? (HTML5 and CSS3 welcome, no flash please :P)
Suggestions
I'll make a list here of suggestions made below that I'll check out.
HTML5 Boilerplate
IE 7/8/9.js
Modernizr
I highly recommend the HTML5 Boilerplate
HTML5 Boilerplate is the professional
badass's base HTML/CSS/JS template for
a fast, robust and future-proof site.
After more than two years in iterative
development, you get the best of the
best practices baked in: cross-browser
normalization, performance
optimizations, even optional features
like cross-domain ajax and flash. A
starter apache .htaccess config file
hooks you the eff up with caching
rules and preps your site to serve
HTML5 video, use #font-face, and get
your gzip zipple on.
Boilerplate is not a framework, nor
does it prescribe any philosophy of
development, it's just got some tricks
to get your project off the ground
quickly and right-footed.
The best thing you can do is use it. That's the only way you're ever really going to build a framework that does everything you're going to need. Afterall, you don't know everything it'll need until you actually need it.
Where I'm working we have our own PHP Framework and it's been a contsantly changing entity where bits get added when they are required because they weren't originally needed in the spec.
As long as you have something that works for your first project you're underway. Just try it out, add to it when you need something, and optimise where and when you can!
If you are looking into minifiers, you're probably willing to run your code through some sort of build script before testing and deploying. If that's the case, I'd suggest looking into LESS for your css: http://lesscss.org/docs
LESS is pure awesomeness.
I don't know how much client-side scripting your projects require, but if it's anything extensive you might want to look into using something like M4 or the C++ preprocessor to add support for includes, ifdefs, etc... this can help keep your code organized and allows you to maintain debug code that doesn't appear in the production build. This post sort of takes that idea to an extreme, but it might give you some ideas.
Out of curiosity, what server-side language are you using?
Drop Suckerfish.
With the growing number of touch-only devices (mobile phones, tablets), using hover-based UI elements will just piss off the users.
I can't believe I forgot (and nobody has mentioned) fontsquirrel. I've used it to embed a few fonts now and it really works like a charm.
From a performance perspective, I'd use Compass and SASS with the built in BlueprintCSS framework, it mainly takes care of all reset needs to render the same cross browser, you get to use mixins instead of inline classes for your grid. And most of all you end up with one tiny css file that loads real quick. I also use modernizr, html5boilerplate, css browser selector only with serverside php, faster rendering. If your torn between SASS and LESS, the blueprint integration with Compass+SASS is spectacular. Hope this helps!
why create one more when there are so many out there already.
I would rather suggest you to contribute to the frameworks you are referring if you feel something is wrong or missing. That way you will also help everybody who are already using it.
I agree with Alex here you should start with using it, this will make sure it has everything you want,
and let me know when it is ready for us to use ;)
The Blueprint CSS grid technique is better than the 960gs in my opinion. The thing I dislike about 960 is that the the gutters between columns are formed by two "half gutters" on the left and right of each column. It's bizarre; you wind up with half-gutters on the left and right of your layout.
There's also the CSS browser selector jQuery plugin. This uses a few simple selectors in your CSS to tell which browser to do what:
.ie .myClass
{
background-color: #f00;
}
.ff .myClass
{
background-color: #00f;
}
I use it on my website and it's a much better solution than having CSS hacks or Conditional Comments.
Related
I've recently been going over some HTML and CSS stuff to get more into web development, I have been designing sites on and off for a while now and I would love to start actually developing some.
I've seen Bootstrap mentioned so many times all over the internet and I was wondering if someone could help me out and point me in the right direction... I've been learning the fundamentals of HTML/CSS and as I understand it, Bootstrap is a html/css UI framework?
I have my own UI designs in a PSD file, how would I get them to work within Bootstrap?
Is it a matter of slicing up my images and adding custom CSS into Bootstrap?
I know that I am a long way off from this, but this is the type of stuff I want to be doing:
http://heyflat.com/themes/todo/index.html
If you can point me towards the type of stuff I should be learning in order to get there I would much appreciate it, so far I will continue with my html/css stuff but I would love to start using Bootstrap and customizing it seems essential to me for what I would like to be able to achieve...
Thank you for reading :)
Updated
Overall, my process has not changed much except for how I think about converting PSDs to HTML and CSS. I look forward to the day I discover a tool as flexible and comfortable as Photoshop that can output directly to good HTML and CSS. That day has yet to come to me. Here's the process I follow, utilizing Photoshop and Bootstrap.
I find that Photoshop is a great way to imagine, share and iterate over a visual design because it frees me to experiment in ways that are currently either impossible or too time consuming to realize just with HTML and CSS.
Once a design is agreed upon, I begin planning how the target design will be realized with HTML, CSS and JavaScript.
I consider the browsers of my target audience. For example, IE8-, does not support rounded borders. If IE8- users are a large portion of my audience and those rounded borders are critical to the design I may take the time to slice out images and add extra HTML and CSS.
I decide if I am going to use a framework like bootstrap. Browser support must also be considered when deciding on a framework. If a framework has examples like bootstrap then I can checkout those examples in various browsers. If using a framework then I commit to doing it their way. That is, I use their grid system, html and class names for everything. I only add my own when the framework cannot meet a specific need. I do augment their classes as needed using a separate stylesheet but always in appropriate, low risk ways, bootstrap encourages this. I will probably never augment the grid system except perhaps through their customizer, but I have never needed to do that.
Next I implement the design. I may find that some elements need to be sliced out of the PSD, but most, like drop shadows, rounded borders and gradients, can be rendered using CSS. Some aspects of the PSD may need to be tweaked to accommodate responsive behavior or to make implementation simpler. As has always been the case, I target standards compliant browsers first and adjust for the others later. One of the nice parts about a good framework is that there is usually very little that needs tweaked.
I review the document at various resolutions in browsers my target audience use, and consider and implement additional tradeoffs as needed. For example, if it is not critical that those rounded corners show up in IE8- then I will keep it simple, render them using CSS, and let IE8- alone. I still verify that it looks acceptable in IE8 and IE7.
Steps 4 and 5 are generally not sequential but steps I bounce back and forth on. Also, make sure your client is on board or you can get them on board with how you are supporting various (not-so-modern) browsers and your reasons for doing so (shorter load times, less development time, easier maintenance, and so on).
Bootstrap 2 examples: http://getbootstrap.com/2.3.2/getting-started.html#examples
Bootstrap 3 examples: http://getbootstrap.com/getting-started/#examples
I've been using XHTML for about 3 years now, and didn't care much about HTML5 and CSS3 arrival. Several months ago I've stumbled upon HTML5 Boilerplate and I'm starting to get very interested in it right now.
The only thing I can't find yet is drawbacks of using this set of best practices. I know, that the main goal of it to make site look the same on wide variety of browsers, but is there something I should be aware about?
Is there something I should be aware about?
Yes, definitely. It's not a plug-and-play thing. Or at least, it could be like that but it hasn't been conceived for that. And if you use it this way you can't enjoy its best. Boilerplate is very flexible and you have to learn how to customize it. Full stop.
My personal suggestion is to start experimenting with it and study the features it has to offer. Luckily for us it's well documented and you can learn a lot. Not only the boilerplate itself, but also the rules and best practices about HTML5, CSS3, resources loading and related issues/workarounds on performances, browsers quirks and how to fix them, tricks for mobile development, polyfills and conditional loading and a lot of other crazy stuffs. Once you are aware of its possibilities, if you'll find drawbacks you'll be able to customize the base boilerplate.
Start from here, read the docs, follow every link and don't be tempted to take shortcuts. It takes time, but you'll be rewarder very well. If you have troubles ask.
For something more concrete, a drawback I found very quickly (but someone consider this a plus) is that the boilerplate doesn't provide a CSS grid. Not a huge problem, I discovered that adapt.js is easily integrable, so I replaced normalize.css with adapt.js's reset stylesheet and used the grid.
Two things I noticed couple months back is the way javascript gets loaded at the bottom of the body. I'm not a big fan of this if not only it looks dirty. Also I tested the loading myself and didn't notice any better loading of javascript. In fact it ran a couple ms slower on a huge script.
Also the normalize.css I tried couple of times but found myself restyling more paddings and margins than before. Which is normal ofcourse since it's goal is somewhat similar but a different approach. I changed this to Eric Meyer's reset.css just because I'm used to it.
I really like the modernizr script and the way to implement things for x-browser results.
Google Analytics implementation for example.
Another small thing I remember was the placing of the title tag. I changed it to the top position for SEO reasons.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 6 years ago.
Improve this question
I was wondering if there are any kind of CSS libraries like a Yahoo CSS Library?
Basically I am looking for something akin to JQuery but for CSS instead of JavaScript.
There are CSS frameworks.
There's really not that much of a reason for a CSS library / framework (in one's opinion) as everything you'd be doing is specific to your application's style (Cascasing Style Sheets).
However, there is something I use alot (or the designers I work with), made by Eric Meyer called reset which is a nice tool (as it homongenizes the styles to be almost the same in all browsers), however it does force a rule upon every element on the page (which can slow stuff down sometimes). Here's the link - http://meyerweb.com/eric/tools/css/reset/
I guess you either mean CSS frameworks (I like blueprint) or something like Sass, which is supposed to make writing CSS easier.
I think Blueprint is the nearest you’ll get to a CSS library, outside of the YUI stuff.
There are also standalone grid systems that make laying out your page easier, e.g. 960.gs
Because CSS isn’t a programming language, there isn’t really much scope for abstracting out common tasks. It’s very difficult to really isolate one style from another.
What I have found useful is looking at the CSS in CSS frameworks like Blueprint, to see what they do, and how they do it. Then do a slimmed down version of that for whatever site I’m working on.
CSS is not executable code, so what do you want a library to do?
Using a CSS framework will only truly help if your mindset and needs align with those of the framework creator.
Personally, I think that something like SASS which allows you to generate whatever style of CSS you want, with nifty features such as variables for storing colors consistently, is the best thing to use for larger projects.
There are not really CSS frameworks. It's just a buzzword. A better name is "themes" or "look'n'feel".
jQuery has also several themes in its UI library and you can even roll your own.
To not reinvent the wheel, I would recommend the book Pro CSS and HTML Design Patterns.
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.
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.