Is anyone aware of an (angularjs / bootstrap based preferably) window management framework. I'm looking like something similar to what elasticsearch is using for their kibana dashboards.
The concepts Im looking for is responsive, panels with mixed content, rows/columns with panels, user can change layout (change size, drag drop panels around) etc.
Thanks!
Sander
Related
I'm using MetroJS (http://www.drewgreenwell.com/projects/metrojs) and its working well.
But now I want to make the Metro layout responsive for mobile devices and so on.
Normally I would say I rearrange the tiles with the #media tag. But since the property about the tile size is in the class tag its not working that way or?
<div class="tiles tile-group five-tall six-wide">
Furthermore it would be awesome to make a animation while resizing the window like in the example:
http://themeforest.net/item/matrix-responsive-tilebased-template/full_screen_preview/2761654
Does anyone have an idea?
If you're looking to create different sizes for your tiles at different screen sizes you can use the theme generator to do this. Just click 'add' under the Size Options and it will create a new media query for you
http://www.drewgreenwell.com/projects/metrojs/theme-generator
.live-tile can be sized to whatever you would like to implement you own responsive. I started a responsive version of the tile layouts but have not had time to finalize it or test enough to include it in a release.
http://www.drewgreenwell.com/scripts/metrojs/src/css/responsive.css
As I move towards GSAP, I plan to build responsive in from the start rather than adaptive.
If you want animated movement of tiles as you resize your browser window (nice, but useful?), then I would recommend using something like Isotope or Masonry for your layout.
Isotope http://isotope.metafizzy.co/
Masonry http://masonry.desandro.com/
Probably worth noting that the theme you linked is using Metro JS (LiveTile) with Masonry for the layout
There are some third party themes on DeviantArt which change the way the toolbar works.
I would like to mod the toolbar in a way similar to this. Specifically I want this behavior: I want the start menu icon to be right-justified, the program icons to be center justified (with the option of having pinned icons forced to be listed before unpinned icons), and then other icons for background services and time are left justified.
In my previous question I give an example that illustrates my specifications.
Now that React Native is supported by Visual Studio, it would be cool if I could use React Native to mod the Windows UI. Is there some kind of wrapper that allows me to manipulate UI elements like icons, system font, toolbar background, windows appearance, etc... in a similar way someone working in a front-end Javascript framework would be comfortable in?
Also there is this program for Windows 7 called DualMonitor which creates another toolbar on the second monitor. It would also assign the program icon to the toolbar on the same screen.
https://sourceforge.net/projects/dualmonitortb/
https://www.deviantart.com/browse/all/customization/skins/windows/win10/
In one of my website I use Twitter Bootstrap 2.3. I love its responsive behaviour, media queries in mobile devices. But it lacks of mobile features (especially linked listviews) So I need to use a framework that would handle mobile version of my website.
After some research I found that jquery mobile, sensa touch, jqtouch, iui, mobilize.js, zepto are possible candidates.
What would be your recommendation for a javascript framework/plugin for mobile pages, that would work well with twitter bootstrap ?
Possible related questions:
Bootstrap list view like jqm
twitter-bootstrap vs jquery-mobile
Using Bootstrap with jQuery Mobile
Also read this: Twitter Bootstrap Navbar: [Left Button -— Center Text -— Right Button]? II
I think i should be possible to build a mobile interface with Twitter's Bootstrap (3). And yes you're right (linked) listviews will miss. Maybe check http://getbootstrap.com/components/#list-group first. Of course you will need to write some code to handle the actions.
Other points to consider: Navigation and page structure. Frameworks like jQuery mobile serve more pages on one url, see: http://jquerymobile.com/demos/1.0a2/#docs/pages/docs-navmodel.html while sencha use a MVC approach. Consider http://getbootstrap.com/javascript/#tabs (or http://getbootstrap.com/javascript/#scrollspy maybe) to mimic such structures.
Other examples, see: How to make a JS horizontal content slide from px to % responsive a nice interface with TB by #boblet which adopt to mobile very well now: http://bootply.com/73715. David Panzarella started a clean mobile navbar with icons: Bootstrap 3 RC2 Navbar with Multiple Collapses And a alternative mobile navigation stucture can be found here: Toggle sidebar on mobile device with Twitter Bootstrap 2.x
Good luck
If you are ready to mess up with Bootstrap and other several frameworks together then make sure you have sound knowledge in jQuery, JavaScript, CSS.
Each framework has their own way of enforcing styles etc, so if you are to combines multiple platforms together, you will often encounter issues such as the expected style from expected framework is not being applied.
I’d recommend you to stick with jQuery Mobile. jQuery Mobile 1.3 has great deal of Responsive design concepts. In the release notes itself they’ve mentioned that they are working hard to support Responsive designs. Read the official documentation provided by jQuery Mobile. This will give you a good head start.
Disclaimer : I have used only Twitter Bootstrap and jQuery Mobile. But I’ve heard from people other Mobile frameworks are not as flexible as jQuery Mobile. Also remember Sencha touch is very fast compare to jQuery Mobile but bit difficult for absolute beginners to get started.
I would recommend iUI since i'm working on it (eh eh) and because it's more or less an empty canvas you can "draw" whatever you want on.
JQuery Mobile or Sencha are nice, but they come with dozens or buttons & UI elements you might not need for a website. It's even getting a mess if you want to give a custom look to your mobile website when everything is predefined.
afaik, Zepto is only a lighter JQuery, so that wouldn't solve you linked listviews issue that much...
Please, give a try to my iUI v2 project, Emy, that you can try here:
http://www.emy-library.org/demos/
Still a few bugs to fix but i'm damn close to the initial release. Big difference compare to iUI are HTML5 syntax, custom animations, full documentation and WindowsPhone support.
http://www.emy-library.org/documentation/1.0/getting-started.html
Cheers!
Can somebody throw some light as to what are the various ways this Site is using to be responsive. Especially how is the top and left navigation changing to drop down , when you when you re size the browser.
http://www.smashingmagazine.com
I am sure this doesn't use twitter bootstrap. Are they any better ways to go responsive without leveraging twitter bootstrap.
Responsive design has been around in name longer than Twitter Bootstrap, and in principal it has been around for even longer.
Are they any better ways to go responsive without leveraging twitter
bootstrap.
"Better" is subjective, but there are many ways:
Another out of the box framework
Media queries
JavaScript to adjust the page layout (your own, or something like Masonry)
Floating elements which wrap based on width
Percentage-based layouts
All of the above
The site you linked to actually has good info on responsive design: http://www.smashingmagazine.com/responsive-web-design-guidelines-tutorials/
These frameworks look interesting:
http://framelessgrid.com/
http://webexpedition18.com/articles/responsive-css-frameworks/
http://foundation.zurb.com/
I have a complex web application which is based on dijit.layout. You will find a good example of the structure here (check the examples).
As you can see there is no full page scrolling only scrolling inside the layout boxes. All layout areas have overflow:auto, which means they enable scrolling when the layout areas content is larger than the available area space.
The problem is, iOS devices like iPad/iPhone/iPod touch don't support scrolling inside HTML only for a full page.
Is there any generic way to make a digit.layout application compatible for iOS and other touch devices? For example extend the layout areas depending on the length of the content.
did you already find a solution to this problem? I played around with a combination of dojox.mobile.ScrollableView and dijit.layout but end up having two scrollbars.