I am just trying to achieve the following CSS layout using 960 GS. Pretty much an newspaper article kind of layout. I am finding some problem with positioning.
I am using for your kind info
$ninesixty-grid-width: 978px;
$ninesixty-columns:12;
$ninesixty-gutter-width: 0px;
$ninesixty-class-separator: "-";
I could not achieve the newspaper kind of layout with the image inside the text. Please guide me out some links or pointers or code to achieve this. Let me know if you need futher info
You didn't say if you already had the grid or not, but anyway if you go to - grid generator site and enter the settings:
Firstly wrap the whole page in a container-12 then I would use the following classes on your divs for the layout:
NOTE:
I think you will need to put both elements in the first grid-6 to avoid a float issue. Other things to consider is that you don't have a gutter so elements will be tight up to each other. I would suggest amending the settings and adding a gutter.
Usually I would not add padding to the grid elements as that means you would need to edit the widths and that goes against the grid system.
Related
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 have started to use BEM with a site I am styling. I am trying to understand to how to far I should be breaking down components (blocks). For example, I have a header that has a navigation bar in there. The header is classed as a block but the navigation bar in there could be a new block or part of the header block. What is best advised here?
I was hoping to find some example sites that implement this sort of thing to get a good understanding of it but up until now, I have found nothing that appears to demonstrate it.
I am also working under the assumption that the component should layout its elements, so this is great, a good candidate for flexbox. The problem I face now is laying out the component in the page. Imagine having to layout 2 components side by side, another good candidate for flexbox but knowing where to place the display: flex ? also wouldn't the component then be in charge of placing itself within the page by using flex item css i.e. flex-shrink, flex-grow, basis, order etc..
This means that the parent is dictating where to place itself on the page and it isn't 100% an independent block now as it needs a display: flex on its container.
I did find some info with regards to file structure and wondered if this was something that could help? Maybe I am not fully understanding it - could the directory Layout be used for this?
This site uses the BEM methodology with Flexbox included.
http://fantube.me/
All the answers are on the https://en.bem.info.
how to far I should be breaking down components (blocks)
https://en.bem.info/methodology/quick-start/#should-i-create-a-block-or-an-element
it isn't 100% an independent block now
https://en.bem.info/methodology/css/#mixes
some info with regards to file structure
https://en.bem.info/methodology/filestructure/
I'm using Foundation for Apps (Not Foundation for Sites) and I'm having an issue where there is a lot of blank spacing on my divs.
I am using their new Grid System, which uses flexbox.
I 'thought' I was using their system correctly.
To help understand what I did, I have provided the code in jsfiddle: https://jsbin.com/nekubu/edit?html,css,output
Could someone help point out why there is all this spacing?
I suspect I am using this grid system in the wrong way, but the docs and examples are not extensive enough to get a good use case relevant to mine.
Background context:
First I added grid-blocks for 'rows' and grid-content for 'columns' as per the Bootstrap idea and then following them saying exactly in the Foundation for Apps docs. But then I realise this looked like it went totally wrong, as every div was scrollable and bunches together.
Content Blocks - Grid - Foundation for Apps Docs
"If basic blocks are the rows of a Foundation for Apps layout, then content blocks are the columns. They can be sized and re-ordered just like normal blocks, but they're meant to house actual content, not just more blocks."
So now I have the code you see in this jsfiddle. However, now there is all this spacing. I have tested this in Firefox and Chrome, and both have this issue.
Code: https://jsbin.com/nekubu/edit?html,css,output
Preview: https://jsbin.com/nekubu
The main problem with your code is that inside the div element with the class of main-page are 4 elements that each of them has a sizing classes that want to fill up the entire grid.
Inside a parent element container you can have elements that sum up to 12 and you assign 4*12 (4 child div elements with small-offset-1 and small-11 each). Also the vertical class that you assign to the parent container makes the elements stretch vertically and that's why you see all that spacing.
I've modified your example to this link just to give you an alternative approach:
https://jsbin.com/falojitalu/edit?html,css,output
I'm trying to create a three column layout in CSS only with fixed left and right columns and a fluid central column. I have searched online but nothing has worked when I implement it. I don't know whether this is particularly relevant but my central column is (or contains, I've tried both) an iframe. This seems to be contributing to the complication.
Have you tried using an 960 grid ?
http://960.gs/
Otherwise there are many examples for using fixed and fluid grid layouts in the web:
http://matthewjamestaylor.com/blog/perfect-3-column.htm
http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-31-fixed-fluid-fixed/
This is the one you are looking for.
Btw: Please provide some of your code, or do a jsfiddle about it !
For example, in a 12-column grid, I want to have a 9-grid-wide and another 4-grid-wide . The divs will have an overlap 1 grid wide in the middle. This is useful for some fancy effects.
Of course I can just use one div and then create more divs inside accordingly (not using the Grid System), but is there a better way?
Or you could organize your layout by yourself with all custom DIVs, that just follows the guidelines the 960GS gives you. There's nothing that tells you that you have to use the premade HTML template to benefit from the concept of the grid system. It's just there as a guide to make sure all widths on the page look good and fit together.
I believe that grid CSS systems were designed to enable quick and easy table-less layouts. They were not designed for this kind of thing. However, there is a third party tool that may interest you. You can find it here: http://gridder.andreehansson.se/
You may however find it easier to just use CSS to layout your DIV elements, overlap them using negative margins and use the z-index property to determine which of the overlapped DIV elements should be on top.