I want to create something like this in the Susy grid system:
The different color demonstrate different sections of the website and also their background colors. The vertical lines are the grid columns.
If I use a simple grid container I can set the background color only within the div which is inside the grid, but I would like to have the background color stretched to the left and right edge of the website. The content stays inside the grid.
I found a solution using multiple grid containers (one for each section), but I heard that this approach is not recommended.
And I also don't want to use a fluid grid container.
As Eric Meyer, a developer of Susy, pointed out in the comments, the Susy grid is just a concept and there is nothing wrong with having multiple grids on the website, one in each section.
I was dealing with a similar issue.
I had used the following approach: Have a div (let's call it 'content') inside each of your sections.
Apply the container class to the 'content' div. .content{#include container;}
This way, when you set the background color of a section, it spans the entire width of the page while the content in the sections adheres to the rules of the grid.
Hope it makes sense.
Related
I have barely used anything other than vanilla CSS but would really like to do a couple things that aren't working well now:
I have an inner border inside a div, which I want to actually border the inside of the encapsulating div's border (double border). However with window resizing, the inner border will sometimes have too large/small width/height, even when using a measurement like % or vh/vw. I need the inner border (just a div with a border right now) to always stretch/shrink to fit snug right next to the parent border.
Similarly (notoriously) with centering, I imagine there must be a library with the ability to easily center elements vertically and horizontally. Generally I use flex box but would love something that works more consistently, elegantly and intuitively.
What say ye?
I think you're talking about a CSS framework, they help out a lot, especially when working on a major project. I would check out Twitter Bootstrap or Google's Material Design, I personally use mdbootstrap, which is a 3rd party hybrid of the two.
You could give Tacit a try for this particular need.
Tacit is a class-less CSS framework were all you need is just a single <link> statement in your HTML and the web page will have a complete and finished look.
The centering of elements vertically and horizontally come out of the box, and you can skip the usage of <div> elements or the work of defining classes for your elements.
As a side note, here are a few examples of pages that use Tacit, and the only work put into was including the CSS file: http://filfreire.com/, http://www.jare.io/, https://socatar.com/
Using Angularjs Material framework, I aligned the content (containing cards) to the center, the problem is when I increase the height of one card, the height of the adjacent card also increases. Example code http://embed.plnkr.co/eaLjJDbjL1KnOI4jLYyO/preview
The cards will have dynamic height, and should align one after another both horizontally as well as vertically.
I am trying to achieve some thing like this:
https://lh3.googleusercontent.com/-6ocJpsXmVLU/VTgSj9wd_CI/AAAAAAAAACs/PavEWs9wiGM/s1600/cardLayout.png
I don't think this has anything to do with Angular. It looks like your example is using flexbox CSS, which is the cause of your columns having equal height. Remove all the flex attributes and your cards will take take the height of the contained content. If you are looking for a masonry tile layout you'll likely need JavaScript to help with that since elements float left and clear one another. Take a look at this and see if this helps http://masonry.desandro.com/
I have a 960gs layout but I don't know which is the best approach to center the content of this page (http://andreapuiatti.de/screenshots/question.png) using the 960grid system.
The designer assures that this design is based on 960gs but hell... is everything out of the columns!
The only solution I come up with is that of using a grid_12 and then add custom elements which I will size myself but then why using a grid system?
Decide how many columns the image and text will span, say 12 and create your 12 column row as the parent container (all within the 960 grid framework).
Within that row, I would create a wrapper class (give it a class) and then for the image (or its container) apply a standard CSS rule like margin: 0 auto;. Apply display: block to the image if it is not wrapped in a block level element.
As for the text, the p elements will fill the wrapper element and you can adjust margins as needed.
In general, these CSS grid framework create block level boxes that contain your content, text and images and so on. It is up to the designer to decide how to lay out the elements within each block. 960.gs and similar CSS frameworks define your layout only, not the details of styling the content within each box/block/panel within the grid layout.
About the Screenshot and Designer
Your designer may not understand how grids work and you need to have a discussion with him/her to specify where the edges of the image should be. The problem is not with the CSS framework, but the design specifications need to be more precise. Nothing wrong with that!
I am confused. I have just discovered this CSS property: display:box;
I do not understand what it brings to CSS that was not already possible with display: block, inline, inline-block.
Anyone can enlight me on this ?
Thanks in advance.
It's part of the new flexbox module. From the working draft:
In the flexbox layout model, the children of a flexbox can be laid out in any direction, and can "flex" their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated. Nesting of these boxes (horizontal inside vertical, or vertical inside horizontal) can be used to build layouts in two dimensions.
It's still a draft specification, but worth playing with until it's fully implemented by browsers. It will probably allow us to get rid of floats in many cases!
Please note that display:box is already deprecated in favor of display:flexbox.
Last but not least: do not rely on w3schools!
You may find more info here.
Brief summary:
CSS 3 introduces a brand new box model in addition of the traditional box model from CSS 1 and 2. The flexible box model determines the way boxes are distributed inside other boxes and the way they share the available space.
This box model is similar to the one used by XUL (the user interface language used by Firefox). Some others languages use similar box models such as XAML or GladeXML.
Usually the flexible box model is exactly what you need if you want to create fluid layouts which adapt themselves to the size of the browser window or elastic layouts which adapt themselves to the font size.
...
By default, the traditional CSS box model distributes boxes vertically depending on the HTML flow. With the flexible box model, it’s possible to specify the order explicitly. You can even reverse it. To switch to the flexible box model, set the property display to the value box (or inline-box) on a box which has child boxes.
Take a look at the documentation from MDN:
The CSS box-orient property specifies whether an element lays out its contents horizontally or vertically.
For example, XUL box and hbox elements lay out their contents horizontally by default, but XUL vbox elements lay out their contents vertically by default.
HTML DOM elements lay out their contents along the inline-axis by default. This CSS property will only apply to HTML elements with a CSS display value of box or inline-box.
display:box allows:
Flexible distribution of boxes with box-orient, box-direction, box-ordinal-group... You can modify the normal distribution of boxes inside another box not only from vertical to horizontal (can be achieved by inline, inline-block or block with some float trick) but also in a reverse order (horizontal reverse order can be achieved by some float trick) and even in an explicit order.
Flexible sizing: the size of the boxes can be computed as the explicit size (using height, width, max-height, max-width...) or the size of the parent box and available space (with box-flex).
Handle the available space with box-align, box-pack, box-lines...
the new box model can do something the old model can't without additional javascript calculation, not much
Hi I would like to replicate the setup. I'm currently trying to use a div for the yellow background and inside it two nested divs for the purple blocks of text. If I don't put any additional elements in the outer div the background color doesn't appear. If I put an element, just to test, I get the yellow border between the purple blocks not around them.
edit: updated the link to a working image.
http://picasaweb.google.com/lh/photo/5yxlv3hQEcS5GN-VXomD0w?feat=directlink
You can use:
min-height:Value;
on the outer element to force it to appear.
I am also unable to visit your link.
Check out 960 CSS Framework. It is an excellent way to quickly and easily create multi-column layouts.