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.
Related
When learning CSS and making responsive column layouts, I was taught the flexbox method (but also the fact that you should avoid using it too much). Recently, I watched a newer video from teamtreehouse that uses columns, column-counts and so on, to make a responsive column design. Which one is better to use, or is there a third option that is the best?
Edit: Sorry, apparently it's an older video. The reason I'm asking is because it wasn't on my web design track so I wasn't sure whether it was relevant anymore.
Most modern page layouts are moving away from floated columns and migrating to flexboxes. You'll find that even bootstrap 4 are going to be basing their layouts on flexbox.
The main advantage of using flexbox I find is vertical alignment, which is revolutionary. Because before that was one of the biggest pains developers had to face. You can also re-order dom elements which is pretty cool. There's also flex basis, which allows you to have a div with a fixed dimension, and allow other divs to occupy the remainder of the width/height. The possibilities are endless!
TL;DR Flexbox makes your life hella easier. Only if supporting older browsers isn't an issue.
I came across the column-count in our codebase, and was surprised by it, after 6 years of being a frontend dev, I hadn't heard of it. So I dove into it a little bit and also found this thread. To answer the original question above:
When to use column-count
When you are using a lot of text or for instance checkboxes, and you want to order them into columns, column-count is a good option. It basically creates the columned layout of a news paper article for you. So you give the number of columns and the browser will calculate the height. The drawback here is that you often times don't want multiple columns on smaller devices, so you would have to put it within a media query. If you want to know more about it, read this article: https://www.smashingmagazine.com/2019/01/css-multiple-column-layout-multicol/
When better not to use column-count
If you want to have more control over your columns and rows, for instance where certain content should go within the column, use flexbox or grid. Also when you don't want columns to have the same width, you are better of with flexbox or grid.
Note that CSS grid is not the same as the old floated columns. It sounds like teamtreehouse used CSS grids.
The CSS grid is a 2d system (rows and columns) while flexbox is 1d (either rows or columns). So they can be used in conjunction, css grids for the page layout and flexbox for the internal detail layout. See :
https://tutorialzine.com/2017/03/css-grid-vs-flexbox
You might want to take a look at Boostrap if you are already comfortable with CSS and want a responsive design. It's easy to pickup. I find it saves me alot of time and effort rather than coding your own CSS for every project.
When working with css you need to constantly think what browsers you want to support, and then choose which features to use. For that there's a handy website http://caniuse.com/
For example in your case you can see that ie8 doesn't support columns http://caniuse.com/#search=columns and neither it supports flexbox http://caniuse.com/#search=flexbox so if you want to support ie 8 I suggest you would use the tipical floated column approach. There's many grid systems out there but I'd go with as suggested above. http://getbootstrap.com/
I'm new to CSS and front end styling and I've chosen Sass and Susy2 as the 2 frameworks I'd like to work off of.
My susy config looks like this:
$susy: (
columns: 16,
gutters: 1/4,
column-width: 2rem,
output: isolate
);
So this gives me 16 fluid columns to work with. I understand breakpointing and shifting content around that way but is there a way to define an element with a static width or is this not best practice?
For example I have my menu button and other elements on my top navbar that I'd like to keep from shrinking and expanding with the page.
I'm pretty new to fluid design so I'm not sure if I should make containers that use #span and then make static width elements within those? It seems like that adds an extra layer in my html where I'd just like to have a #span on the elements themselves.
It's hard to comment on specifics here, so I'll try to answer the more general best-practice questions:
It is possible, but can be difficult, to include static elements inside a fluid layout. That's true with or without Susy. How difficult it is depends on the specific layout/responsiveness you want - but Susy has no real opinion one way or another.
If elements don't shrink/expand, you just have to decide what happens with the extra space when there is too much, and what happens to the elements when they no longer fit.
Susy has no real opinion about Static vs fluid vs mixed — but there is no way for Susy to calculate a mixed grid, and still understand it as a single grid. Mixing static and fluid is by definition breaking the grid. you can do it, and Susy won't know the difference, but you're off the beaten path.
Susy is primarily a layout-math calculator, with some extra shortcuts for establishing CSS layouts. There is nothing magic or required about a span, so you can use it anywhere it is helpful, and not use it when it gets in the way.
Basically, Susy is built to be as flexible as you want it to be. Each Susy mixin provides a shortcut for certain layout-related CSS, which you can use as you like. The Susy functions also give you direct access to the math, which you can use as you see fit.
I am trying to ‘look’ at my screen in a grid format so I can lay out content based on that grid.
This isn’t strictly a gridlayout like having loads of photos or items evenly split across a screen, but understanding more the sizes and locations I can add surfaces or views.
Grid layout http://www.pandafinity.com/Screen-Grid.jpg
The above image is how I want to view the screen – so I can layout various items, some will span the smaller grid cells, some will be smaller (inside the grid cell), and some will span over multiple grid cells.
How would I create this approach using Famo.us? Can I use the Gridlayout for this or is it best to get the screen dimensions and do some maths to look at alignment and origins?
Thanks again :)
Going to use https://github.com/IjzerenHein/famous-flex.
Next bit is taken from the Github page (Hope Hein doesn't mind) :)
"
Flexible, animated and plugable layout-controller for famo.us, which:
Smoothly animates renderables between layouts (using physics)
Makes it easy to layout renderables (without having to create lots of modifiers)
Is shipped with various commonly used layouts
Allows you to easily create custom layouts and layout-helpers
Is very good at creating responsive designs
"
I think its a great approach and helps you split the layout from the renderables.
J. Andrew Brassington made such a thing in Famo.us already, similar to Isotope or Masonry if you about know those. He might be one to contact: https://github.com/jabbrass
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.
Are there any existing plugins/extensions/methods to maintain vertical rhythm for Twitter's Bootstrap project?
It is quite a laborious task to create good vertical rhythm templates, I would rather use a pre-baked solution. I am open to creative suggestions, I just want my pages nicely aligned in the end.
Edit: To clarify what I am after...
Vertical rhythm is a technique used to ensure that every element on a page lines up according to a horizontal grid. This is achieved by setting the height, padding and margin of every item to conform to a standard unit line size. If a line of text in a paragraph is 20px high (including margin and padding) then maybe a heading 4 will also be 20px high, and a heading 1 might be 40px high. This maintains the rhythm of the text across columns.
I want to use this technique in combination with bootstrap (from twitter), but it would be quite a lot of work to get everything looking nice. For example, all the buttons would need to conform to the same vertical height definition as paragraph text etc... There are other standard controls used in bootstrap which would also all need rules to define their height appropriately.
I could start with a generic solution for vertical rhythm, which would go a long way to achieving what I want, but I wanted to know if anyone else has started this, or has any idea of another way to achieve this.
Edit: Assuming there is nothing like what I want...
Maybe just a good vertical-rhythm based css template would be a good starting point. Preferably something that is continuing to be developed, is already usable, well thought out, and adaptable.
Since no one has linked to an actual vertical rhythm boilerplate as you suggested, I took the one I use, commented it, and created a github repo for it here https://github.com/jonschlinkert/vertical-rhythm
As it says in the readme, this is a starting point for your own project.
I think what you're going after is understood. Problem is: you're looking for a grid schema in one dimension (a "vertical rhythm" set in accordance with, for example, proportional line heights...which, in a manner of speaking, measures and aligns things along a given page's Y axis)...but doing things in that manner might potentially be at odds with Bootstrap's pre-existing 12-column grid system (which, in contrast, measures and aligns things along the page's X axis). You want to "proportionalize" the height of each "row" in the framework. BUT: keep in mind, Bootstrap's design is intended to promote not just proportionality via columns solely for the sake of looking nice, but to also make pages responsive--i.e., to allow page elements to "flow" around one another vertically, and to nest fluidly. And, in that sense, issues pertaining to the height of elements measured along the Y axis may already be accounted for... I recall that most of the typographic elements in the base CSS file have proportional em sizes, and/or likewise proportional top and bottom padding, etc. Generally speaking, things are not so arbitrary that the framework screams a need for additional styling in the manner you're considering.
Even so: Bootstrap's base CSS file isn't so intolerably extensive that it'd be impossible for you to tweak the height of various element classes and IDs yourself without too much trouble. In any case, it's highly unlikely you're really going to need to do that with every styled element, right? In fact, as a framework, Bootstrap includes styling for many elements which may not even be in the app for which you're designing the front end. (EXAMPLE: Does your app have drop down menus? Great. You can style the "vertical rhythm" of drop down menus. BUT: are you also using pills or tabs in your nav bar? No pills, you say? Well, you can just delete a couple hundred lines of code in the stylesheet and save yourself the effort of having to apply your "vertical rhythm" to those unneeded elements.) Elsewise, for the elements that remain and that you do in fact need, just use a text editor to find-replace the values for line height, top and bottom padding, margins, font-size, etc...and test it out. As a CSS framework, it's pretty clear how Bootstrap is laid out; relevant elements are well sorted, and grouped together within the stylesheet's code for the most part. Once you do complete tweaking of the base CSS file, just minify your revised stylesheet...to replace the pre-existing minified version...or, perhaps, just serve it up from CloudFront if you want to optimize.
The Compass CSS Authoring Framework has explicit support for vertical rhythm based typography. For starters you can check out this short video tutorial.
Have you looked at the Square Grid CSS framework?
http://thesquaregrid.com/
A simple CSS framework for designers and developers, based on 35
equal-width columns. It aims to cut down on development time and help
you create beautiful-structured websites.
Square Grid provides a standard horizontal grid, but it also maintains a vertical grid, using a standard "square" of 28px. It is really just a grid, not a full CSS library like Bootstrap (i.e. no buttons, menus, etc).
I used to for one project and found it to be pretty intuitive, though I ultimately decided that it was too hard for me to keep track of both the vertical and horizontal grid, especially when thinking about responsive design.
You may be able to combine the two, or at least take a look at the square grid source code which is pretty simple CSS to get some ideas on how to adapt Bootstrap to meet your needs.