Using the standard out of the box configuration for Zurb Foundation on a page that has a large number of labels and input boxes.
I am trying to figure out the best way to "compress" the page vertically yet maintain legibility.
Is there a proper or best way to do this while maintaining the responsiveness of Foundation?
The proper way to do this is using the framework in its "sass" variant, so you can edit the _settings.scss file where you can find vars for almost every aspect, you can then:
Reduce line height
Reduce font size
Reduce padding of buttons, labels and form elements
Reduce the margin between elements
Hope this helps
It depends. Do you want the change globally across the entire project? If so, then ideally you would update the project's Scss settings. If not, then just add an overriding style that is specific to your page.
Related
So I have a nasty project in my hand with a lot of bootstrap in it. The thing is, I need to make lock at a certain 1024px and I can't think of how. I'm locking the body at 1024px but bootstrap still changes the layout regarding the width and I can't simply remove all the column classes to use only 1 since it would not adapt itself any more.
What ideas could I use to achieve this?
You can use your own customized Bootstrap css (create one here)
instead of the original/regular one. In the 'Media queries breakpoints' section, just change #screen-xs, #screen-sm, and #screen-md to 1024px and then download the customized version.
Bootstrap is designed to be mobile first and scale up rather than down.
You could reverse this by having a lot of fixed values in your own css file that overrides the bootstrap media queries below 1024. Essentially this would be a lot of work because you would be reversing bootstrap's mobile first design.
This has been already asked on SO, and the steps to make Bootstrap 3 non-responsive are described in the docs. In your case, it sounds like simply using the col-xs-* classes will work as these columns don't stack vertically and "change the layout". From the docs:
For grid layouts, use .col-xs-* classes in addition to, or in place
of, the medium/large ones. Don't worry, the extra-small device grid
scales to all resolutions.
https://www.codeply.com/go/g1dEHU6EOX
Our designer designed the website without using a grid system, however luckily I found a grid system to fit it with playing some settings. It's still 12 grids but gutter and column sizes are different than the bootstrap's.. and I want to ask some questions at this point.
Is this a good behaviour to customise bootstrap from Bootstrap's official customizer or Bootstrap Live Customizer?
What is the best approach to take while you want to customize and keep responsiveness at the same time?
The settings I want to change is gutter size and column sizes. I know how to use bootstrap but I have never tried to customize it. I thought customizing bootstrap beforehand would be a better practice than using padding/margin to almost every element, which I believe complex adapting responsiveness.
What is the proper way of calculating it? And for example on Bootstrap's official customizer, which fields should I change? How should I calculate sizes for all screen sizes?
He also used 1440 x 900 while designing.
What is the best way to adapt this grid settings below? Here I'm adding the grid settings that I could fit the design:
Bootstrap has a set of variables that you can override in your project if you want. _variables.scss
Max width: $container-max-widths,
number of columns: $grid-columns,
and gutter size: $grid-gutter-width-base.
What's more, you can set different gutter sizes for each screen size: $grid-gutter-widths.
You can use not precompiled css file of bootstrap, but scss version of it and compile scss files by yourself.
Update:
Ups, author uses less version of Bootstrap. So you can change less variables: #gridColumns, #gridColumnWidth, #gridGutterWidth, and so on.
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!
I've come across articles such as this one discussing how to modify components of Twitter Bootstrap using LESS. However, I don't know what I should include in my files or how they should be constructed.
How would I use LESS to modify the height of the navbar?
First download the less files from github and then look up where the height is set. A quick look at the files learned me that the height is first set in navbar.less on line 22:
min-height: #navbarHeight;
As you can see a variable is used to set the height. A closer look at that same file shows that the variable is used a couple of times to set various heights of items inside the navbar. The easiest way would be to change the value of that variable. It should be in the variables.less file. Set it to whatever you want it to be, and recompile your bootstrap.less.
If you ever decide to update your bootsrap version, you should be able to keep your variables.less file, and just change the rest of them to the new version. That is of course only the case if they do not add any new variables.
PeterVR explains how to update the less locally after downloading it and setting up less. However, if you wish, you can customize your bootstrap distribution before you download it on the Twitter Bootstrap Customize page if you did not want to deal with recompiling less templates etc.
In the long run it may be better to download the source files yourself and manage the overrides that you make to the bootstrap defaults. Otherwise this might meet your needs for a quick and easy override of the default settings.
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.