Related
At first glance, React Native appears to have CSS support. But users quickly learn that it's not even close. There is no css parsing, no selectors, and no 'cascading style'. Everything is basically POJOs.
I'm on a team building a React Native app and every new developer has been confused by this. The styling, IMO, needs major improvement. I would like it to be closer to the web, supporting such things as:
.css file parsing
class and element selectors. I want <View className="container" />
style resolution like the web
maybe pseudoselectors
There isn't anything like this on the roadmap. I'm shocked it isn't under discussion. I'm considering tackling this problem, but I want to be sure it's not already underway or something people don't want.
So, I'd like to know:
1) are there any plans to implement something like this and 2) is this desirable?
I'm unsure if SO is the forum for this, but it was recommended in the RN readme. If it's inappropriate for SO, please point me to a better place rather than just flagging it as off topic or whatever.
By the way, I've already started work on this. My plan is to use WebKit for CSS parsing and resolution. Then I'll have to modify the RN code to add className and tag name support, as well as integrate with WebKit for applying the styles at render time. The end goal is to get this integrated into the framework, but at first I'd prefer to develop as a separate library, potentially (hopefully not) having to fork or patch RN core.
I only need a small portion of the massive WebKit code base. If anyone is or knows someone familiar with WebKit, I'd love some help.
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 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
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.
For some reason, it never dawned on me that there could be frameworks for CSS. I have been working on my own personal site, and I just really hate 'designing' with CSS (I think more then a few programmers might agree with me). Anyways, I understand the benefits of a framework for a language such as Java, PHP, [insert language]. I downloaded a couple different CSS frameworks and couldnt really figure out how to use them. I guess I might be expecting an API or something (which obviously doesnt make sense given the lack of logic in CSS)...
Has anyone here used (and would reccomend) a CSS framework? Is it overkill for a relatively simple layout?
Please do not post links to other sites, I know how to use Google. I would rather hear the opinions and insights of the community. Thanks.
Please understand framework here simply as 'a collection of helpers for getting things done'. So what will you get in most cases is a set of CSS definitions, resetters and hacks, which you will probably need to code for yourself anyway when having cross-browser compatibility on mind.
No links? K. First, you should get familiar with Grid Design techniques. My fellow front-end developers recommend Blueprint for handling CSS-based layouts, no matter how complex they are. Hope this helps a little.
Caveat: I haven't really looked into this subject in a few years, the landscape may have changed.
The few CSS frameworks I've played with in the past have been more or less hideous things designed for snapping to grids, wrongheaded desires to bring WYSIWYG into the picture, and providing things like generic rounded corners and such. They tend to have some semantic issues (.italic FTL) and require a lot of manual tinkering for a framework.
More practical for the CSS beginner or rapid dev site, are perhaps the CSS reset which functions to baseline CSS across browsers (yahoo's) (Erik Meyer's). But this is not without it's own controversy and never seemed to be enough.
Basically. I find CSS requires a toolbox of common techniques of your own, but something you'll pick and choose and modify constantly. As in much of web dev I think the more experienced you get the more you find yourself wanting to roll your own.
I used YAML (Yet Another Multicolumn Layout) in a few projects, because I didn't like to "fight" with the Internet Explorer 6 HACKS.
There is a good explanation of how to use it and you can customize it to your needs (as long as you're going to use a multicolumn (2 or 3) layout).
960.gs seems to be fairly popular with designers lately, although I have never quite seen the point to CSS frameworks myself.