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.
Related
I recently started using Tailwind CSS and I notice it states (and recommends) to use unprefixed classes for mobile and prefixed classes for larger screens.
This is in contrast to Bootstrap which does the exact opposite.
What are the pros and cons of those mobile-first approach?
Quoting bootstrap 5.0 official documentation here
Mobile first, responsive design is the goal. Bootstrap’s CSS aims to apply the bare minimum of styles to make a layout work at the smallest breakpoint, and then layers on styles to adjust that design for larger devices. This optimizes your CSS, improves rendering time, and provides a great experience for your visitors.
Pretty much all the CSS frameworks use that kind of approach nowadays.
It's always easier to have some basic layout for smaller screen resolutions and bigger one adapted w/ some additional styling.
Also, this website is saying that 55.73% of the web traffic is mobile. Even the 41.46% of desktop stats do have some small enough resolutions to fit styling considered as "mobile" (like the 1280x720 one).
TLDR: make your website look good for the biggest amount of users possible with as less styling as possible, then apply specific CSS for wider resolutions.
I don't know any specific cons of starting by a mobile version but maybe the case in which your webapp is targeted towards an admin kind of layout, who will be used 95% of the time on a desktop.
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've finished a layout for the website I'm designing using DIVI and it looked perfect on my 1280x800 laptop resolution, but when I tried to display it on the bigger resolution (in this case 1920x1080) a lot of the elements (mainly the ones with left or right margins/paddings) were out of place. I've tried using percentages instead of pixels as my margin/padding values, but gave the same result.
What would be the best practice in going about designing responsive CSS layouts? Should I define fixed values for width of the containers? Will that solve the issues?
Should I focus on media queries? Define values for each resolution? Then again, there's the issue of resizing the window which again would make the whole media query solution obsolete. What are your suggestions?
RWD (Responsive Web Design) is an argument too broad to give you a single answer. Personally I love building my own web pages from scratch, without any page builder or something like that, and this's the tip I give you: first, try to build your own web pages by hand!
Three guidelines I can give you to build a responsive website are:
Use percentage values, no fixed values;
Use media queries;
Use the display: flex property to adapt the layout of webpages when the screen width changes;
With these advices I think you can build easily your responsive web pages.
There are many other factors to worry about: search, learn and get your hands dirty with code!
I'm planning to write a common component library with Vue.js 2.0 and hope the library can work on multiple platforms. This question is about the best practices when it comes to a component's style.
On the PC / browser, We usually write CSS for fixed-width or flow layout with px. On a mobile platform (webview or browser), We usually write the CSS for flexible layout with vw / rem.
I see, some components only suit either one ( PC or mobile platform ), but still some components are common and versatility, such as Button, GridView, InputField and so on.
For example, there is a Button component that has a default padding style. In order to better adaptability, should I set the padding value by what unit? px? rem? For the goal, what is the best practice to do the things?
In fact, this question is not only related to Vue, but it's relevant for any frameworks that allows developing components, such as: React, Angular, Ember, etc.
I suggest that you stop thinking of browser / PC layout and mobile apps as being different. As it looks, you can't be sure what form factor's going to come next for both of them. That's true even for platforms that have been proven to be consistent, such as iPhone / iOS.
Responsive web design is the same in both environments, your layouts should be 'prepared' for a change in form factor.
Responsive web design is not different from React to Angular or anything in between. The only thing that differs is how CSS actually gets in your app.
No matter what you're designing for, you should:
Respond to the needs of the users and the devices they're using. The layout changes based on the size and capabilities of the device.
The basic principles are: Adapt, respond, and overcome.
Technical perspective
In Vue the way to go is: isolate components, including styles -> use scoped styles whenever possible <style scoped></style>.
Then (not specific to Vue), use fluid layouts however you want; some people choose %, some use vh / vw or em / rem. As long as it's fluid, you'll probably be fine. Many choose vh / vw for containers and use percentages afterwards, but there's no default pattern. With percentages, some people find it easier to mix in calc(), which can be a useful responsive tool.
Regarding your button example, it's probably a good idea to use rem or em as a default. However, for some components it might make sense to use px - don't be afraid to mix and match. This can save you a lot of code and there's no golden rule about it.
Your breakpoints shouldn't be shaped after devices, instead figure out where your content can be presented better. This way you'll build a more future-proof layout, which can turn out to be a nightmare to maintain.
Choose whatever makes you feel comfortable.
It's up to you to combine your tools and get the CSS to work for you / follow certain RWD patterns.
Wrap up
That being said, here are some patterns you can follow when building your responsive apps:
Mostly Fluid
Column Drop
Layout Shifter
Tiny Tweaks
Off Canvas
There's a course I encourage you to take if still in doubt.
In this course you'll learn the fundamentals of responsive web design with Google's Pete LePage! You'll create your own responsive web page that works well on any device - phone, tablet, desktop or anything in between. It might feel a bit slow in the beginning, but you'll learn a lot by the end of it.
I am building a responsive layout with Twitter Bootstrap and I am finding it difficult to keep the layout looking good across all sizes/devices.
In my early attempts I tried simply using the grid for placement, but page elements never ended up where I wanted them at different sizes. Now I am at the point where I am using media queries to override some of Bootstrap's styles and my own styles. This seems like it may cause a maintenance headaches down the road.
Rather than overriding styles I am thinking that I should add/remove the styles based on the screen's size by registering for media query events.
Can someone offer advice on good practices for adjusting the layout of a page at different screen sizes using Bootstrap?
I am looking for general advice, but I can post code and screenshots if that will help.
Update: Looks like media query events are not well supported.
Your on the right track. Use CSS media Queries. Firefox has a nice add on that enables you to adjust the page to a particular viewport so that you can see the changes pixel by pixel, though Im sure chrome would have something similar
There are no special tricks just because its bootstrap, as long as you have enabled the responsive stylesheet then you are pretty much good to go
This is a good place to start for media queries
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/