I am making a single-page, full-screen web application which will have a similar interface to an IDE (with menus at the top, output pane on the bottom, and input panes tiled horizontally across the middle). I am targeting only modern browsers, so a solution that uses HTML5 would be fine. Is there a good JavaScript framework and/or CSS framework to make creation of the layout easier?
Update: To clarify, I am looking for tools to make the single-page, full-screen layout practical, not the controls.
Tons. ExtJS, jquery UI, YUI can do it, dojo can do it, many, many others.
You can try http://dhtmlx.com/
For a living exemple of what you want to do, try this apps : http://c9.io/ It uses ACE : http://ace.ajax.org/
Related
i'm trying to redirect my mobile users and all of small devices users to my mobile version of web site.
but i don't like change my URL.
like below example ,
desktop version : domain.com ( with desktop version of site )
mobile version : domain.com ( with mobile version of site )
Redirect means to Change the window location.
since you dont want to have a seperate mobile site,
The Only feasible solution is to use a good responsive ui framework like bootstrap. but in your tags you mentioned wordpress and i feel most of the wp themes are in fact responsive.
Anyways, use bootstrap if you would like to design a responsive site.or another alternative would be to write all css using media queries.
Hope that helps.
You need to replace the theme of the site for this "on the fly".
You can do it with code but it's too long, use this plugin instead device theme switcher
URls for both should be same and they are same in their case as well. Well done !
Now, for automatically rendering the specific layout, take help of media queries.
Refer
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
They define the specific width range and pick up those specific styles only.
So you have a lot of work to do.
This is a optimal way to work and this is termed as responsive design.
You can find n no of tutorials for same. But to experiment just work with one or two media queries.
Also, read about meta tags which enables to pick those media queries written in stylesheet https://css-tricks.com/snippets/html/responsive-meta-tag/
Good luck !
When customizing a page on WordPress, at the bottom left corner, you can see how your website will look like in phones or tablets.
Also, some page builders like Elementor, allow you to control what sections to appear on what screens.
A better way to state your question question would be, how to make a page responsive?
When reading about Grid Systems, you'll be amazed at how a simple change to the orientation of your divs, can make a huge user experience difference.
When using a framework that uses Grid Systems, Bootstrap being one of the popular ones, you can imagine any screen divided into 12 columns (grids). Then you can specify how many parts a div takes on each screen size by adding classes. For example, <div class = "col-sm-6 col-lg-3" </div> will cover have the screen (horizontally) in small screens (6 being half of 12) and a quarter of large screens.
The reason behind this peocess is to eleminate right and left scrolling which makes it easier to navigate.
Hope this gives you a little overview of what you need to be looking for to make mobile-friendly websites. Good luck!
thanks all of you for commenting my question.
Now that i write my answer to my self , i found my question's answer.
Responsive design not it's answer. You have to show a mobile version of site, not responsive version of site. so using #media()
not useful.
For this issues , You have to detect user's device in your back-end. for example in PHP you can use mobile-detect.
And you can detect your device and show it's template for that device.
Also, mobile detect have a js version. click here
I hope you find your answer here.
I am given a mobile app project and I'm looking at the technologies I can develop the app with. It is a mobile app to be used on tablets and smartphones. It will involve animations like fading in menus, changing opacities, transitions between pages, some minor sound playbacks... But it is not a game. I need to be able to use HTML elements like tables or divs with auto-overflow.
I started to create the app using HTML 5, CSS3, JavaScript and JQuery. But there are some problems I run into, like, animations being laggy, CSS3 not behaving the same, "touch" events behaving very differently, sound playback not being exactly the same among different browsers.
I recently saw that there are some JS libraries to make high performance animations, like CreateJS. My question is that should I use a library like this to create my mobile app? Or are such libraries only for game development?
CreateJS is not specially adapted for game development, there is no "game engine".
It just allows you to easily manipulate shapes, images, sounds in layers (Containers) like Flash.
Supports touch interactions in iOS, modern Android browsers and IE10.
So yes, you can use this library to create mobile app and you can combine it with jQuery.
I have successfully used createjs in mobile projects. I would recommend reading the SoundJS Mobile Safe tutorial (http://www.createjs.com/tutorials/Mobile%20Safe%20Approach/).
Hope that helps.
I am considering using Twitter Bootstrap (TB) for a mobile web app. The next version of TB, version 3, claims to be "mobile-first". However, looking at the included Javascript files, I see almost exclusively "click" events, hardly any "touch" events used. TB relies on Jquery to handle the events. Also, there are lots of "hover" definitions in the CSS, which don't work on touch screens. Even so, I find lots of recommendations and tutorials about using TB in mobile web apps when Googling.
My question is: How well does Twitter Bootstrap work on touch screens in terms of performance (primarily with regards to speed and response time)?
I've been developing with Twitter Bootstrap (v2) for a range of web applications that are also used on mobile platforms. You must keep in mind that Twitter Bootstrap is not a full on solution for all design needs. It "bootstraps" your project into not having to worry about certain things.
Bootstrap v3 has promised to do more "bootstrapping" for mobile platforms, but this doesn't mean you will not have to do certain pieces of development for any platform you wish to deploy for.
In case of working with Bootstrap v2, you can easily move around certain elements with the given CSS and a custom style. It's speed is marvelous and pretty much all modern mobile devices have excellent support for #media queries that allow you to easily target specific mobile sizes. For example; I use media queries in a specific file to make all buttons take up full width for more easy access on a touch device.
As far a Bootstrap v3 goes, I'm very curious as the Release Candidate hasn't really shown me anything that really changed the way I developed for mobile, yet.
Hope this helps you out.
In the past I have used a lot of ExtJS to make dashboards. One of my favorite features is the full-screen viewport with border layout which helps you to split up a dashboard into panels on the left, right, top and bottom, without creating scrollbars everywhere. see e.g. these examples.
Is there a JS library or jQuery plugin that does just this? I am making a dashboard and want to split the screen into panels, but ExtJS is a bit bloated and overkill only to use for the boarder layout.
Ext JS is a great solution for this but if you are looking for something else then the jQuery UI Layout Plugin may be the option you want.
Example:
http://layout.jquery-dev.net/demos/simple.html
Project Home Page:
http://layout.jquery-dev.net/
Twitter Bootstrap provides help for the layout but you have to follow a certain design and am not sure it manages fullscreen apps with no scroll.
I think it's worth a look though.
You may look at Dojo which now integrates well with jquery and has nice widgets (tabs placed on the left for example, grids) and a good layout system.
I am interested in using this system but I would like to know if anyone has found any good alternatives. In particular I am looking for some layout system that will allow me to build an HTML5 layout that works good in a browser, on an ipad and on a phone.
Does anyone have any suggestions on other layout methods I should consider?
Grids are tricky when building responsive sites that cater for multiple layout sizes/devices because grid systems (certainly 960.gs) usually rely on fixed-width containers.
However, depending on how you approach your responsive build, you can still use a grid system for your desktop view. E.g. I usually approach responsiveness from the same perspective as the 320&up multiple linked stylesheets. This makes it easy to just load a particular grid system (usually 960.gs) only in the desktop view. This way, your mark-up can have the classes required by the grid system, e.g. grid_12, without the fixed widths screwing up the mobile view.
That said, there are some responsive grid systems that are proving popular and are easy to work with, such as the 1140 fluid grid. You could also try the fluid 960 grid
There are also projects that even use the 960.gs grid as a base, while still catering for smaller sizes, such as skeleton
I'd recommend you take a look at 320&up because it is a great resource for responsive builds. The theory of building for mobile first and progressively loading more stuff for larger views is definitely the way to go...
I have used 960 GS for a lot of projects but was looking for something like what you are after. I gave twitter bootstrap a go and have been happy with the frame work. It is easy to build on and to customise.
Use Bootstrap, works with percentages rather than fixed units for a truly responsive interface.