CSS framework for beginner (old browsers) - css

Sorry for the silly question but I've been looking around on the internet all afternoon with not much success due to the many many frameworks out there (too many).
I am a java web developer who normally doesn't deal with CSS. At my company we have to support ie6 for some stupid reason. I'm looking for a css framework I can use that will get me up and running quickly with some buttons, menu's and layouts and I don't want to just dload any old web template. Would be nice if I took the opportunity to set up the css myself.
Can anyone suggest some good tools/frameworks that will get me up and running quickly? I can't use bootstrap because it does not look compatible with ie6.

If you wish to build a website which is compatible with IE 6 (This is end month of 2013 where it has ie 11) I recommend using YAML http://www.yaml.de/ . It has clear documentation with examples. You can also use http://www.cascade-framework.com/ which has minimum CSS which required for a website/web application development. Also, YUI you can use http://yuilibrary.com/yui/environments/ .
Hope it helps.

sorry i don't use any css framewrok supported IE6,but i think older versions of some css framework may support IE6 like http://www.blueprintcss.org you can try.

Try Cascade Framework. It's about as feature rich as Bootstrap and has a grid system more flexible than any other grid systems around.

Related

XPages: IBM OneUI vs. Bootstrap

In the near future, I have to update a bigger XPage application (development time more than three years) now running on a Domino Server 8.5.3 FP6 to Domino Server 9. In this application I am using IBM OneUIv2.1 but I am unsure if I should use it further. Unfortunately I have no experience with Bootstrap, however in one of the last Extension Library releases an essential part of the update was for Bootstrap:
This release is the sixteenth IBM Notes Domino 9.0.1 version of the
XPages Extension Library (ExtLib) to OpenNTF. This release contains a
significant Bootstrap upgrade to 3.3.6.
So for me it seems to be the XPages CSS Framework of the future?
Am I right?
Thanks in advance for sharing your experience!
I use oneUI at the day job. There are some very good things about it. However, I'm trying to get my company and all my personal work migrated to Bootstrap. OneUI is not really responsive. Even if that's not a big issue for you the biggest reason to avoid oneUI is the lack of documentation and materials for it. There actually is documentation for oneUI But nothing like Bootstrap - the most popular framework going as far as I know. Heck right here on StackOverFlow over 59,000 questions have been asked on Bootstrap. There's tons of resources like bootsnipp.com. In my opinion it's almost a no brainer that Bootstrap should be used over oneUI if at all possible.
As long as IBM won't deliver us the new "Verse" UI (which I'd refer to as OneUI Next) I'd prefer the Bootstrap UI as it is responsive. I wouldn't say that it's IBM's future UI framework as departments seem to develop indepently IMHO. The Ireland guys are proclaiming Bootstrap but the IBM Design team propagate their own styles. As always: not a straight strategy here.
But when it comes to application modernization I'd prefer Bootstrap. The next iteration will include Bootstrap 4, too (the final version).
Anyway, using Bootstrap instead of OneUI will deliver more straight and simplified CSS classes other than the "LotusUI" stuff in OneUI.
Just my 2 cents.
Yes, I agree you are right. IBM is staying in front of the curve in supporting Bootstrap for the future. I don't believe that they are investing any more resources in OneUI at this point in time. (Good news, IMO)
On the surface, your question appears opinion based, but really you need to be concerned with the level of support/investment by the IBM XPages team.
If you haven't view it already, I would recommend the TLCC webinar given this month (Feb 2016) by Brian Gleeson and Martin Donnelly on Responsive Design using Bootstrap with XPages. The team is being extremely proactive in preparing to support Bootstrap 4 which isn't even released yet.
This is the link to the webinar which is very well done: https://youtu.be/0ylbKHyiFyY
a big advantage with Bootstrap in comparison with oneUI is that there are many sites where snippets for controls / layouts / panels are being shared.
if you stick close to the oneUI defintion you are limited in your presentation options.
also Bootstrap is targetted against multiple clients (mobil / desktop / large) which oneUI is not. so if that is a requirement I definitely recommend bootstrap above oneUI.
there is a learning curve with Bootstrap but manageable.
with Bootstrap I hardly use dojo anymore and disable it in xpages whenever possible.
there are also limitations with bootstrap, e.g. motion awareness but you can overcome them with plugins. you would probably experience the same limitations with oneUI.
once you go bootstrap, you can't get back (to oneUI).
I have little experience with other front-end frameworks so I can not advice on that.

iOS 7 style transparencies/animations in Sencha or HTML/CSS

I am creating a mobile app with an iOS 7 theme, meaning lots of transparencies, blurs, and animations.
Does anyone know if the current JS frameworks out there (blur.js, fabric.js) will suffice in terms of performance for blurs and transparencies? Or am I stuck with going the native route.
This isn't the best question in the world, but in short, yes. I've been working on a similar project and have almost completed it. I can assure you the vast array of available CSS and jQuery markup will be sufficient for your needs.
iOS 7 Bootstrap:
https://github.com/brandonjordan1/iOS7-bootstrap
It's only in it's first version but it's the only one.

MonoTouch css styling

I am new to monotouch and wanted to know if there is a simple way to implement css styling in any of the types of views/viewcontrollers? I have read about WebViews, worked with UIViewControllers, but I want to build an app that is basic styling for now that I can update later with css styling from a design organization. Anyone know anything about this?
iOS 5 has some limited support for global styling. Miguel has a post that explains how to use it in MonoTouch.
Interestingly enough there was a project on Kickstarter.com which ended up getting funded which allows you to use CSS3 to style iOS and soon Android apps. It actaully works really well.
Pixate.com

CSS Generator for Multi-Browser Support

I know that there are several very similarly-related questions on this website, however after reviewing the play, I believe this question is unique in its own right. If someone can find and provide evidence of an exact dupe of my question, I will withdraw it myself (so please just don't downvote this!).
I am a Java developer, not a web developer. But, as is the case in so many families where there is one person who becomes the designated family "computer guy", my Java development skills have been mistaken for web development skills, and I somehow got roped into building a website for my parents to help them sell their house.
So, like any web development newbie, I wrote the HTML/CSS myself (by hand, sans editor like DW or Expression, etc.) and tested it against FireFox 3.x. All looked great, and we deployed/launched.
Now we're getting negative feedback from everyone and their dog stating that the site isn't rendering properly in other browsers, browser versions, or on FireFox installations running on different operating systems. Similarly, the site is apparently a total mess when being viewed through a smart phone or tablet device.
Now I could dive in and write a whole bunch of messy, nasty, painstakingly-tedious edits to my CSS rules, that basically say: do X when browser is Y, etc. But I am hoping that out there is a tool that can put all my fears to rest.
What I'm looking for is a tool that could take my valid CSS files, and use them to generate CSS rules that will be compatible with a high percentage of all common browsers/versions.
Alternatively, if I have to re-write my CSS from scratch, it would be nice to have a tool that allows me to write/design once, deploy many, so that I only have to focus on the design of a single CSS file, but the code that gets generated is multi-browser compatible.
It sounds like DreamWeaver kind of does this, but you have to choose from one of 16 pre-existing templates.
My wife is a graphic designer, and made the website pretty sweet (not cookie cutter). It was a nightmare trying to figure out what CSS rules to use to implement her design. So any tool that forces you to choose between templates is not an option.
Is there any hope for me, or do I banish myself from my family in shame right now?
css is a mess, no way to automatically doing it right. saying that I would say there are tools that would walk with you the proper way.
1. use the meta tag:
http-equiv="X-UA-Compatible" content="IE=8" (encpsulate as a meta tag - SO won't display if I wrote it as a valid tag)
to force IE to render with it's most modern engine, that would solve some problems.
2.begin your css with normalize.css - that would eliminate some of the cross browser problems - because it resets your css (better and more modern the reset.css)
I'll second the GWT if you come from the java dev world. although It's a framework to learn with it's own quirks. another possible web framework is Grails - a nice java/groovy port of the mighty Ror.
Less or Scss won't automatically solve your basic problem - which is browser compatibily - but are a better and simpler way to write css
remember that most css3 properties aren't support equally in all browsers (and in IE almost not supported) - use them only with graceful downgrade option with supported js or css -when Modernizr js library can give you pretty good property support detection for various browsers
don't go dreamweaver - it produces terrible code
use csslint to check for valid css and common css pitfalls
If you must use cutting edge web rendering with html5+css3 elements you should look into chrome frame -that would enable older browser better support of your site - although I believe this may be an overkill for a simple sell-my-house kind of site.
use a css framework to prototype- it would give you better css, good basics and resets and good boilerplate - maybe bootstrap or something similiar (didn't try most of them but the internet is crowded with those.
good luck
Check out modernizr. http://www.modernizr.com/docs/
You want to get into the position of checking for features and not browsers.
Here's an excellent site to check your site with alternative browsers:
http://www.browserstack.com/
Less (http://lesscss.org/) will help you with a lot of CSS3 functions.
However, good CSS code simply works on all browsers. There are some CSS concepts that must always be avoided as much as possible (absolute positioning, excessive floats, using the wrong elements for a task, etc) and your code will work better.
In the many years I have programmed I only needed browser-specific code in the first two years. Then I grew up and learned which CSS code not to use and when it was possible to use them. It has been my experience that properly written CSS code works on all browsers, and if it doesn't it will at least get the basic concepts right (eg. a few pixels may be wrong or some effects, but the site still works well).
Several things come to mind that may help your case:
Forget about IE6, that one will give you trouble no matter how much effort you put into the site.
Make sure you have a good doctype (html5 or xhtml would be good).
Try out html5 reset, it tries to make sure all browsers behave the same.
The aforementioned reset also includes modernizr to bring older browsers up to speed
Finally: accept (some even say "embrace") that different browsers render things slightly different. Getting every pixel exactly the same in each browser will be near impossible.
I hate to put this into the world, but it sounds like you need Adobe Muse.
There is no equal to a good developer who will write clean cross browser code, but if you just want to get the site done check out the beta: http://labs.adobe.com/technologies/muse/
What I'm looking for is a tool that could take my valid CSS files, and
use them to generate CSS rules that will be compatible with a high
percentage of all common browsers/versions.
Unfortunately there's no such a tool and you have to debug and test your website for cross-browser compatibility manually. The best way i've found for cross-browser testing it to install and test different versions of browsers in several virtual machines.
You will also find the following helpful:
Modernizr
Google Web Toolkit

Asp.Net website looking fine in IE6 but not in IE7/IE8

I have a small website developed using VS2005 and mySQl, it's just 2 webforms and login page.
During the development and testing phase, me and my customer were using IE6, and it was looking fine, we didn't test with other browsers because it's a small application, and just a add-in for large desktop application.
The customer informed me that site doesn't like the same when he installed IE7, for example I have a webfrom that show a page with Gridview that has multiply pages(AllowPaging=On), it doesn't look fine in IE7 and I can't navigate to other pages in Gridview, but it was working fine with IE6, and there's no complicated things, just plan GridView with small formatting.
I installed IE8 and doesn't look fine with it too, even in compatibility mood.
Have anyone faced the same problem?, and what should be the quickest or best solution for that?.
I know, I SHOULD NEVER USE WEBFORMS AGAIN.
The only reason for a difference in look between the browser versions is your styling and doctype.
Start with setting a doctype to run in quirks mode. You can get information about it here.
After that, see if things improve. If not, I would start ripping out any css/styles/themes you may be using. Then build it back up using normal CSS.
Incidentally, web forms isn't the problem in this case; it's a styling issue.
as Chris mentioned, add to that that browsers have really some annoying differences that makes you pull your hair sometimes, and 90 % of the time it is related to CSS.
so what i suggest is the following
use a tool called IE Tester, it is amazing tool that let you test your sites in all IE versions.
Use conditional command for targeting IE specific version if some CSS rule is wrong.
we use this tool http://rafael.adm.br/css_browser_selector/ it is really amazing it let you define css rules for each browser without hacking or conditional statement, but the down side it is Javascript dependent, but we had no complains.
also this script http://dean.edwards.name/IE7/ which is brilliant, it will let IE 6 behave like IE 7 which will save you tons of problems, again it is Java Script dependent.
Avoid Hacks as much as possible, the above methods will help you a lot.
hope this helps.

Resources