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.
Related
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.
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.
I need to use 1170px for content however i'm worried about column sizes and gutter widths. I Have three big columns with 300px and one small 150px column. Gutter width is 40px. I'm creating this on PSD and wanted to learn if it is okay for Bootstrap.
Even if the defaults for Bootstrap won't work with your site out of the box, you can customize virtually every aspect of it and download that customized copy to include in your project.
http://getbootstrap.com/customize/
Either way, you can include Bootstrap via the CDN links provided on the Getting Started page, so you can include them without adding a bunch of files to your project to quickly test whether or not the defaults will work.
We have a medium size application with around 30 views. We have many CSS files laying around. Some are specialized (popup styles) but the rest contains style for different parts of the application, in addition of the style embedded in the *.ui.xml and it's start to get pretty messy.
Is there any guideline on how to structure the styling in a GWT application and in a web application in general ? How do you structure yours ?
There are two schools of thought on this. Some developers prefer to use CSS Resources.
My strong preference, after 7 years of experience with GWT and multiple projects, is to have a single external CSS file for all styles. I even do not include any GWT stylesheets (including DataGrid styles) - I copy their content into my CSS file. These are the reasons for this preference:
CSS is called a cascading style sheet for a reason - it is build around inheritance. A professional web designer builds an app design starting from the very top (html, body elements) and defines the rules for the entire application: font or fonts to be used, color palette, standard margins and paddings, standard grid (columns width), etc. These rules must propagate throughout the entire app. Once developers start defining their own styles at the view/widget level, it's nearly impossible to ensure any design consistency across the app.
Even more importantly, when the CSS rules are split between many different sources, it becomes very hard to predict their interactions. Why is this element not positioned correctly or has the wrong font size? Is it because I used the wrong selector in the widget CSS, or is this because some other rule from some other CSS resource overrides or conflicts with it? Now you find yourself jumping back and forth between different stylesheets trying to make it work.
Even if you do find a source of the problem and fix it in one of the stylesheets, now you have to check how this change affected other views and widgets. Making a change at the top of the DOM tree can impact every element at the bottom (again, it's cascading!). Often it's not easy to anticipate this impact in every browser possible.
These considerations become even more important when you try to make your app design responsive and make your app adjust nicely to different screen sizes. What happens to your view or widget-level CSS when you add a media query in your main CSS file?
Another important point is the speed of development. If you use a professionally designed CSS file, you almost do not need CSS at a view or widget level. When I add a new form, for example, I never need any CSS - I just throw a sequence of labels and input widgets and they all suddenly look right and they are positioned correctly, because the rules have been already set and they apply to all forms, input elements, labels, etc. in the app. I do not think what font size or color to use in a widget. I just use a <h2> header, for example, and it has one color in a light skin and a different color in a dark skin, and it changes its size and margins according to the screen size.
Finally, moving as much CSS away from the widgets makes it easier to reuse them in new projects. Using the same example, if a header does not have a font-family, font-size, color or margins specified in a widget, it will take these values from another app's CSS file (which may or may not be the same rules as the contributing project's file). So you can reuse the widget in a new project without touching its code, which again speeds up the development process and makes maintenance so much easier.
To summarize, a single CSS file makes it easier to enforce style consistency across the entire app and maintain code, and considerably speeds up the development.
I am now having a lot of troubles with Bootstrap. I used to use it to build a website once and then I have never used it again. But now, I have to use it. I downloaded the compressed version and include JS and CSS file in my project.
Here is the problem. I don't know how to customize it effective. For example, I create a navbar that is much higher (height:90px;) than the bootstrap default navbar. Hence, I have to modify the padding of the navigation panel on the navbar and when the navbar is collapsed, the items in this collapsible navbar are aligned incorrectly due to the padding and margin modification for the large screen.
I have one solution in my mind. May be I have to modify the media query padding and margin or if you have other effective ways to do it. Please tell me.
Create a file with overrides that you load after the bootstrap file. The override file will redefine the bootstrap classes you want to change. It's important that you load the override file after the bootstrap file.
Just linking Your own CSS file, and insert your custom class to the element. And then styling your custom class & avoid to override default class provided by bootstrap itself. This is my practice when using bootstrap or another CSS Framework.
Never have problem so far. Good luck for your project.