I am using the latest Foundation (3.x). What's the best way to also use KendoUI and leverage the responsive features of Zurb while also getting the JS bits of Kendo (such as charting).
Does anyone have experience in this, especially with the mobile version of sites? What should I watch out for?
Thanks
Use Zurb 4 and the latest Kendo UI.
Go into Zurb's app.scss file
Turn off (comment out) these components: forms, custom-forms, and tables
if you find any weirdness, you can use this helper CSS as a CSS Fix, and just add the class to a DIV wrapped around your kendo widget:
.foundation-kendo *, .foundation-kendo *:before, .foundation-kendo *:after {
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
e.g.
<div class="foundation-kendo">
<div id="grid"></div>
</div>
The above CSS hack should remain fairly unnecessary if you follow step 3.
I was also really interested to work with KendoUI and Foundation toghether, since I much prefer the last one for responsive sites, instead of Bootstrap.
So I started to check in the last couple of days if it was possible and there wasn't any design style issues between KendoUI and Foundation. Well some issues came up and here is how I fixed them:
Using Foundation 4.3.1 and KendoUI Web 2013 Q2:
KendoGrid widget: the header is too high
simply remove the Table class-style support in Foundation
KendoDropDownList widget and similar (i.e. ComboBox, DatePicker, etc...) and Drag n'Drop in KendoGrid: popup window too far from the literal, drag n'drop too far from the pointer
body {
position: static;
}
*[class*="k-"] {
-moz-box-sizing: content-box !important;
-webkit-box-sizing: content-box !important;
box-sizing: content-box !important;
}
table {
margin-bottom: 0px!important;
}
This is the code you have to add in order to have almost everything ok for KendoUI (I hope, so far I didn't find any gliches yet). Be careful about the last code, since it's gonna apply the style to all the tags that have classes that starts with "k-" (it's a convention in KendoUI Team to put a "k-" to all the names).
Hope this helps! :)
You might try using Foundation 4-just released. They moved from using jQuery to Zepto, which may eliminate conflicts. Nothing wrong with Bootstrap, though.
Not sure this is the answer you want to hear...nor am I sure it is the correct answer...but here is my experience.
I have an existing project that we have been working on which uses Zurb Foundation 3. It is an MVC4 web app and we are using VS2012. We are really liking the responsive design stuff from Foundation...but we wanted to use a couple of the Kendo Widgets.
After getting my feet wet learning/experimenting with the widgets in a standard MVC project without Foundation, I decided to try to put Kendo into the project with Foundation. I spent half day trying to get it to work and never could get the two working together. If I pull the foundation stuff out, the Kendo stuff works just fine. Rather than spend anymore time working on trying to get this working we are looking at possibly just moving to twitter bootstrap instead.
According to this blog http://www.kendoui.com/blogs/teamblog/posts/13-01-18/easy_application_layout_with_twitter_bootstrap.aspx the Kendo stuff should work well with bootrap and for our purposes bootstrap would work just as well in our app as Foundation did.
Good Luck!
Related
First, I'm totally new to GTK and would not consider myself very experienced with C.
I'm currently working on a project where I have to build a GTK GUI in C. I've started tinkering around with the GTK library, but it seems I can't find Widgets that would match the exact look of the UI I have to produce, especially while building the layout with existing Widgets.
Since I'm not very familiar with GTK, I was wondering if maybe I should build my own widget for what I would like to do? I've added an image of the render I would like to achieve:
Is it possible to achieve this look without building a custom widget?
Are there libraries that exists on top of GTK with more Widgets available that would help me with this?
Thank you.
Almost all of what you've got there can be done with the built-in widgets, except maybe the phone icon's offset from the top of that container. You should use built-in widgets whenever possible.
What you really need is CSS styling. This will allow you to customize the look of existing widgets. You can style all of a particular type of widget, or you can add classes to individual widgets in your UI file and apply styles to those.
For example, you might want to add a notification-row class with some CSS like:
.notification-row {
background-color: grey;
border-radius: 6px;
}
Here's a list of available CSS properties.
To add a CSS file to your program, add it to your .gresources.xml file, then follow the instructions in the description of GtkCssProvider.
While investigating the Google SEO issue with respect to not having a mobile web site. I've learned recently that lack of proper mobile site would reduce the search ratings, and a different content for a mobile and a desktop sites might hurt your SEO as well.
Currently we have a MVC site that wasn't designed to be responsive. I don’t want to create something that will require more maintenance. (IE new mobile site or creating new views for mobile versions..).
I've learned that converting the site to be responsive is technically possible but not recommended for the following two reasons:
The current site might not work well on small screens.(CSS issues, modifying the CSS might be a pain and risky).
We have too much stuff on the current site.
While googling, I found that this would be the best way to go.
Use the same controllers and views for both desktop and mobile browsers, but render the views with different Razor layouts depending on the device type. This option will require new CSS and new _Layout page for mobile devices.
and then modify the _ViewStart to be
Layout = Request.Browser.IsMobileDevice ? "~/Views/Shared/_LayoutMobile.cshtml" :"~/Views/Shared/_Layout.cshtml";
I would like to proceed with above approach, but If any one has any experience in this area, I would like to know the best practices, recommended approaches, and technical possibilities to achieve this.
There are typically three methods for handling Responsive Design :
Using A Responsive Design Framework
Using CSS Media Queries
Using Percentages
The ease of using each of these will ultimately be based on how complex your existing Project is and how much you are willing to do and change to make it responsive.
Consider a Responsive Design Framework (basically revising and updating all of the markup of your existing project)
This will allow your site or application to run on basically any device (and look nice doing so) regardless of platform as long as it had an internet browser to access it and will make it much easier to develop as you will only need to create your page within one area and the beauty of Responsive Design is that it will style your pages appropriately based on the current platform and device.
It isn't really automatic and you will likely have to tinker with it a bit to get everything working and looking just as it should, but it is probably the best method of handling a situation like this (depending on the controls that you are using). There are Reponsive Design frameworks and boilerplates that you can use to implement these into your site such as Twitter Bootstrap.
These could fairly easily be integrated into a Web Forms, MVC or Web Pages and would basically be all that you would need to use :
Great MSDN Article on Responsive Design
Tutorial on Integrating Twitter Boostrap into ASP.NET Web Forms
Beautify your ASP.NET Application with Twitter Bootstrap
The primary issue with using a framework here is that you already have your site designed and up and running. These frameworks work incredibly well when you use them from the beginning of the development of a project, however they will require a great deal more work when attempting to migrate an existing project to use them.
These frameworks have very specific classes and styles that actually do a ton of different things regarding responsive design and you'll have to use these new classes to replace basically all of your existing ones. It won't be the easiest migration, but it is certainly isn't impossible by any means and would be my recommendation.
Using CSS Media Queries (a neccessity if you want to handle creating this responsiveness without a framework, but more work on your part)
You can also accomplish this using CSS Media Queries, which target specific resolutions and screen sizes and style elements accordingly, however this is a bit more manual and you would have to write queries for each of the sizes that you are targeting.
These will take a quite a bit more work than using a framework as you will have to write queries to target all of the different major resolutions that you want and then within each of these actually resize some of your elements manually. You'll have to basically create a mini-stylesheet or media query for each of the resolutions that you want to target and manually enter the values that you want to use for that specific resolution.
I've done this more "hands-on" form of Responsive Design previously, but it is much easier to let something tried and proven like one of the frameworks handle it for you. Check out the very simple example below that will demonstrate how CSS Media Queries work :
<style type='text/css'>
/* Only affects 1600px width */
#media only screen and (max-width: 1600px){ body { background: green; }}
/* Only affects 1200px width */
#media only screen and (max-width: 1200px){ body { background: blue; }}
/* Only affects 900px width */
#media only screen and (max-width: 900px){ body { background: yellow; }}
/* Only affects 600px width */
#media only screen and (max-width: 600px){ body { background: purple; }}
/* Only affects 400px width */
#media only screen and (max-width: 400px){ body { background: orange; }}
</style>
and as you resize your browser / window, the styles will be applied accordingly.
Example (Editable Example)
Using Percentages (another option to provide a "responsive" feel, but it will require CSS Media Queries as well to be truly "responsive")
You could also consider migrating everything to use percentage-based sizing instead of explicit pixel sizes, but this is will be even more work than implementing the above media queries.
This will basically require you to scale everything on your site using percentages and defining minimum and maximum heights and widths for items. You'll likely have to use this in combination with media queries to get a truly effective solution.
ASP.NET MVC applications by default is responsive using Bootstrap.
http://weblogs.asp.net/jongalloway/two-free-video-courses-intro-to-asp-net-mvc-and-responsive-ui-with-bootstrap
I am confused with angular material design and material css.
Why do both have different layout and grids?
What is the equivalent for bootstrap container in angular material design?
Shall I use angular material design for my project comparing with bootstrap?
The main reason to go with Angular Material is because it is based on Flexible Box Layout specification, witch is a W3C standard Flexible Box.
The closer tag for bootstrap container could be: <div layout="row" layout-wrap></div>
Angular Material Design does not have an exact equivalent to a Bootstrap container because Material Design (AMD) is more flexible. A container has 8 sections. AMD has the layout and flex attributes. AMD's flex can increment by 5% (20 sections in BS) or by 33 and 66 (2 sections) or by combinations of 5%, 33% and 66%, which can go to more than 100% (most any number of sections) in which case multiple lines are automatically created. The best single page with examples that I've found, so far, is https://material.angularjs.org/#/layout/grid Click on the Source box above each example to get more specifics about AMD's HTML syntax for layout and flex.
You have further flexibility via Child Alignment, which controls spacing between each div in horizontal and vertical. Click the radio buttons on that page to see how divs are centered, or spread, or pushed to one end, or lifted to the top, etc.
The HTML syntax displayed will work on a set sized page. If you want the equivalent of media-queries to change sizes for different devices, you have some further coding to do to make angular controllers. Look at the DEMOS examples for various components to get an idea.
Angular Material grid > Bootstrap grid, especially for Angular applications. Bootstrap grid uses float, which is outdated compared to flexible box model. float replaced the horrendous table layouts, but now flexible box model is starting to push float aside (for grid layouts). Just note that you need to add certain suffixes in your CSS for older browsers. See this CSS Tricks article for an example of how to implement flex for older browsers. Bootstrap grid applications also require you to create an endless amount of divs, which looks terrible and should be avoided in any application using HTML5. Technically, you could write your own Angular directives to replace certain divs, and group them based on what or how they display, but then why not just use Angular Material when they have already done that for you?
Materialize is a modern responsiveCSS framework based on Material Design by Google.
And
Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first web sites.
So if you want new modern design i think you should go with material design. It has very nice animation too.
I was looking for an answer for the same question. I see some great comments here. Few additions as of December 2016: Bootstrap does have Flexbox support now. Check this link also check this link to make bootstrap use Flexbox by default by just changing a flag or download bootstrap-flex.css. As far as, grid support in material goes, use a grid demo here, there is a material flex-layout engine which looks great (I haven't tried it yet). It is very close to bootstrap grid. Check this link.
if you work with Angular, instead of using grid you should rather use flexbox, Angular provides a package for it:
https://github.com/angular/flex-layout
A huge advantage using it is the fact that you can use typescript public variables to the flex-layout directives (you can't do that with bootstrap). It also includes Observables for media query changes.
Recently, in working with AngularJS, I really like many of the features, like creating custom abstract data factories, etc.
KendoUI also has similar features like MVVM, SPA routes, etc. that AngularJS offers, so I'm curious about what the benefits are of mixing the two (other than the rich UI features of KendoUI)?
-- Update --
I'm asking this question for clarification, and for those who may be slightly confused about the benefits of each, and why one would use both in a project, rather than one over the other.
For example - Javascript unit testing capabilities (simply done with Angular controllers, but have not seen anyone doing this with KendoUI).
It seems like Kendo is trying to do it all, but does UI best.
Thanks.
-- Update --
Since writing this question I have gone through and integrated the KendoUI grid with Angular using OData and have written a tutorial here at www.whatsinyourlunch.com on how to accomplish this, in hopes that this will be useful for others.
The stack is AngularJS, KendoUI, OData, WebAPI2, .Net MVC5, C#, Entity Framework accessed through a generic repository.
I know this is old but here is my two cents. The more you use Angular the more you will realize you don't need Kendo. The Kendo/Angular integration is a bit of a hack but it seems to get the job done. The only reason I find to use Kendo is the grid. I've tried the Angular grids out there and they are riddled with bugs and formatting issues.
I think it's important not to be a purist and to just use whatever combination of tools that accomplish what you need. I tend to try to move away from being dependent on paid commercial libraries but the grid is just solid. Any paid product will probably have more support and upkeep, as well as personal access to the development team (vs. well maintained free products from large companies or single developer projects that waste away). I have seen so many great free products get abandoned. However, if you want a great free grid and can't stomach paying Telerik $1000.00 for just a grid, DataTables.net is a great alternative and what I currently use.
You have to love Telerik's support which is the best reason to use their stuff in my opinion. They are lacking some things in Kendo like a good date range calendar, tag cloud, etc. The charts are also lacking compared to say Highcharts. I use the date range calendar from Keith Wood, although he doesn't seem to respond to emails. I found some great angular controls for other things like drop downs, etc. as well. I used to not understand why people use a hodge podge of stuff, but it is the best tool for the job that is important.
I personally would not go any further than using the rich UI features of KendoUI in Angular directives. The rest should be Angular. Or use KendoUI exclusively.
Mixing them works fine. You don't have to use all of the framework code (MVVM, etc.) included with Kendo and can just focus on the rich UI features. We use several of their controls, including a highly customized version of the grid. Angular is perfect for this because we built directives to wrap the Kendo controls and encapsulate the 80% configuration that happens every time so the developer could focus on the 20% that is different in their page/module/whatever. Our project successfully engages over 20 developers in a distributed team on a project with tens of thousands of lines of code and we've had great success using the UI features of Kendo with Angular.
On our current project we're using both Angular and Kendo (mainly for the grid). We didn't mix the two and this would also be my suggestion. Angular should be the one responsible for your application logic and Kendo should only be concerned with managing the widgets.
Kendo provides there own kendo-angular library, which contains directives for most of their widgets.
Here are a couple of points of my experience which doesn't favor the mixing of KendoUI with AngularJs:
Though there are kendo directives for AngularJs, a lot of UI related stuff will end up in the controller (configuration, events, complex templates) and it's difficult to keep jQuery out of it.
The initialization and display of kendo components does add a serious time penalty to each page (grid, tabstrip, ...)
Events and method arguments are not coherent across the kendo framework (i.e. select method of grid vs listview vs combobox)
The use of templates with the grid (or listview) or responding to grid events does not feel like AngularJs.
Components behave differently than the native controls they try to replace (i.e. event order and databinding of combobox vs native select)
As soon as the look and feel of the kendo components has to be customized, one has to become familiar with the CSS classes used by kendo.
The KendoUI grid is great, but if the project doesn't need it, there's nothing to be gained by mixing the two.
I think mixing of them is not a good approach. you should ask yourself a question "witch one is more required and useful in my project"
I had decided to use kendo beside angular because of its rich grid components. But I canceled it.
The main controls of kendoUI is grid. But you need to watch every element of it to have a complete binding and it make it slow. Also dataItem of a row in grid does not return the original data.
you need to watch paging, filtering , sorting ....
But for other controls of kendo we have fewer problems.
I am in the process of getting familiar with the Twitter Bootstrap framework and also Flat UI but I am having some unexpected functionality with a responsive layout. I don't think the problem is caused by Flat UI as the same thing happens even when removing those references.
I have 2 columns which are both 50% width using class="span6". At full screen (large monitor) the design looks how I would expect but if I slowly decrease my browser width the columns go from floated to stacked, then back to floated and then finally back to stacked again! I would expect them to remain floated until the screen width is not sufficient and then change to stacked so I can't understand the multiple changes. I have set up a little demo here.
Can anybody please provide any reasons why this would be happening?
Thanks!
You are using the 3.0.0 version of bootstrap for bootstrap.css and 2.3.2 for the bootstrap-responsive.css.
Bootstrap 3.0 has deprecated the use of span* in the CSS now. You need to download and use 2.3.2 for the bootstrap.css as well (if you intend to use span* etc)
You can get the 2.3.2 bootstrap.css from here, you should use that and replace the current 3.0.0 bootstrap.css you are using.