I'm looking for some advice on how to approach creating a grid like the picture included. The images are going to be of different sizes.
It will be included in a wordpress theme that when images are uploaded to the specific post type they will display where the pictures are shown.
I was leaning towards a list with different styles for &:nth-of-type() styles.
TIA for any advice, all is appreciated.
I would try using something like Masonry (https://masonry.desandro.com/). Great library, very versatile. There are also frameworks that support grids on demand and nested grids, like SusyGrid (https://www.oddbird.net/susy/). I have used this successfully in the past for asymetrical and nested grid layouts.
Related
I'm trying to create a website as a portfolio for a graphic designer friend. I want to be able to import pictures of different sizes a bit like on this website https://victorthemes.com/themes/fraxos/home-version-two/
I tried replicating the design using bootstrap but the column system doesn't work in this case.
Upon further inspection, I realized that the position "top" and "left" move automatically depending on window size.
I was wondering if anyone could inform me on how to get to this result, plugin, template, JS or JQuery ... and if someone has an example I would be grateful to see it.
I'm looking for templates - including WordPress templates - but I can't really find what I want.
The website you are showing might as well be made with a grid plugin, like the one found here:
http://gridstackjs.com/
However, based on what you said about 'different photo sizes', you might be looking for what is called a masonry layout. Check the following plugin link that also includes examples:
https://masonry.desandro.com/
You could use UIkit for your framework -- it comes built in with a masonry style grid.
https://getuikit.com/docs/grid
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.
I have an assignment to display products in specific way that needs to be responsive as well,
this is what I need to achieve:
In your opinion and experience, in order to achieve that what method will you use?
Bunch of divs? table? ul/li?
I need little bit of direction before I'll start encoding the image. and I'm looking
for the most efficient way for the responsive design.
The most efficient way can only be done using bootstrap. A starter guide is found on the following site
http://getbootstrap.com/css/#tables
Just load the libraries in you project at the appropriate places and apply the classes to your tags to get the most responsive design you want.
Complex Grid Layout, Help!
I'm making a responsive website using bootstrap 3.0.2 and can't figure out the layout that is stated in the requirements document for the project. I made an image of what I need, and will give more detail, or update my question, if needed. I am open to any suggestion on how to accomplish this.
The Issue
This image describes what I need the design to look like at three different widths.
I should add, each box will be basically a div with an image, article title and summary within it.
Like to say ... in advanced
Id like to say thanks and apologize in advanced if the question is dumb or the answer is obvious. I have been a dev for a long time, but I'm new to responsive design and I've been banging my head on the wall trying to get this to work
The problematic part of your project is to make two smaller blocks side with a bigger one and make these two 50%. As far as I know, there are no mature cross-browser solutions that would accomplish that without javascript.
You may want to take a look at: Flexbox and for Comrade IE Flexie.
Another approach to accomplish the same could be using viewport dimensions. Just be aware of the browsers support.
All in all, if you can do that, I would suggest just using JS, with a fallback to css that will not break the site's look too much. Having just finished a project with similar requirements, I would just like to say good luck.
I just tested few of my webpages in cross browsers testing tool and found out that for lower resolutions all my divs were not coming separately.
Afters googling I found out about responsive griding.
After reading that I wanted to ask that whether responsive griding is nothing but making your web page responsive to different changes in screen sizes or does it have anything more to it
Also I am using purecss to make my web page responsive so I needed to know whether this is the right way or and what other ways are there to do this.
Pretty much, it's also about curtailing content based on your audience. Say that people on mobile don't need to read all the reviews on the page you would hide it or show it in a different way. Whether or not to use pure is completely your personal preference. There are a gargantuan amount of responsive frameworks, you should look at what they offer to your own goals of customization or extensibility. Foundation for example offers lovely JavaScript addons you can use for modals, sliders and navigation.
Good luck and please add to your question if you need to ask more!
Your choice to use pure I feel is a good one because its extremely light weight and style agnostic. While bootstrap and foundation are more popular choices they can be up to 10 to 20 times larger.
Check out TukTuk as well, its similar in nature to Pure:
http://tuktuk.tapquo.com/
Yes, you've got the right idea. You can use frameworks like Twitter Bootstrap, or Zurb Foundation, which have all the CSS you need for responsive grids. The basic idea is using CSS media queries to apply different CSS rules for different screen sizes. Javascript can also be used to show/hide features which might work better on mobile.