I am new to CSS Grid Layout.
Problems I am facing while trying to achieve following using css grids
Unable to achieve responsive design. (Responsiveness doesn't go well with different screen size ratios. Example 4:3 or 16:9)
It is well known most of things doesn't go well when testing the application in Internet Explorer (Here I am talking about IE11)
(Edit: Excluded, until IE supports CSS grid layout)
It is a web tool dashboard, scroll bar should not appear in any condition while using in a full screen view.
Restricted to use third party plug-in or poly-fills. (Because of commercial use)
Restricted to use negative values in css properties.
(Edit: I know it can be achieved using media queries plus other CSS layout properties. Here I am trying to achieve this with minimal and cleaner code). Thanks
When you use relative units it will resize according to your screen size. For different layouts you still need media queries
CSS-grid is not fully supported by IE11. That usually isn't a problem as you should use a mobile-first approach anyways and mobile websites usually don't look bad on desktop anyways
There is nothing special about the grid layout here. (If anything, it makes it easier: media queries + absolute units = magic) Either use media queries or overflow: hidden;
Restricted to use third party plug-in or poly-fills. Ähm no? I don't understand what you mean
Restricted to use negative values in css properties. Again, no, you're generally not? What's the problem here?
Related
I want to achieve a zoom style like on stackoverflow. When you zoom in the important content gets centered and takes 100% of the width and everything on the sides are hidden.
Is this achievable by pure CSS or do I need to use JS? My idea would be to check per JS the screen size and render dependant on this which div class I render.
The terminology you are looking for is "responsive design". It involves treating everything on the page as cells that fall below each other into a column as the screen size gets smaller. This can be done in many ways, all css, no javascript required. The best way that I have found is to use flexbox for layouts. The second best, and in fact a fallback for older browsers that don't support flexbox, is to use display: inline-block. I typically ignore any browsers that don't support either flexbox or inline-block, but if you have to support very old cruddy browsers, you can use floats for this purpose. Media queries should also be mentioned, which allow you to change your css rules at breakpoints. I try to avoid these as much as possible, because they don't allow for continuous flow as a page's size changes, but sometimes they are necessary if you can't find any other way. However, flexbox normally handles everything without needing them. Css grid is also worth mentioning, though I have not found it to be very useful for responsive design, but it's worth looking into.
There are very few cases where I have found javascript to be necessary for layout. One of these is if you want the font size to be a function of the container dimensions. Normally though, I'd just stick to css for layout.
I have developed my own introductory website in ASP.NET. I have used only HTML and CSS as I am not good in website designing. But the website is not looking good on mobile phone browser. Can anybody suggest me how can I use/update the same code so that it looks fine in mobile phone browser also without using bootstrapping explicitly?
My website link.
Asp.NET has nothing to do here with Responsive Web Design.
Just create CSS correctly that sets the elements where you want them according to the resolution and your good to go.
To target specific resolution use media queries: resolution
#media screen and (min-width: 480px) {
a {
color: red;
}
}
Also you can use your browser developer tools to see how your page looks in different screen sizes
Even if you do not want to use bootstrap or foundation, looking at their CSS to see how it operates is how I first learned to create responsive pages.
The core of bootstrap is referencing the page width as Pawel Lukasik mentioned above. At it's simplest above a certain width will have 1 style and below a certain width it will have another that determines the postioning / widths / floats of that content on the page.
In the case of bootstrap they have identified these various styles using the various 'grid options'
http://getbootstrap.com/css/#grid-example-basic
I suggest you take a look at the following link. It will give you a rundown on media queries that are used in CSS for responsive design. As mentioned above it is also a very good idea to take a look at the code for Bootstrap. It will give you an idea if how it achieves responsiveness, you can then try to create your own CSS to achieve the desired outcome.
I am a newbie in UX/UI. I see that html5 also says responsive design and Bootstrap also telling the same. So which1 do i use for my layout. What is beneficial over the other. I want to get my basics right.
HTML5 and Bootstrap are totally different entities, only when you use them together in conjunction that you get a responsive site. Bootstrap is a CSS framework that allows you to build up a responsive site using predefined css classes and some javascript.
It depends on what you want.
If you want everything to write youself, then plain HTML5. On the other hand there a Bootstrap - CSS framework which does most of boring stuff and also uses HTML5.
Basically, you can use Bootstrap with HTML5. If you want to do everything by your own while keeping the site light-weight, then you can do plain HTML5-CSS. But Bootstrap handles almost all of UI responsiveness, at the expense of weight.
In the end, it's your call if you want to create a light-weight and self-written design(which is going to be harder) or add a little more weight, for a great number of functionalities you can just basically apply in ease.
Html5 isn't responsive but bootstrap is. Responsive isn't a HTML thing but a CSS thing. Usually you want users to be able to view your apps from different devices without any problems (such as cluttering) and for that porpouse we've got responsive and adaptative (both of which are CSS related).
Let's say you've got a div tag and you give it width and height propperties, such as 500x500. In large desktop's screens it could seem to be normal size, but on mobile phones it could take the entire screen or even more. So if you give it its size as a percentage such as width: 10%; and height: 10%; it would be a responsive-like solution.
Then it is bootstrap as a responsive framework with has its grid layout system that allows you to give different porcentages to the same HTML tag in different devices, using class="col-<device>-<columns>" (of course you could use more than 1 class for the same HTML tag). Bootstrap has 4 devices:
xs: mobiles
sm: tablets
md: desktops
lg: TVs
And it also has 12 colums for each row (it doesn't handle height manually, height increases as needed unless you manually define it in your css). So , our previous example could end being something like:
<div class="row">
<div class="col-xs-10 col-sm-8 col-md-9 col-lg-5"></div>
</div>
Here you've got a codepen example. (Try resizing its width)
And it would take different sizes for different devices. So at this point you could notice 2 things, there is something more (beyond of porcentages/responsiveness) going on here, and I still haven't mention what adaptative is. Ok, adaptative is just conditionally using some CSS rules for different screen sizes (not neccesarely as porcentages) by using media queries an example of adaptative layout would be Youtube and an example of responsive layout would be Twitter.
In addition bootstrap also provides you with some js functionality, some default css components (such as navigator, tables, and much more), and also a set of font-icons.
Functionally the answer is that Bootstrap is more complete, it has more buttons, menus, slide shows, etc. that you can quickly pick up and use. The downside is that the result will look like a Bootstrap site (just as you can usually tell a WordPress site).
HTML5 (I presume you mean HTML5 Boilerplate otherwise you are comparing apples to oranges), is more basic, and you will need to edit the HTML and CSS more. On the other hand, because it is more basic, you can have more flexibility with it.
For the life of me, I can't quite figure out how this template is responsive without any extensive use of media-queries.
https://02dc74ce3e31e56a52ebcc845dca58e87283aabe.googledrive.com/host/0Bxbofwq0kd4ReUt2YWVOYmt3WVU/
Anyone have any ideas?
I bought this template, and the responsiveness kinda broke while I was applying it and the author is not responding to emails.
I can't quite figure out how this looks so elegant on small screens particularly.
A webpage doesn't need to use media queries to be responsive. Responsive by definition means the elements adapt or "respond" to your device or screen size, instead of using a fixed or pre-defined width/height/arrangement regardless of the viewing device.
The link you pasted is certainly a "responsive" site, and they achieve this by allowing elements to have a fluid width (only with a max-width on the container, to make sure it doesn't keep growing if you have a very large screen, since that would look funny).
The way they do it makes your CSS code very simple and uncluttered from various viewport pixel definitions and media queries.
You can simply set max-width to prevent an element to be wider than required on large screens. Here is fiddle: http://jsfiddle.net/ur3futxp/
The site uses twitter bootstrap to make the site responsive. Bootstrap by default makes a site responsive using media queries if you use it grid system. Please refer the documentation http://getbootstrap.com/css/
This site is using twitter bootstrap framework which is developed to make the site responsive with all the devices without using any media queries as it already have predefined all the media queries in its framework and if you want to any more things to get responsive you must add your classes in your style.css file and make it sure that it will not conflict with twitter bootstrap predefined classes and you can do that by reviewing this site
http://getbootstrap.com
Does anyone know how to accomplish a different layout based on the browser width, like these two sites?
http://sasquatchfestival.com/
http://css-tricks.com/
I've tried to Google it, look through Stackoverflow questions, and look at their code but I think I am missing something. It actually rearranges and resizes some elements based on the width of the window, but how? Javascript?
Sorry if my search skills are just failing, but I'm not really sure what to look up, the "similar questions" here don't seem related, and even CSS-Tricks doesn't have the info in an easy to find place.
You don't need to use JS to detect browser width. You can simply use CSS media queries to alter the layout.
For example:
#media screen and (max-width: 1280px) {
... selector(s) here ...
}
Will apply CSS only to screens that are at most 1280px wide.
See also:
http://www.w3.org/TR/css3-mediaqueries/
http://reference.sitepoint.com/css/mediaqueries
You can use CSS3 media queries to deliver different styles based on the screen width. See here for more info: http://www.css3.info/preview/media-queries/
If you look at the CSS source of the sasquatchfestival.com site, for example, you can see what they're doing: http://sasquatchfestival.com/css/screen.css?v=1328828795. Search for "#media only screen" and you'll see they're delivering different CSS for widths below 768px, between 768-1024px, and above 1024px.
You can reinvent the wheel or merely build/rebuild your web site using one of the many responsive frameworks that are available. I have used both 'Skeleton' and 'Bootstrap by Twitter' Their frameworks can be found at...
Skeleton... [http://www.getskeleton.com/][1]
Bootstrap... [http://twitter.github.com/bootstrap/][2]
I have built sites using each...
Skeleton... [http://72t.net][3]
Bootstrap... [http://ReactiveWebDesign.net][4]
I'm still trying to decide which I prefer, but right now boot strap seems to offer more features.
May be a little bit of jMasonry in there, but it also looks a little like what Twitter Bootstrap provides in rails, it might be worth pouring over their static CSS version for answers.