I'm getting started on a Kendo UI Mobile project and have absolutely no idea how to create the layout I'm looking for. Heck, I have basically no idea how to do anything in Kendo UI.
I'd like to have 3 images in a view. An example of the layout is below.
I'm quite confused as to how to create this layout and have the images adapt to whatever mobile device or orientation is being used. A series of nested splitviews seems to be the way to accomplish this layout, but the kendo-ui site seems to indicate that the splitview is for tablets only.
Should I just grab a responsive grid framework and use that in conjunction with kendo-ui? I'd prefer to stick within the kendo-ui framework if this layout is possible.
You need to recognize that KendoUI isn't the solution for everything. For this problem/requirement, you should be looking for a simple HTML/CSS solution and not a widget such as the splitter.
You can use the bootstrap responsive (integrated in kendo ui) for html 5 mobile app.
I remember, you can use the grid system (css classes) and the img-responsive class
see the grid here : http://getbootstrap.com/css/#grid
see the responsive image here : http://getbootstrap.com/css/#images-responsive
in kendo it overrided but that's the same logic
Related
Container is responsive but header,footer and background image is not responsive. How to make that responsive?
If you'd rather not use a framework like Shahnad mentioned above, you can use the css property flex-box. This website perfectly explains how flex-box works.
Use Front end frameworks like Material-UI or bootstrap, design, etc...then use grid
Bootstrap- grid
Material-UI grid
Ant Design Grid
I am currently working on a reactjs web app. I was wondering how do I make it responsive? Whenever I change the size of my browser, all my components get messed up and flow onto each other. How do I stop that from happening in an easy way?
"Responsive Design" is huge part/topic in development. In my opinion its a long term process to learn. The more you build projects, the more you can learn.
But there are lots of UI libraries/frameworks are available to make it easier. And fortunately every of them have a React Version. Here are some of them -
ReactStrap
Semantic UI React
Material UI
Chakra
Tailwind CSS
BaseWeb
If you have time to learn more about responsive design, you can check out the official guidelines from Responsive web design basics.
Some common techniques you can follow -
Try to set width and height of your layout with percentage(%) value or vw & vh.
Use flexbox or grid.
Use css media query and follow the standard breakpoints.
If possible give your component max-width / max-height when necessary.
You can build a BaseLayout component which has max-width: 1920 and wrap other widgets with it. So, in a very big screen your app contains always width of 1920px.
Hope this will helpful.
Responsive is a design technique - No libary or tool will do it for you, because you need to choose which elements get hidden or resized etc. Having said that, a framework such as Bootstrap will make responsive design easier.
But you'll have to look around and learn the ropes - its a different methodology of web design.
I've just started using Semantic UI and I've hit a bit of a wall. I have 2 buttons in a div. These buttons should be large on desktop and small on mobile. I've followed the Semantic conventions and added the classes 'large desktop small mobile', but the buttons do not resize on mobile.
Is this just not a feature of Semantic UI, or am I missing something? The official documentation for Buttons doesn't seem to make mention of it, nor does the page on Responsive Elements.
https://react.semantic-ui.com/elements/button
According to this (https://github.com/Semantic-Org/Semantic-UI/issues/756) Semantic UI doesn't have classes that work like that (you might be thinking of bootstrap classes). The suggested work-around in that post is to utilize the #media for your classes.
I'm planning on designing my next website purely in the browser, but would like to use a grid system. I'm pretty new to grid systems, and when I've looked into them they all recommend I use Photoshop to layer the grid image over my design. If I want to use a grid system but not Photoshop, do I just use something like Susy to view the grid in the browser?
Thanks!
I've never seen a web grid system recommend using photoshop, so I'm not sure where you saw that - but you certainly can use Susy to view (and manage) your grid directly in the browser.
There is a frameset concept in HTML that we all know.
But I need that to be done in flex application.
How to do that ?
If what you're after is just a similar GUI component container layout than what you'd get using HTML frames, check out the DividedBox component (as well as its horizontal and vertical subclasses, HDividedBox and VDividedBox.) You can use the Flex 3 Style Explorer to see what they look and feel like. You can nest them inside each other just like with framesets.