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.
Related
Is there a possibility to implement a responsive design for shiny apps? In the browser my app looks good and it can be used as intended. If I try to use it on a smartphone or a tablet it isn't usable without lots of scrolling.
Can I make my app responsive for different devices?
Thx and greetings
Derlu
Shiny is built upon Bootstrap which is able to factor in some device constraints such as using percentages as opposed to pixel values for width and height values of elements.
If you need further control over what is shown, I suggest either using a package like shinyMobile or by using a browser ready layout system such as flexboxes. Alternatively, you can use the flexdashboard package which is built so that "Components are intelligently re-sized to fill the browser and adapted for display on mobile devices." (from their website, although I have not personally used it to vouch for its ease of use)
If you want to really customize the experience and design two separate views for desktop and mobile, then you can refer to this post on how to distinguish device size.
I hope this helps, William
Are there any pre-build images that I could use when developing that will display a grid in the background of my browser?
This would make it easier to visualize the layout during development and make sure my design lines up correctly with a grid.
Does bootstrap have anything like this builtin that I can enable in the css?
If I understand you correctly you are looking for something like this?https://chrome.google.com/webstore/detail/bootstrap-grid-overlay/mnlklmelflkheijccafopdohgclfefcg
Apologies if this is not what you are after.
I have a webapp that I am making and it has some particular layout needs that are closer to an application than a website.
The layout has:
a left sidebar that is fixed to the left side of the browser window and has a static width until it stacks, this sidebar will have tabs in it
a content area that will expand to a certain max-width and then stop
a right side bar that is fixed the the right edge of the content
I've been struggling to really determine if using a grid system, like bootstrap, would be an appropriate fit for something like this. Having some rows/columns and a collapsible grid in the content area seems like it would make sense, but in the sidebars it seems like its best to not use a grid system at all. I don't particularly like the idea doing some layout in the html with bootstrap3 and some in css.
Basically my app has the same layout as http://qz.com/ and I want similar responsive design breaks, and with that I would like to know if there is one or more css frameworks that support that type of layout with little overriding.
if you have some experience with resposive design and media queries, i would code it myself to avoid the thousands of lines of unnecessary code that comes with frameworks/libraries. bootstrap is great, but it also requires a bit of effort to master, and it would be a bit overkill for this one layout (if i understand you correctly).
if you just need this one layout, i would really recommend you do code it from scratch (personally i'd use something like jQuery and LESS). i hope i understood your question correctly, and sorry if this was not very hands-on.
to sum it up: in my opinion you're probably better off coding it yourself, but bootstrap and other frameworks will provide valuable insight and inspiration for how to do it.
I had experience with Twitter Bootstrap and Foundation, and I personally think the only thing I want to use is their grid system. Other features are just bloated.
So I read about the prospect of a grid layout. All of the articles I found are oriented toward an 'artistic' explanation (golden ratio ect). I am a coder at heart, I need a clear & logical reason to use a grid layout (for example: 'columns can be easily stacked on top of each other on mobile screen, and expand horizontally on larger screens'). Can someone give me the pros and cons of applying a grid system to my website? Personally do you think using a grid system is good?
If the answer is yes, should I use a premade grid system like from Twitter Bootstrap/Foundation or just make one for my own? All of the other features are unnecessary for me an irrelevant to my problem.
Thanks! :D
I agree with #kunalbhat that this might not be the best area to ask this but since you did I will try to answer it.
The grids are designed allow for speed and adaptability. Speed in multiple senses. The first part of the speed is the speed of writing the code. You can easily get the layout you want when you are using the grid system and everything aligns correctly. You don't have to remember your tables and columns and col-spans, etc.
The second speed is modifying your code. Inevitably you will need to go back and make changes, with a grid this is easily to do. Changing a col-md-7 to a col-md-6 easily makes a little tweak in the layout of your page that can easily be tracked and performed.
You mentioned responsive design, both Bootstrap and Foundation have responsive grids. The grids will snap to different sizes based on the viewport size. However you have control as well. For example if you want something to take 1/12th the screen in desktop, 1/4th on a tablet, and 100% on a phone that is easily done with Bootstrap and Foundation, both have grid classes that target specific viewports.
The also provide visibility classes based on those viewports.
For the "bloated" part that is easily solved. Using SCSS you can easily only import portions of a library. For example for one project I was on I only imported the Grid and it was considerably smaller.
I happen to think that this is a SO question, simply because of one of the main cons of CSS grid systems: semantic.
I think semantic is important for a web developer and having a class named col-md-7 is not the most semantic thing to do.
But I like grids, because they are easy and quick to use, so I started to use LESS. Because it allows me to use variables and functions(mixins) in CSS, I can build my own grid system on my CSS rather then on my HTLM.
You can start on Frameless and customize your own 'classes'.
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