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.
Related
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 have a design I want to accomplish and found 2 ways to achieve it using the 960gs framework. Although I don't know which one is better and there's not so much information about best practices in CSS as there is in, say, PHP. So I applied what I learned from vanilla HTML/CSS and PHP OO to find out none of them is actually "good".
This is [the important part of] my design:
The two ways of obtaining it based on the 960gs framework and the disadvantages I find are:
Modify the CSS to add margins to the text. Then, inside that div, apply a pure 960gs system with 12 columns. This works, but it makes the whole width wider than optimal (1000 px, not good for 1024x768, 9% of browsers).
Use the 24 column model and leave the first and last column empty, so they become the margin. The problem with this is that then I'm using structure elements purely for visuals, plus having to write them in every single part of every page (not very DRY).
Example for the second:
<div class='grid_22 prefix_1'>
<p>
The theory of relativity transformed theoretical physics and astronomy during the 20th century. When first published, relativity superseded a 200-year-old theory of mechanics created primarily by Isaac Newton.
</p>
</div>
What I want is to apply the 960gs framework in my page with some extra personalized margins.
So, how would you avoid these problems I said for achieving what I want?
PS, due to a bug in 960gs framework, it's not easy to find
Your column is 960px wide and it seems fine. Both box-shadow and the left/right extra width of heading outside your column can be made without declaring a different width so it won't create an horizontal scrollbar.
Working example: http://jsfiddle.net/q8brv/ using absolute positioning for left and right part of decoration of the heading (compatibility IE8+. IE7- can live without box-shadow and this decorations imo ;) )
The upper limit with a resolution of 1024px is 1004px, though it's for maximized browser window.
I'm having a tough time fully understanding how to use Frameless Grid. I mean, I completely understand the concept. It sounds great.
I guess my beef is just that it doesn't offer anything in the way of positioning your elements. It just sets their width, and that's that. So even if you apply the column widths to your elements, everything just stacks unless you start floating or positioning absolutely.
In this regard, I guess I'm looking for some advice on whether there's some universal positioning styles I can use to keep these elements from stacking.
Or is this just too broad? Should I just be positioning my elements on a case by case basis?
(Also just an FYI I am utilizing SASS, in case that helps at all)
Thanks!
UPD: Frameless Grid has come up with actual code (SASS, LESS and JS), so the answer below is outdated.
Frameless is more of an approach than a grid framework.
It doesn't do anything by itself, other than a single function for grid calculation (even without proper documentation on how to actually use this function).
Let's have a look:
1. Make a regular fixed-width grid.
Pick a column width, a gutter width… you know, the usual stuff. Don’t worry about the amount of columns just yet, but otherwise use whatever criteria it is that you usually use to create fixed-width grids. I recommend using a relatively small column width for added flexibility.
We have to assemble a grid on our own. Use any stuff to acheive that, Frameless doesn't provide any. Column width should be fixed width.
2. Make it repeat infinitely.
Now, give your grid an infinite number of columns, so that no matter how wide you make your viewport, more and more columns come into view. Imagine you’re looking at an infinitely wide honeycomb filled with columns instead of hexagons.
By "infinite number" they seem to mean "any number necessary". Frameless homepage works with fascinating 26 columns (you require display width of 1920px to view that), but frameless.scss only provides variables only for 16 columns.
By "give your grid a number of columns" means "come up with a design that leverages certain amount of columns at maximum".
3. Center it in the viewport.
Align your grid horizontally to the middle of your viewport. For a grid with an even number of columns (pictured), align the center point of your viewport in the middle of the gutter between your two centermost columns. For an odd-numbered grid, align it in the middle of your centermost column.
That's very basic, but it requires us to do another line of CSS code manually.
4. That’s it, really.
Start using the grid. Use media queries to adapt your design as more columns become available. Since you’ll be adapting column by column instead of pixel by pixel, you can choose exactly when your layout should and shouldn’t adapt. This site, for example, only adapts around 320, 480, 600, 900 and 1900 pixels. To see it in action, try resizing your browser window.
No, that's not "it". That's where the work actually starts.
You have to manually code your grid to adapt to various viewports, and Frameless does not provide any tools for that.
So if you're looking for tools that you can use to assemble a grid, i recommend Susy. It's a great and elegant piece of SASS.
Susy is very versatile. It has different grid types (demo). It also has different approaches: you can go content first by declaring single column width and letting Susy adjust the number of columns to match window width. Or you can declare what numbers of columns correspond to what window widths and let Susy adjust column widths accordingly.
Susy lets you achieve what Frameless suggests, but it also provides all the tools necessary. Being different technically, Susy shares the same idea: start with a small grid for mobile phones and make it larges as the screen gets larger. This demo illustrates two such steps: it starts with 7 columns but turns to 12 columns if screen width suggests.
Here i've created a website that uses Susy to stretch in five steps: http://am-teh.ru You can see the code behind this site's layout (and also its concept's evolution) in this StackOverflow post. Susy's developer has commented on it positively.
I'm trying to solve the classic box packing/knapsack problem with a CSS layout.
I would like to arrange many boxes in a way that minimizes whitespace between elements, like this;
(source: tydus.net)
CSS3 columns work VERY well here - boxes are arranged sequentially, but all white space is consumed efficiently. There is a teeny weeny problem - boxes are "sheared", or span across multiple columns. Can't do that.
I used the classic div.clearer after some boxes, but that had no effect - the boxes still spanned over those CSS3 columns. There is a column-span CSS property, but it's not supported in any browser yet ;(
Optionally, I could define the columns myself and arrange the boxes by hand, but realistically the boxes change height very frequently.
Final question: Is there a way to arrange boxes in a way that minimises whitespace between boxes using pure CSS?
Thanks!
Although I haven't tried it myself yet, one possible answer may be to use the jQuery Masonry plugin. This seems to fit the requirements you state.
Doing this in pure CSS and HTML willl be very hard, you'll have to probably let go of some wishes/requirements...
Is it possible to have a css newspaper-column layout arranged such a way that, any number of columns can be added and they will be continuously added to the right of the existing columns.
My thought is like this: I would just add a new div and a new column will be added to the right and so on.
If yes, how?
Here I found a 4-column newspaper layout. But column-heights are not same. I need a way so that, no matter how long the text is, they would be stipulated to a certain height.
Is it possible in CSS?
I think your needs are best served using an existing CSS framework, rather than coding it yourself from scratch, since it is really tricky business plus apallingly hard to get to work across all browsers (since some of them are not standards compliant)
Anyhow, for newspaper columns, I think there's one out there that fits the bill, 960 Grid System. It comes with 12 & 16 column "grids", with the gutters and paddings all worked out, and so long as the number of columns you intend to use is a factor of 12 or 16, it can handle it.
CSS3 provides a way of turning any HTML node's content into any number of columns. There are properties for controlling the number of columns as well as their width, relative height ("fill," or how the content is divided across the existing columns), gutter between columns, "rule" (dividing line or border), etc.
As a starting point, see the w3schools.com CSS3 Multiple Columns reference page.
However, as usual, IE alone among widely used browsers does not support the column- CSS3 properties.
One cross-browser solution is the Columnizer jQuery Plugin.
With pure CSS, it's very hard to assign several divs the same height unless that height is static. You can use ugly hacks but that will only get you so far.
For real columns, use tables, that's what they are for. Tables are valid HTML constructs, it's just that you shouldn't use them as your only layout tool. But when tables work, use tables.
you can set the height of the column using CSS, but adding a column automatically its a programming stuff using other web programming languages.