So I have looked all over the web and thei site and can't quite figure it out.
I want to create a custom grid in Bootstrap. The container should be 5760px and have 36 columns with 20px gutters. I know this is ridiculously large. but what I am trying to do is essentially have 3 12 column grids (each 1920px wide) side by side.
I've tried the custom build for Bootstrap but I don't really understand the container / grid system I guess. Also I am using Sass as opposed to Less. So that presents another twist.
If I could just get the css and by pass all the Sass / Less stuff that would be great.
Ok so im going out on a limb here, but if you're working with bootstrap and you want to configure the basics so much.
What you can do is download a customized version of it.
Take a look here : Boostrap 3
Here you will be able to customize the amount of columns you wish to work with : Custom Grid Count
And you will also be able to select the container size. : Container Width
Along with all the features of bootstrap.. And all from bootstrap themselves.
Once you have all your fields filled in and edited to your spec, scroll to the bottom and 'compile' it!
As an answer goes its really the best i think I can offer!
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 working on a web site using Bootstrap 3 to design it. I have come across a situation where the the grid system is not working as expected.
I am trying to fit in the HTML5 logo in the last line where I have set the class to visible-xs-6 col-xs-offset-3. According to me, this should create three sections where the first section should be an offset of 3 columns which is showing up fine as you can see in the image, but after that I believe that the HTML5 logo should be somewhere in the middle section and another 3 column section after that. Isn't that logical? But for some reason the second section is taking up the whole row after the offset. What am i doing wrong?
I don't believe the visible-xs-* classes are used to set the number of columns, only the display:* property. The only options are block, inline and inline-block. So your classes should be...
class="col-xs-6 col-xs-offset-3 visible-xs-block"
I made a silly mistake. I forgot to wrap the columns in a <div class="row">. And moreover I used .hidden-sm .hidden-md and .hidden-lg classes just to be extra sure.
And plus I made another silly mistake of assuming that the * in visible-xs-* means the number of columns instead of the options given in responsive utilities.
If anyone has a similar problem please take a look at Bootstrap's responsive utilities
Anyway thank you anyone who tried to help. I will accept this as an answer to close the question.
I have been trying to create a 3 column layout with divs but I haven't found any way to do the following:
I haven't found any info on how to do this. Basically I want the divs to be able to be added in any order and have the margins the same.
The Twitter Bootstrap grid system is especially suited for this type of layout. If you want more specific help, please provide some code on what you've already tried.
I am looking to know if there is any simple solution known to change the gutter with on the fluid default 12 grid bootstrap system (2.3.0).
I am not familiar with LESS but if that is the answer, please also describe how to could be changed. The same with Sass.
Please note that it is perfectly acceptable to change the gutter width, by half or one fourth, for example if that may make things simpler.
The following goals must be met:
Must be able to update bootstrap in the future. This means not editing the actual bootstrap files.
Functionality should remain for all other objects.
Must be simple. Less than 10 lines of CSS. For example, an added class or something.
I have searched throughout Stack Overflow and still have no idea how I may go about doing something like this. To the best of my understanding, downloading a customized Bootstrap only renders custom gutter widths for non-fluid grids. I have coded my own fluid grid system before, so I understand the math, but I am worried there may be consequences and it would be helpful if any known issues on class overrides could be shared.
I promise to give credit where it is due.
UPDATE:
Changing the less variables as described in Yoda's answer is the way to go. Does anyone have any experience changing these less variables? For example, I believe the variables that have to be changed are the following:
// Fluid grid
// -------------------------
#fluidGridColumnWidth: percentage(#gridColumnWidth/#gridRowWidth);
#fluidGridGutterWidth: percentage(#gridGutterWidth/#gridRowWidth);
// 1200px min
#fluidGridColumnWidth1200: percentage(#gridColumnWidth1200/#gridRowWidth1200);
#fluidGridGutterWidth1200: percentage(#gridGutterWidth1200/#gridRowWidth1200);
// 768px-979px
#fluidGridColumnWidth768: percentage(#gridColumnWidth768/#gridRowWidth768);
#fluidGridGutterWidth768: percentage(#gridGutterWidth768/#gridRowWidth768);
How does one go about changing something like this? Perhaps:
#fluidGridGutterWidth768: percentage(1.5);
If anyone has done this before, I would appreciate a shove in the right direction.
The easiest way is probably to use the Customizable download that Twitter Bootstrap provides. Change the #fluidGridGutterWidth variable to suit your needs in the form. Download the less files from here. You can access the variable.less file from the github bootstrap project and then change this piece of code:
// Fluid grid
// -------------------------
#fluidGridColumnWidth: percentage(#gridColumnWidth/#gridRowWidth);
#fluidGridGutterWidth: percentage(#gridGutterWidth/#gridRowWidth); // <= this one
I thought you had access to less files at first, then I realized you are using the customized gui on the website. Just download the less files, and make your changes. Then compile the less files to give you a css file or use less for development. You can use css or min.css for deployment.
I think you might be over thinking it. The problem with changing the LESS variables is that it will change it for all gutters. So if I like the 15px gutter for arranging the over all layout but want the gutter to be 5px for a form inside that grid it won't work.
Just create 2 css classes to override the areas you want to change the gutter.
Apply this at the "row" level.
.row-5-gutter{
margin-left: -5px;
margin-right: -5px;
}
Apply this at the "column" level.
.col-5-gutter{
padding-left: 5px;
padding-right: 5px;
}
demo: http://jsfiddle.net/tg7Ey/
I was looking for a simple solution for this problem, too. My goal was to use simple CSS, not LESS. This answer as like any other i found, based on compiling LESS or using the online compiler of bootstrap. So i tried to find my own solution.
Reading the documentation you will find the following about the gutter-width: Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows.
Based on this i tried the following:
.container {padding-left:1px;padding-right:1px;}
.row {margin-left:-1px;margin-right:-1px;}
.row > div {padding-left:1px;padding-right:1px;}
From now the gutter width was only 2 pixel. My next problem was, that my intended width was an odd number. My solution was to remove the paddings and margins on the left and put them completely on the right:
.container {padding-left:0;padding-right:5px;}
.row {margin-left:0;margin-right:-5px;}
.row > div {padding-left:0;padding-right:5px;}
Now i have a 5 pixel gutter width.
I did not tested this in all possible scenarios you can use bootstrap. Especially you have to pay attention to use only column-div's inside a row-div inside a container-div. But in my case it was a very effective solution without touching the origin source code of bootstrap or using a LESS compiler.
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.