Related
I have something on my mind for quite a while but couldn't find an answer to it. Consider the following:
You like to build a fancy website with React and have to decide which front-end framework you should use. In my example I have chosen Material-UI.
Now you came to a point where you need more features like a responsive grid system, show/hide styles etc. Instead of implementing them on your own (or copying it from bootstrap/foundation, for example) you think: 'Hey, why wouldn't I include another framework beside Material-UI'.
Now comes the question. I know that most of the css frameworks available have their own normalisation css and basic styles for typography and other elements.
Can I safely include another (more featured) css framework beside Material-UI without breaking fundamental things or should I avoid that?
Furthermore, what is a good practice approach to extend the css features without copying parts from other frameworks and without reinventing the wheel all the time. Did you ever had a case or project where you had to combine multiple front-end frameworks and how did you solve this problem?
Thanks for your feedback.
Cheers
Gregor
FYI, there's a Material Design version of Foundation, you can check it out at http://eucalyptuss.github.io/material-foundation/
Now, talking about your doubts... one should be very careful when mixing and/or using more than one framework at the same time... one issue can be conflict, other can be unnecessary bloating which could make load time heavier.
However, if you are aware of that, most of modern frameworks (as Foundation) can be compiled partially, so you will be loading only the stuff you'll use, minimizing all possible issues.
Have been thinking this exactly thing lately.. I would choose one that has most of the features i need in my project. I usually go just with Bootstrap (sass version) and use only the styling part of that (css grids mostly).
Mixing frameworks will eventually be hard to maintain and you have to include lot of extra (unused) features into your application. When using some "cool", full featured components like Material-UI has, there will still be times when some component doesn't have just the property you would need.
So my opinion is:
Use some framework for styling only. This way you have uniform look in your site. Or even just some responsive grid library could be enough.
Usually basic html components are enough to fill basic needs, you can just build your own custom components for special needs (or use some from npm library). This way you have just the features you need.
This way my site is not depending just some single framework. I can change the styling part anytime, i can change one component to another etc. without having to re-write my whole application just because it's been developed entirely with some "full featured" framework.
So in class, we've been applying css frameworks like Bootstrap, Foundation, Normalize.css but I do not understand what the point is of using them. Can someone briefly explain WHY they are used? How am I supposed to know which framework to use? For example, let's say I made a basic HTML file for my blog and I want to style it. Would I need to use a framework? How would I know which to use? How is it different from just styling on my own from scratch? I know these seem like stupid, ridiculous questions but I just started learning CSS a month ago and do not understand what frameworks like Bootstrap, Foundation, Normalize, etc. are and the purpose of them. Someone please explain as if how they would explain to a little child so I understand? Thanks.
A bit of an opinion-based question, but in short: developers are lazy and it takes time to code sites that are mobile-ready, consistent across browsers, and are easy to manage as browsers get updated.
With frameworks, developers need not waste time figuring any of this out.
For example, with Bootstrap, using the grid system, it is possible to make mobile-ready sites with minimal media queries and complex CSS rules.
Using other people's code, which has been tested on production environments and is constantly being patched and updated, saves a lot of time and a lot of bugs down the road.
You can think of frameworks (in any language, not just CSS) as a bunch of existing reusable codes you can readily use for your own projects. They essentially make your life easier because you don't have to reinvent the wheel anymore. Simply put, frameworks are a bunch of tested reusable codes for common tasks.
The purpose is to avoid having to make your CSS from scratch. There are a LOT of CSS activities that most people do over and over. If you look at a wide variety of sites, you'll notice similarities in the way information is presented. As a result, if you're going to be presenting information using one of those standard layouts, it's vastly easier to simply use a CSS framework than roll your own version.
Also, different browsers have different default CSS settings. Using a CSS framework will provide a CSS reset as part of what they do. This helps ensure that what you see in one browser is what will be seen in all browsers. This helps you spend more time building your site and less time trying to figure out why the display is different in a particular version of IE, for example.
frameworks comes with lots of features like grid, components, typography along with good browser compatibility so you can simple use them instead of creating them from scratch. It totally based on project requirement that what framework you should use. Apart from bootstrap and Foundation there are more great out there created by few geeks.
I recently got two similar jobs of porting a responsive website from one framework to another ie Zurb Foundation to Bootstap and Gumby Framework to Zurb/Bootstrap. Do I have to personally go through the various nitty gritties, functions and all or is there any other way. Also aren't these three frameworks connected, functions and all similar. (I've heard that Gumby's basically a fork of Zurb Foundation) How much work do you think i'll have to do, I'am relatively new to responsive design and this isn't one of my highest paying projects! :D
Just replace the CSS/JS files and then do a find/replace in all of your HTML files to swap in the correct classes. For instance, if you were going from Bootstrap to Foundation you would have to change all instances of col-sm-12 to small-12 columns.
It's a lot of work, and it can be overwhelming. I'd rather avoid it, but then again, I have also been in situations where you really can't — for instance when merging two code bases. The problem is that if you just start a project, you might not really care that much. But then by the time you start to care, it's already too late: all your HTML has bene structured according to the standards dictated by the CSS framework you started with.
I also addressed this problem here. In that answer, I mentioned experimenting with Pug mixins to produce my HTML, introducing a lever of indirection allowing me to change the way my HTML is getting generated if I choose to switch CSS frameworks in the future. That might not help in your specific situation, where you need to fix things after the fact, but it might be helpful to know about it anyhow.
I have to present a prototype of an web app in the following days to one of my clients, the thing is I'm not so good at CSS and worst of all I'm almost never happy with the results I get.
Coding the business logic poses no challenge to me, the UI design however takes more than 80% of my time. I don't need nothing breathtaking, just a clean, nice and presentable environment, an example:
This is a recurring problem I've been having, I wish web UI development could have a less naked default style, an approach similar to Visual Studio or iPhone SDK would be very useful to me.
The above mockup created with Balsamiq Mockups is a great example, all the most common "components" are available to use, and best of all: there is only one good-looking style to choose from.
Is there something like this for the web? A neutral yet nice CSS or Javascript UI framework?
Options so far:
Bootstrap
Qooxdoo
jQuery UI
jQuery Tools
MochaUI
Ext JS
Yahoo! User Interface Library
BlueTrip
BluePrint
Uki (Demo)
Napkee
YAML
Baseline
iPlotz
Sproutcore
ForeUI
I'm interested in knowing if there are any CSS-only UI frameworks.
I found this page with a very nice list of Web UI Libraries, but most of them (at least the good ones) seem to be specific to Java, are there any equally good alternatives in pure CSS or JS?
PS: I'm not interested in AJAX, effects, behaviors and so on... my main (only) concern is style.
Thanks for all the suggestions everyone!
After a very careful consideration of all the UI libraries suggested, I've come to the conclusion that ExtJS and Qooxdoo are the ones that most closely fit my needs. jQuery UI seems promising but only offers a reduced amount of elements.
As far as CSS-only libraries go I've found BlueTrip / BluePrint and the themes suggested by tambler to be the best. Aside from that, Flex and Napkee also seem to be worth exploring.
Time to learn ExtJS now! =)
A combination of 960gs for layout and jQuery-UI for styling is probably what you are after.
You could also consider the blueprint CSS framework instead of 960gs.
I can't believe nobody has mentioned:
http://www.extjs.com/
Its a commercial js frameworks, but pretty affordable, and makes putting together a nice UI a breeze. There's a much more complete set of elements then jqueryui, and its designed to make an entire app. I've only played with it a little, but I really love it so far. Free for personal use.
If you really want to get a feel for a complete UI developed with EXT, try this url:
http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/feed-viewer/feed-viewer.html
What about using dojo and dijit?
Dijit is a fast way to create widgets and elements. It also comes with 3 default themes which are easy to modify.
A good list of different widgets here
Pair up with someone who specializes in UI design.
If you are better at dealing with business logic, your time is better off spent exclusively coding business logic so you can master it. This will require you to learn how to interface with someone else who excels at presentation. (xml and json are common means)
Business logic and presentation are very different. Designing a system that not only looks good, but is intuitive and easy to use is quite difficult. Equally as difficult and time-consuming as establishing the inner workings of a complex application.
A good interface is not as simple as including a css framework.
I consider myself to be a more 'creative' programmer who does excel in presentation. I happened to be lucky enough to cross path's with someone who was, first of all... very motivated, and second of all very good at 'business logic'. He had a lot more experience planning and implementing complex systems, while I mainly have been focusing on interface design.
If you are more productive doing system architecture, planning, developing, whatever... you should push yourself in that direction. While solo development projects can be rather fulfilling, I view it as inefficient. It is very rare that someone possess skills to develop top-level applications solo.
The challenge is finding someone who you work well with.
Check out Google Web Toolkit. It has a pretty clean default look. They have examples . In particular, their Showcase example demonstrates all of the available widgets and the css styling used to achieve the look.
There are a few frameworks aimed at (G)UI Design; Qooxdoo, JQuery UI and MochaUI being a few of them (although the last is more a proof-of-concept than a usable framework). These frameworks usually offer a variety of JS-powered elements (form elements, such as input fields and submit buttons, but other elements like tabs as well). However, it will still be up to you to position these elements, and perhaps style them, to your liking.
Perhaps familiarizing yourself with a CSS framework (such as 960GS) might complement the above JS UI Frameworks.
(As a personal disclaimer; I have very little experience with any of the frameworks mentioned above. But I'm sure either Google or SO can provide answers I can't.)
This won't help you out for your current project, but it's worth considering for future projects. After spending many years creating GUI applications in HTML 4 and constantly wrestling against the limitations of CSS and HTML, I thought I'd try out Adobe Flex. What an improvement!
Rather than faking a tabbed page control or data grid, with Flex or Silverlight, your markup can simply specify a tabbed page control or data grid. And the frameworks come with default styles that are boring but not at all bad. I'm not saying these completely replace HTML, but if you need widgets and GUI layout, I believe they're a much better alternative.
You might consider browsing the following site:
http://themeforest.net/category/site-templates/admin-skins
There are several "Administrative" themes available for purchase here that may suit your needs.
wireframe mockups like that are a brilliant way to start.
Having used most of the UI framewroks discussed here, I'd liek to steer you towards jQueryUi for the following reasons:
jQueryUI CSS framework takes care of the consistent and cool looking CSS for you (it's really easy - just make some markup and apply the classes)
jQueryUI has tabcontrol, and heaps on neat quick easy ways to style forms.
If you are targeting modern, non IE, browsers, then you should check out Sproutcore. For mockups I use mockingbird.
A relatively new PHP framework specifically designed for development of UI-focused software. Elements you have here including Tabs, Filters and Grids are included and will take you about 20 lines of code to implement.
http://agiletoolkit.org/
Have you tried Axure? It's a tool for rapidly creating wireframes, prototypes and specifications for applications and web sites.
It works in a similar way to Balsamiq, but it allows you to export your wireframes/prototype as HTML, CSS and Javascript.
You can then upload this to a server or run it on your computer as a working example.
You can create forms, links, tabs, rollovers, Javascript effects.
If you are already using Balsamic Mockups for your prototypes then you should consider Napkee. To quote the website "Napkee lets you to export Balsamiq Mockups to HTML/CSS/JS and Adobe Flex 3 at a click of a button."
I ran into this awhile ago, and couldn't find anything, so I took it as an opportunity to learn css. But since then it seems great strides have been made towards this subject.
Summarizing your problem, there is a wikipedia page.
There is yaml-css, which takes yaml and turns it into css
There is baseline, but it assumes some css knowledge.
I'd also suggest looking at Adobe's Dreamweaver. They have a lot of css and style generation tools which produce very readable and w3c compatible code.
I hope that helps.
A combination of 960gs for layout and jQuery-UI or Jquery tools is great
i use them almost in every project but i'd like to add to http://easyframework.com/
although its not a business friendly so
make sure to check out its license
but i like it
I recently discovered a nice website called iplotz.com where you can create a mockup of your application/website/project online without installing anything.
It also has most of the common controls, along with much more features for managing thw whole project and sharing it with others online.
I must admit, i didn't try it yet myself, but i looked at it a bit and it seems pretty cool. I'll probably be using it soon enough.
Sass looks like it has potential as a way to mitigate some css headaches.
I like to add Bootstrap it's intuitive, and powerful front-end framework for faster and easier web development.
I like RocketCSS. Nice clean design, give it a go.
Locked. This question and its answers are locked because the question is off-topic but has historical significance. It is not currently accepting new answers or interactions.
Reading on another forum I've came across the world of CSS Frameworks. The one I've been specifically looking at is BluePrint. I was wondering if anyone else had come across CSS frameworks, suggest which is the best and if they are worth the effort?
CSS 'frameworks' are completely missing the point.
CSS is not like JavaScript, where you can include a base library/framework and then call functions and objects from it to do higher-level work. All a CSS framework can give you is declarative rules: some default browser-rule-reset stuff, some class styles to be forced to author your page to, and layout rules using 'float' and 'clear'. You can write that in a few lines of CSS yourself rather than pulling in the bloat of a hundred framework rules.
The 'grid layout' stuff in particular goes back to the bad old days of mixing your presentation into your markup. 'div class="span-24"' is no better than a table, you'll have to go back in there and change the markup to affect the layout. And all the frameworks I've seen are based around fixed-pixel floated boxes, making it impossible to create a liquid layout accessible on a wide range of window sizes.
It's backwards authoring, of use only for someone too scared to write a CSS rule.
So, nobody's responded to this question yet (although I've seen a few upvotes), so I am going to at least attempt to tackle the second question in this prompt.
CSS Frameworks are great; like any other framework, they reduce development time and let you get working immediately on site-specific design and CSS. They think about hard decisions so you don't have to.
Unfortunately, there are two downsides to using a framework (in general):
The framework dictates the overall structure and mechanics of your CSS code. Now, I'm not talking about a CSS reset (these are useful in their own right, but they are not true frameworks); I'm talking about an honest to good framework, that has already made the decisions about what semantic tags you are going to be using in your document, etc. As such, you are made dependent on the framework, and when there is a bug in the framework, you will most commonly have to fix it yourself.
Frameworks are not an excuse for being oblivious to cross-browser/advanced CSS issues. You will invariably run into them, just as you would working with a PHP or JavaScript framework. And you need to know how to deal with them. There is a common saying that you should write your own framework first, before using someone else's.
Taking a quick peek at Blueprint, I would not really call it a framework; maybe a reset with a few extra goodies on top.
I've looked at BluePrint and a few others and the only CSS 'framework' I'd recommend is YUI Grids
Pros:
Written by one of the best frontend engineers out there (IMO) (Nate Koechley)
Very small. 4KB
Very flexible (1000 different layouts)
Supports fluid-width (100%) layouts as well as preset fixed-width layouts at 750px, 950px, and 974px, and the ability to easily customize to any number.
Supports easy customization of the width for fixed-width layouts.
Template columns are source-order independent, so you can put your most important content first in the markup layer for improved accessibility and search engine optimization (SEO).
Self-clearing footer. No matter which column is longer, the footer stays at the bottom.
Layouts less than 100% are automatically centered.
Somewhat semantic classnames (better than top, left, right, etc)
Cons:
Lots of extra markup compared to hand-written HTML and CSS
Takes some learning to figure out how to do complex layouts
As other have posted, there are no real 'frameworks' for CSS. Reset stylesheets help a lot with layout too. I usually stick with a reset stylesheet and go from there. But if you don't have a lot of CSS experience YUI Grids could save you some time.
Compass is an actual CSS framework in the sense that it gives you not only templates (both YUI and blueprint), but also reusable constructs and higher-level declarations while still giving you familiar CSS syntax.
Take the time to study and understand (really understand!) a few css frameworks such as BluePrint and YUI, and css resets like Eric Meyer's. Then, take the time to put together your own reset and/or framework based on your work methods and the kind of sites you build.
Personally, I use most of the Eric Meyer reset with some classes and resets of my own, plus a few ideas from BluePrint and YUI.
I recently watched Eric Meyer give a presentation on CSS Frameworks in which he asked the question: "so which one is the right one for me?" He then answered the question by showing a blank slide. His point was, that there are certainly some useful concepts built into most resets and frameworks, but the one that will suit you the best is the one that you write for yourself (it's worth the effort).
Why use css 'frameworks'?
If you are pressured for time.
If you do not know css, and don't
know someone who can write it for
you.
If you are not overly precious about
standards etc.
I know programmers who have been really happy to use blueprint or 960, as it allows them to put together a layout on their own, without turning to a front-end developer. This is ideal for personal projects, or startups with limited resources.
If you have decent knowledge of CSS already, then presumably you have a decent library of stock layouts already, so you clearly won't need a framework.
However, if you're a beginner and just need to get something up and running, then you might turn to a framework, as it makes basic layout much simpler, and tackling browser compatibility also.
Having said all that, many frameworks out of the box do make use of some horrible class names etc. I know of some websites that have taken a framework as a starting point and then customised it with their own class and id tags. But clearly there's a bit of work involved in that rewrite too. Using something like Compass, as mentioned above, does help to get around that.
So, CSS frameworks - they can save you time, at the cost of semantics. They might also hurt your knowledge of CSS, but that is more up to how much you invest in learning the subject in general. Whether you make use of them is up to you.
You'd have to ask yourself how effective the available frameworks are at solving your problems. Do they meet your requirements?
By using a framework, you can set some rules or details at the pixel level and devote the rest of your time to implementing and producing. It's a massive productivity boost. If you find yourself spending time adjusting things by a few pixels late in the project (micro managing the design), it's a sign that a framework can be useful.
Tip #17 in The Pragmatic Programmer says: "Program close to the problem domain". Using a layer of abstraction can get you closer to solving the real problems of layout. For example: you might be able to concentrate of enhancing the user experience with the extra time you have rather than minor adjustments of pixels.
This is not to say you must sacrifice quality for quantity. It's about efficiency.
On a recent project, I made my own framework because we had very limited resources and the popular frameworks didn't do what I wanted. Then, I set up the design team's PSDs to snap to the same grid I deployed.
A framework doesn't have to be any particular implementation of CSS. It doesn't have to be something bloated you downloaded from the interweb or something implementing outdated ideas. It's just a technique for getting a job done. I wouldn't be surprised if some coders already have their own frameworks and don't even know it. In fact, if you consider the DOM as a set of default elements you extend with CSS, then that's a framework by definition.
I actually spent a good portion of the last 24 hours investigating this on my own, heh. My conclusion was that a nice reset (I used YUI Reset), and maybe something else to set baseline stuff (YUI fonts was worthwhile in my case; maybe the "extra goodies" of BluePrint would be in yours) is a good idea. But, a "framework"---which is generally something like YUI grids---is too restrictive, forcing you to use their class names, ids, etc. and rarely fitting into your site like hand-made CSS would.
So in short: resets seem pretty nice; it's good to eliminate all the variation in e.g. margin-vs-padding for lists, or paragraph spacing, or whatever. But that's as far as I would take it.
i haven't used it yes, but i think emastic may be a good alternative worth a check. it it is similar to blueprint in scope, but also supports elastic layouts (hence the name) and you can specify values in px, em or %, and even mix them.
Compass I think is amazing. Make sure you see the screencast.
I am using 960.gs for a few websites and find it very simple and easy and worth the effort. Saves me a lot of work on layout. Make sure to check the custom CSS generator which goes away with the fixed width of 960 pixels.
I think that this video presentation by Site Point CEO Kevin Yank will answer your question. I really recommend to watch it.
Compass lets you rename your framework's classes and ids with your own semantic names, so you might want to check it out. It also provides access to stuff you just don't get with plain-vanilla CSS such as mixins.
I'm astounded by so-called "CSS experts" who criticize these tools without really having digged in and used them. Are they essential? No. If you like your own framework (you do have one of your own, right? A CSS framework is just a carefully defined library--everyone should be using one) then by all means, keep on using it. No one is forcing you to use other frameworks and I don't see people who are using frameworks telling CSS purists that they are "doing it wrong."
Criticizing frameworks from such a standpoint just reveals an insecurity as well as an ignorance. For example, the notion is laughable that a person would use a tool like Compass without knowing CSS. You realize, right, that a framework generally doesn't write all your CSS for you? You can still break out and write your own CSS within the context of most frameworks. In fact, if you don't know CSS you might get frustrated quickly.
For myself, I appreciate having a framework because it is already documented, tested by hundreds of other users, and I can apply my own classes and ids via Compass. If I need something that the framework isn't suitable for, then I'll code my own.
Matt Raible of AppFuse fame had a CSS Framework contest a while back to develop CSS Frameworks for AppFuse. The results are published here. There are a few variations and I have used some myself because I use AppFuse and find them very good.
I should add that these CSS Frameworks work well because they are used in themed applications. That is, if you stick to the rules then switching from one to the next is as simple as changing one value in a properties file.
I have used BluePrint with much success on a site (I could mention the site here but I am sure the post would be marked as spam!). I am not sure if I will use it in the future though because one of the ideas of CSS i thought was to not have layout logic hard coded. You shouldn't have css elements called span-24 and span-12 to define the layout but something like searchBox and mainContent. At least thats how I see it.
Good link I found : Top 12 CSS Frameworks and How to Understand Them
Here is my blog post about CSS Frameworks When to use CSS framework?
The only way I know of to use a CSS framework and retain semantic markup is to use a higher-level abstraction. At the moment, Compass is the only one I'm aware of that's mature enough to use, but Nicole Sullivan seems to be doing some interesting stuff with her "Object-Oriented CSS" project.
I find Compass' clever use of Sass mixins to be brilliant, and a big step toward the Holy Grail of maintainable semantic markup. I don't think I'd want to use a framework like Blueprint or YUI without an abstraction such as Compass to keep presentation classes out of the markup.
BTW, there's a nice-looking CSS framework called Elastic that looks good enough that I'm considering adding it to Compass.
I believe CSS is about simplicity. The goal is to have one or two places to check when you're referencing between the HTML and your stylesheet. Adding more lines, and especially lines that you did not write and are probably not that familiar with, will exponentially increase the complexity thereby volatility of the CSS code.
I would suggest your layouts as you write them and develop a generic template system from that. While I love making CSS more modular, often and depending on the design, your CSS may be very case-specific and not modular at all.
I've used Blueprint on a few one-off sites and it definitely saved time, primarily in cross-browser testing.
It definitely sucks adding presentation code to your markup, although on the bright side it's readable. While I love the concept of "you can redesign without touching the markup", if you're producing a site where that really isn't going to happen anyways and you just need it done yesterday, Blueprint is something to look at.
There are also tradeoffs in what types of layouts it can feasibly create though. If you wireframe the site from the start on a strict grid, it will be much easier to transpose into the framework with a minimum of fuss.
I have used BluePrint and YUI but I always get frustrated with some of the names they give their id and classes.
To each their own, but I prefer doing things from scratch, but after a while you develop a process in which you will use your previous work and apply it to new projects and just make some tweaks to make the web site look the way you would like it to.
Be sure to use a good naming convention, just in case someone else down the road comes in to edit the css, then they will have a good idea what each style name is referring to.
Craig,
Compass is what you're looking for: it allows you to rename your Blueprint CSS classes like "span-24" with your own names. It also expands CSS functionality with variables and mixins. Truly, those that prematurely judge frameworks without having checked out Compass are "missing the point." It's sort of like those folks who told us years ago that we are missing the point by using CSS instead of HTML tables for our layouts.
-Matt
check out http://www.ez-css.org/. one of easiest and lightest css framework to work on. :)
Take a look to this demo:
http://www.richstyle.org/demo-web.php
This framework is based on idea that "HTML tags should be enough".
I think re-usability is the most important factor for choosing a software component, including a web framework.
For web frameworks developers, the more you commit to standards, the more you guarantee re-usability.