can i create website theme using YUI? - jquery-ui

Hi I want to know what is the easiest way to create smooth,simple and attractive,
light weight theme for website ?
so I have confusion in choosing many css, js framework.
can any body tell me which is better and best to create theme ??

it depends on many factors such as what type of theme you want to create. If the theme is just going to be dealing with UI Controls, Then checkout
jquery ui at http://jqueryui.com/ as it provides excellent themese for you.
Since you mentioned CSS you should also check
Blue Print CSS Framework
as it comes with a huge variety of styles that you can add readily.
You can also download some HTML 5 light weight themes that are compatible with mobile devices also and then you can customize them to their content.
http://creativecan.com/2012/05/html5-and-css3-templates/
Check that out as well.

Related

Asp.Net and Accessablity

I'm working on a brand new project for a state government agency that we are going to be using Asp.Net MVC3 as our framework.
My question is I cannot find any guidance on how to make our web app Section 508 (and similar accessibly requirements). This is my first project where this is a requirment. So to implement this do I - For example -
Is MVC3 compliant out of the box just by adding some properties?
Extend the standard controls for this functionality?
Write my own controls?
Any suggestions would be appreciated. We don't really care about how this is implemented as long as it is clean in our Razor view.
Section 508 compliance doesn't have so much to do with the technology as it does the implementation of that technology. If you look at the guidelines, they're (for the most part) implementation details:
Having alt tags for images
Captioning audio presentations
Verifying that information is displayed with cues beyond just color
Documents readable without a stylesheet
Having row and column headers for your tables
Frames (if you're really still using them) must be titled and labelled
Don't add any content that flashes or flickers
When using javascript have descriptive information that identifiers to the user what is happening
The rules go on a bit more, but you get the gist of it. It's not in the technology, it's in the implementation details. You can do all of these things with standard HTML (captioning videos may be a bit trickier)
One other thing I can recommend: The Web Developer toolbar for Firefox (and I'm guessing the Chrome version as well) has a 508 validator option built right in. It will get your up and running on what the reqs really are.
Web accessibility is too broad a subject to cover in a single answer, but it is all to do with your HTML markup - regardless fo controls, or anything else you use. What really matters is the HTML rendered - even if you use some components to assist with this.
You can find a lot more information by searching for "web accessibility" in your favorite search engine, but my high level suggestions would be:
Be proud of your markup, and make it semantic. Use headings only when you actually intend there to be a heading. Within a table, use instead of if the cell is a table header. Use bulleted/numbered lists when that's semantically what you want. Don't miss-use tags to fake appearance.
Then layer on CSS to provide any visual look that you want. Check out http://www.CSSZenGarden.com to see how this is possible.
Finally, add on your behavior using Javascript. Don't mix these three up - with Javascript you can add in event handlers in the jQuery $(document).ready() function; leaving your markup behavior-free.
If you wish to use lots of Javascript libraries and controls, then beware that this is likely to decrease your compliance unless you specifically look for accessible controls which promote progressive enhancement. For a government site, someone without Javascript should still get a good experience, and a blind screen reader user should be able to use your Javascript controls as most screen reader users still have Javascript on.
There are various good articles on choosing your color contrasts, avoiding rapidly changing content, spacing - too much to cover here :-)
No, you need to write your html to be follow the 508 requirements. MVC doesn't do anything special in that regard.

Jquery UI Framework

Thanks for looking into this.
I'm looking to build a framework of apps which can be extended by third party developers.
The goal is to load each frame via ajax - I need to know if there is a framework which can be help me position and resize various widgets just like this one.
Example screenshot
http://tour.netvibes.com/private.php
Thanks.
Not completely sure what the question is... but:
http://jqueryui.com/
Draggable/droppable as well as jqueryui dialog should help you create and position widgets as in your question.
If you do 'view source' on the page you have linked, you can see that the page uses Mootools.
Appears to be some kind of Javascript framework.
http://mootools.net/
Additionally, you could follow Mark's advice and go with jQuery, which is a widely-used, mature framework that offers great functionality.
I agree with rmk and Mark about jQuery being a great framework!
For the ajax stuff it works well and is really easy to get into work.
For the UI part you can try the "standard" jQueryUI, which is well structured and easily themed, but by now it has a limited set of things. You have all you need to build widgets, but you don't have ready-to-use stuff like panels, layouts and so on..
If you need more, besides those said above, try looking at jQuery EasyUI, which has a lot more of things (for instance a "panel" extension to put widgets inside).
They are both based on jQuery.

Is there a place to find other jQuery UI themes?

For some reason i don't like any of the themes that are on the jquery ui themeroller page (i am looking for something on a business website and these all look either bleak or too corny). I wanted to see if there were other sites where people have uploaded or voted on other themes to view and download.
I know i can tweak my own but first wanted to see if anyone has done this already with a better artistic eye.
Aristo is a really nice jQuery UI theme that is worth consideration.
As others have mentioned, there are more themes out there if want to do some more digging...

XSLT vs MVC vs CSS for flexible mobile/normal layouts

I'm building a new front end for an existing forum project, and I'm undecided on the best route to take for the user front end. The project will be built in ASP.Net 3.5.
The requirements are as follows:
1) User selectable themes/templates must be supported - I have forum goers who will want to contribute forum themes, so the layout system must be flexible.
2) Mobile friendly. The site must be usable from the most popular mobile browsers, so I have to be able to substitute templates based on the user agent and/or site url.
As near as I can tell, these are my best options:
1) XSLT: Output all of the relevant data in XML format, and dynamically attach an XSL stylesheet based on user settings/mobile state. I'm unsure how well mobile browsers support XSLT, but it appears that at least some do.
2) MVC: Sub in a different view based on user settings/mobile state. This might be harder to support templates from users, however.
3) Pure CSS: Standard DIV+CSS style layouts, subbing the CSS stylesheet in based on user settings/mobile state.
I'm quite sure that all of these options will work, however, I have only a basic familiarity with MVC, having developed exclusively in WebForms until now.
I'd love some guidance here, before I end up down the wrong path.
I would go for pure CSS layouts. It is increasingly being supported by more and more browsers.
I can't comment on MVC - no experience with that.
XSLT is something I like a lot. I don't know about mobile browsers, but it certainly is well supported by major desktop browsers (by supported I mean XSLT 1.0 is well supported). The downer is that there seem to be relatively few people with skills - much less so than CSS. So if your goal is to get reasonable abount of user contributed themes, I think that would be much better achieved with CSS.

Two different jQuery UI themes on the same page

I want to have two different jQuery UI accordion menus on the same page, but I want them to have different themes. Is this possible?
Absolutely. The jQuery UI CSS Framework has a robust and complete theming solution. Just give your accordions separate CSS classes - jQuery UI classes are semantic in nature - and off you go! Let me know if you'd like an example.
EDIT: There are many different ways to do this, depending on what your needs are. See the bottom part of this page for more information on how to use theme-ing with the accordion
According to the article Using Multiple jQuery UI Themes on a Single Page from the Filament Group, it is possible to provide a CSS Scope when a theme is downloaded that will allow you to specify use of alternate themes on a single page. There is also a link to a demo page.
Disclaimer: I have not tried doing this myself, but it does look promising.

Resources