I recently came across a new grid system and seem to've lost the link. (It's new to me, though I'm fairly sure it is actually recent.) I'm hoping someone can help me dig it up again.
It was based on a pretty small grid increment, maybe 10px and was a bit different in also taking into consideration horizontal alignment. The homepage itself served as demo and had several buttons to toggle vertical and horizontal grid lines and a column image, together or in isolation. While the base increment was very small(as above), the grid overlay used lines of two weights to group sub-sections and produce a more reasonable/likely grid of ~40/50px.
I want to examine this system and am not interested in suggested alternatives, so to pre-emptively cut off a bunch of potential answers, I am not looking for: Blueprint, Tripoli, Atatonic, YAML, 520, 960, 1140, 1KB, Variable Grid System, BlueTrip, YUI Grids, Elastic, SenCSS, Golden Grid, Boilerplate, LogicCSS or any of the pre-processors(eg. LESS).
Just found it again in my feeds: The Square Grid
Related
I want to start a blog design from scratch as a week-ends project, but I have problem to see how I can render it via CSS.
In a CSS grid system you can define the size of a column based on the number of elements e.g. I have 12 based grid and I can decide to have 2 columns: 2 of the size of 6 or one of 5 and one of 7.
[EDIT] I found a website example that does what I would like to achieve: http://www.by-form.net/
Thanks~
The thing about vertical sizing is that it should grow as your content grows, that's why grid systems only include rows with 12 columns, because you'll need your page to grow as the content in it does. As stated before (and I'm not sure if you meant pure CSS grid system when you asked or if you were referring to bootstraps grid system or something similar), you can use a lot of different frameworks to achieve this like Bootstrap or Materialize or even create one yourself (which is a great exercise if your objective is to understand how this works, but not so much if you want to be productive about your project).
Thank you for your answers guys,
I found 2 ways to answer that issue:
the masonry grid Javasript layout that handle very closely to the original idea of how I wanted to handle it.
or a nested grid (a grid within a grid), e.g. profoundgrid
I don't have much knowledge about this but using bootstrap css you can achive the grid system.
check this out
Your grid in the image is very complex.
I don't think you can achieve a layout like this without any rows or columns that is flexible enough.
What I mean by that is, that you surely want the boxes to grow when the content gets bigger. This could be a big problem cause there are so many dependencies to next and previous columns.
I wrote an answer to a similar question showing a variety of CSS Techniques to do layouts. Check it out, it might be helpful here.
Anyway, if you reduce some dependencies and know exactly what the order of the content should be and look like, it would be much easier.
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 had experience with Twitter Bootstrap and Foundation, and I personally think the only thing I want to use is their grid system. Other features are just bloated.
So I read about the prospect of a grid layout. All of the articles I found are oriented toward an 'artistic' explanation (golden ratio ect). I am a coder at heart, I need a clear & logical reason to use a grid layout (for example: 'columns can be easily stacked on top of each other on mobile screen, and expand horizontally on larger screens'). Can someone give me the pros and cons of applying a grid system to my website? Personally do you think using a grid system is good?
If the answer is yes, should I use a premade grid system like from Twitter Bootstrap/Foundation or just make one for my own? All of the other features are unnecessary for me an irrelevant to my problem.
Thanks! :D
I agree with #kunalbhat that this might not be the best area to ask this but since you did I will try to answer it.
The grids are designed allow for speed and adaptability. Speed in multiple senses. The first part of the speed is the speed of writing the code. You can easily get the layout you want when you are using the grid system and everything aligns correctly. You don't have to remember your tables and columns and col-spans, etc.
The second speed is modifying your code. Inevitably you will need to go back and make changes, with a grid this is easily to do. Changing a col-md-7 to a col-md-6 easily makes a little tweak in the layout of your page that can easily be tracked and performed.
You mentioned responsive design, both Bootstrap and Foundation have responsive grids. The grids will snap to different sizes based on the viewport size. However you have control as well. For example if you want something to take 1/12th the screen in desktop, 1/4th on a tablet, and 100% on a phone that is easily done with Bootstrap and Foundation, both have grid classes that target specific viewports.
The also provide visibility classes based on those viewports.
For the "bloated" part that is easily solved. Using SCSS you can easily only import portions of a library. For example for one project I was on I only imported the Grid and it was considerably smaller.
I happen to think that this is a SO question, simply because of one of the main cons of CSS grid systems: semantic.
I think semantic is important for a web developer and having a class named col-md-7 is not the most semantic thing to do.
But I like grids, because they are easy and quick to use, so I started to use LESS. Because it allows me to use variables and functions(mixins) in CSS, I can build my own grid system on my CSS rather then on my HTLM.
You can start on Frameless and customize your own 'classes'.
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.
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.