I started off a month ago and I have trouble understanding the grid system on CSS.
I can to create some classes on my html to later edit on my CSS but it does not seem to work. I want to add some images so they cover that entire section of the page while other to appear small (images of products I am selling).
Any advice on where to learn this efficiently?
I found this reference super helpful when trying to implement a grid.
https://grid.malven.co/
On laying out some images on a grid, it helps me to remember that I can use a combination of different positioning techniques inside the grid boxes. I also found that this class on css for developers is super detailed and helpful.
I found this site that brings several examples of using the grid: https://css-tricks.com/snippets/css/complete-guide-grid/
The "grid-template-areas" section seems to provide a solution for what you want, by referencing the names of the grid areas which are specified with the grid-area property. The syntax itself provides a visualization of the structure of the grid.
I am looking to recreate this type of view for a list of 'offers' as groupons have when you visit the site on mobile:
As we can see they seem to be using a new unordered list item for each offer box, and then the offer itself is contained within a single list item, which has a link, image, header, and a table for the details about the bottom. This looks good and seems to work nicely.
I want to recreate this using bootstrap - in such a way that when I then view the layout on my desktop, the site scales up and perhaps new fields / details which were not visible in the example above suddenly become visible.
here, they are using tables. But, It is the old way, you can redesign itself with bootstrap. The only thing you should know is bootstrap.
they have a great documentation of their classes and what they do.
for example:- if you need an element to disappear in mobiles and appear in tabs and machines, you can use .sm-hidden class.
Give it a try.
I am working on creating my site using Yahoo's Pure CSS modules(http://purecss.io/). I really like it so far. One thing I don't understand is how the media queries fit into it. Here is what it says on their grids page:
Default Media Queries
When using Responsive Grids, you can control how the grid behaves at
specific breakpoints by adding class names. Pure's default responsive
grids comes with the following class names and media query
breakpoints.
So I want to add some custom handling at the "xl" breakpoint. How do I do that? Also, how do I know which class to put my content into? I have used media queries before. I just can't quite wrap my head around how they did it here.
Hi i my self use pure because bootstrap is boring and bloated why not try something out of the box...the break point is easy on the xl query place your css class be that pures grid even they all can be broken so lets say .sidebar you want it gone on xl place that clas there..you can costumize the breakpoint on their site as well for different screen size if thats what your looking for. I hope this helps...but I am not sure if you are using WordPress but my purecss wp theme will be out shortly for developers and designers!
I find Bootstrap insufficiently flexible. For example there's not a straightforward way to change font or line-height properties. I want a one-line method to change these properties.
What else can I use similar to Bootstrap (that I'm sure will not be as rich)? I just need some style collections that are flexible for those kinds of changes.
You can change all of the typography values (and pretty much everything else) on the Customize Page. The links are in the toolbar at the top of most pages of the Bootstrap site.
I'm working on a web app that currently has a table-based layout. Ideally I'd like to go to pure css, or failing that, a hybrid tables-and-css layout* .
I've banged my head against the wall trying to understand css layouts and positioning. The main problem I'm encountering is that, depending on the state of the app, I have different things appearing in a 'section' of the layout -- what might be contained in a div or table. For instance, I might have some text and links, and then after user interaction, there might be a form, a table, some images, different text, etc. Anytime I find a css solution, it is for a fixed-element layout, or works in a specific case, etc. They're not robust solutions, in other words.
From this In Search of the One True Layout, the author about "Vertical placement of elements across grids/columns": "Designers face the choice of relying on elements being a particular height, resorting to tables or simply not bothering." Is this true? In my app, I can't rely on elements being a particular height.
Do I fall back on tables when I have elements of various hieghts ( which is quite a bit of the site, actually). I noticed that quite a bit of sites done by well-respected people and organizations use tables for layout in certain places, and not just for tabular data! This site included.
The chances are that there are CSS techniques to achieve what you want, but they may not be obvious if using CSS for complex layouts is new to you.
In your case, to 'get it done', I would recommend a hybrid type layout, and not feel bad about using a table to layout the pieces of the application that require those particular behaviours.
If it is particularly complex and difficult than a table might be the best and simplest approach even for the CSS expert.
Dynamic heights are only a problem if you need to implement a special effect of soem sort or a background image and oftent there are ways around that. It really depends on the Visual Design and what needs to be done to make each "block" flexible to use. Sometimes things arent possible but most of the time they are - they jsut tend to add complexity to the markup. But even that added complexity is easier for me to understand than nested tables :-)
My advice if you want to get things done and spend a ridiculous amount of time on css layout, browser compatibility, CSS reset, fonts:
write simple, valid, semantic HTML
use a simple CSS framework (like blueprint). You will rely on a simple grid system for positioning and layout.
add CSS classes to your HTML
add your custom CSS for colors, backgrounds...
Please reconsider using a table layout 'to get it done'; you will be disappointed, especially if you want to add some JS magic later.
I use CSS layouts for my web apps. But, my apps don't have wildly varying information, so I can set the content area and not have to worry about the layout looking "off" because a column is way out of balance with the rest of the content.
If you're having trouble with CSS layout and positioning, I'd suggest tables first, learn more about CSS/HTML positioning, and then convert your layout LATER. I'm sure that it's made for a frustrating experience learning CSS on a "real" project.
In the meantime, get some really good sources for CSS: books by Andy Budd, Simon Collison, Eric Meyer, et. al. Also, go to their blogs and dig into the archives. A really good book for CSS layout, positioning and general use is Beginning CSS Web Development by Simon Collison from APress. All the ins and outs with great working examples.