have managed to get jQuery Isotope and Zurb Foundation playing reasonably nicely but for some reason, at certain widths, when there is plenty of room for three columns (there should always be room in Foundation's responsive grid), only one or two columns display.
Here is a link to an example http://codepen.io/anon/pen/yraxh
Has anyone managed to get an example of this working with Foundation or Twitter Bootstrap, so that it works nicely within their grid?
Thanks.
I would also give "Packery" a try. It works better with percentage based layouts. It does not have all of the same features as Isotope but will most likely serve its purpose.
http://packery.metafizzy.co/
Related
I'm currently putting together a PoC for the web. I've done about 9 years of iOS development so I think in those contexts/concepts. What I need to build is something similar to a UIScrollView/CATiledLayer for the web.
I need to build out a tool that allows users to build their own flowcharts, something I've already built on iOS. I'm prototyping on the web and I'm not sure where to get started. I've played around with a few canvas libraries thus far.
I want to build something that can have a fixed viewport with other components rendered off-screen. The viewport has fixed bounds that you can expand and allows me to put subcomponents in the view and move them around if I'd like to.
My web/javascript experience is pretty much Ember, React and plain old ES5/ES6. My HTML skills aren't that strong and I think I may have missed something fundamental.
My goal is to have something that can work with an existing react stack my company uses. I'm happy to roll my own solution but would love to get advice about the right direction to pursue. I feel like I have almost nil domain knowledge in this area.
This JS library, Dracula should be of great help to you since you're working with drag and drop flowcharts. You can see a working example here. NOTE: This lib is based on SVG and doesn't use canvas.
Here's another beautiful live demo: Source code for JS Flowchart here
Also take a look at this Dragon drop fiddle
And regarding ScrollView in HTML, you can simply use divs with css styles overflow-y: scroll and/or overflow-x: scroll. Using flex layouts, apart from giving you mobile-like development feel, will help you have so much control over your layouts based on the screen size.
Hope this should get you started.
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 want to build a mobile site in Sencha which showing HTML content on a tablet device, containing many objects/divisions/containers with similar layouts and properties.
Take this example window:
Is there a best practice or recommended way to achieve reusability and DRY for writing those containers in Sencha Touch 2?
What types of objects would you use? Does it make sense to use HTML div objects + CSS?
Also, does it make sense to use Sencha in this case?
Here is how you would achieve that layout using Sencha Touch:
Unfortunately it is pretty hard to explain, but hopefully it makes sense.
I've also created a very simple example of this layout, viewable here: http://www.senchafiddle.com/#jxiA8 (make sure you press Run).
As for which objects/components; they would all be Ext.Containers. Ideally you would use the MVC structure to create custom classes (which would extend Ext.Container) for each of these items.
This is definitely a great use case for Sencha Touch. It is great for creating rich applications like this.
Best approach to render the list of items in the Orange and Yellow containers is probably with a DataView.
Relying on itemTpl to draw each item as per the official documentation of the Ext.dataview.DataView component or using an item renderer, as per the dive into dataview article. (Note that the code in that article may not work as sencha as changed a lot between the different beta versions - #rdougan's associated demo on github may be more recent).
I did expand on the layout code contributed by #rdougan to add an example of how to implement the Reusable dataviews (gist).
That demo code also contains a quickly baked solution for data injection (applyStore and injectStore), so to make it possible to define an "OrangeContainer" once and only once and pass down different data for the "highlighted" and "list" versions of the views at the top and bottom of the screen, respectively. I have no idea whether this is a good or reliable way to do it. I would be interested in feedback on this.
I am required to use the Extjs framework in my next project. So what features are available in it? There are so many javascript frameworks available in the market like the DOJO framework.
In my opinion, the principale avantage of ExtJS is the Store mecanism. you can have a store which hold your data (as a database table) and tell some UI widget to display data from the store.
this is great because:
you bind your widget to a store, then it automatically update it's ui when element in the store are added/modified/deleted
you can easily display your data in multiple form without worrying about updating echa place (each widget update itself automatically)
others thing done right:
event
ability to extend ExtJS classes
How it stands up to competition...
To see how Extjs stands up to its competitors, you could review the impressive comparison chart hosted on Wikipedia: http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks
Where to get it...
I'm sure you could find tons of information on http://www.extjs.com/. Keep in mind that you're going to pay a handsome fee to use Extjs.
How to learn it...
If your initial impression is good, you could peel into the Learning Center where you'll find API documentation, tutorials, and more.
To learn about different features, just have a look at the ExtJS Examples page. It should give you a good initial impression of what's available. There are grids, editable grids, tabbed views, trees, windows and other dialogs, menus, toolbars, etc.
Be aware that all of the functionality shown on the examples is not available out-of-the-box, though - some of them require you to include extensions (plugins) developed by the ExtJS user community.