I'm searching for a effective way to customize bootstrap layouts.
Currently i use layoutit.com to get the basic layout and then the software Brackets to edit.
I make changes to the less for customization.
But it is very complicated that way...my problems are:
-Layoutit is great but places some containers very oddly so you have to change that manually
-Brackets only shows you what css rules are used for specific html (just like firefox) but it cant show what less rules apply and it can handle the minified css stuff (whats that by the way) so you cant really make changes that way in a fast and effective way
-Editing within firefox works great, but it only edits css and can't save the changes.
So what can I do to layout fast and customize effective?
Any help?
Customising it in SASS and LESS is very easy, and also the most effective way--since that's your question. Take a look at the source, specifically in the variables.less file starting at line 240.
// Number of columns in the grid system
#grid-columns: 12;
// Padding, to be divided by two and applied to the left and right of all columns
#grid-gutter-width: 30px;
Change those two values to the values you want, and you are essentially done.
If you are using containers, you will also want to look at the bottom of that file.
/ Small screen / tablet
#container-tablet: ((720px + #grid-gutter-width));
#container-sm: #container-tablet;
// Medium screen / desktop
#container-desktop: ((940px + #grid-gutter-width));
#container-md: #container-desktop;
// Large screen / wide desktop
#container-large-desktop: ((1140px + #grid-gutter-width));
#container-lg: #container-large-desktop;
Here you can customise the size of your containers.
Bootstrap also comes with mixins, so you can create your own grid with semantic names. The following example would provide a centred column with a width of 50% of your container size.
.post {
#include make-lg-column(6);
#include center-block;
}
Related
I would like to do a responsive menu using CSS only.
I'm trying to do something like that :
- Display a pictogram when width for that div is really small.
- Display a small text like 'Search' (without the pictogram) when there is a little bit more width available.
- Display a long text like 'Search whatever you want' when there is a little bit more width.
Thanks in advance,
The short answer is: it's complicated. A CSS only solution would consist of adding a class like so:
.hidden {
visibility: hidden;
}
to elements in your DOM that should be hidden given a specific viewport size. Now that you have a little utility class, you can start adding media queries that affect your various classes and ids in your menu. Here's a bit of a snag, your .hidden class needs to be changed dynamically. Really, you'll end up having more classes like this:
.hidden-search-bar {
visibility: hidden;
}
all over your CSS file, each only applying in a certain media query. Another approach is to construct an entire grid system that uses utility classes like:
.col-large-display-hidden {
visibility: hidden;
}
so you can tell the browser that when it is in the large-display viewport size range it knows to hide anything with that class.
I'm sure there are more interesting ways to go about it but if you want to be able to have these classes carry over to other pages then you would need to be a bit more systematic. I would recommend looking at Twitter Bootstrap to see how they handle that problem but they do use JavaScript (specifically jQuery) throughout the framework.
I'm working on a site which has to be compatible with many kind of devices, so I've chosen to use Bootstrap. My problem is that while I have a nice responsive grid layout, I don't see an out-of-the-box solution for making other visual parts of my site responsive. I mean for example font sizes, form field sizes, button sizes, etc.
What I want for example is to have normal button sizes for desktop, and large button sizes (.btn-lg class) for mobile. Similarly with form inputs. Is there a nice, global level solution for this way of responsiveness?
Thank for the answers.
EDIT: I would like to reuse the existing bootstrap classes as much as possible, with minimal added media-query or other code. I'm looking for something like "conditional classes" on elements based on resolution, like the following: if there is "sm" or smaller screen, add "btn-lg" to "btn"-s. If there is "md" or bigger, don't add anything, just use pure "btn". And something similar with form inputs.
Font-sizes and paddings are more simple with simple media-queries of course. My problems are mostly with form fields and buttons, just as I note in the corrected title.
I would like to avoid copying and duplicating more complex (like buttons and form fields) Bootstrap CSS code into my css
They are responsive to some extent. To add this level of responsiveness you must write your own media queries.
It's very easy. It's even easier if you are using SASS or Less.
See starting at line 260 in the variables file. Here's an excerpt.
#screen-xs: 480px;
#screen-xs-min: #screen-xs;
#screen-phone: #screen-xs-min;
A phone example:
#media (max-width: $screen-xs) {
// Change h1 size
h1 {
font-size: 20px;
}
// Change .btn font size.
.btn {
font-size: 10px;
}
}
If you are not using Sass or Less, just swap the variable $screen-xs with the value that you want--480px, for example.
use % rather than px.
Or use media queries within your css
.w(#w, #h){
width: (#widget-w * #w) + (#widget_margin_right * #w);
height: (#widget-h * #h) + (#widget_margin_bottom * #h);
}
[class*='w_']{
.w(1,1);
}
So in this I have html elements with a class that determines the width and height of the element.
Like so....
And this div is going to be
#widget-w = 228px;
#widget-h = 194px;
Now I had it like this
.w_1x1{
.w(1,1);
}
.w_2x1{
.w(2,1);
}
But I'd like it more automated to fit for any size i want at any time
So i'm trying to make a mixin that i can pass into the class name to simplify it.
I believe you would have to do that with javascript/jquery. LESS is great for calculations, but it's compiled BEFORE the page is laid out.
In other words, it would not be able to dynamically pull the height or width unless it ran the compiled CSS after the page had already rendered and been styled.
So that is a no.
Some extra info:
LESS is a CSS preprocessor, which means it is designed to process before the browser loads anything on the page. Hopefully, you're using a compiler to compile your LESS into CSS, and not compiling client side (which is not recommended).
I'm new to WinJS development and can't find any good examples of a layout similar to the following:
Ideally, each item would be percentage based so that I can have a layout with 3 or 4 "columns". Can anyone point me in the right direction? Thanks!
If you're going for rich functionality like selection, grouping, sorting, etc. then use the solution #Louis_PIG answered with. If you need very basic horizontal layout like that, then use disply:-ms-flexbox CSS display property. If you create a div and set that, then all of its children will be laid out horizontally. Then you have all kinds of control over the children and their size and position. You can set their relative widths, distribute them equally, stretch them, and more. See this for lots of info on flexboxes.
Here's a sample flexbox...
<!-- HTML snippet -->
<div class="flex">
<div></div>
<div></div>
<div></div>
</div
/* CSS snippet */
.flex {
display: -ms-flexbox;
}
You are probably looking for GridLayout.maxRow property.
<!-- This doesn't work, see NOTE below -->
<div data-win-control="WinJS.UI.ListView"
data-win-options="{layout: {type: WinJS.UI.GridLayout, maxRows: value}}">
</div>
Reference: http://msdn.microsoft.com/en-us/library/windows/apps/br211750.aspx
NOTE: the above snippet doesn't work, but the updated Javascript code should work for the same purpose.
Assuming that you are trying there will be more items to display, but you just want the viewport to hold only 3 or 4 items depends on the width of the screen. Then you can use CSS Media Query to apply different styles to different screen width. Or, you can calculate the size of the item according to the screen size at run time and update the ListView.itemTempalte. Can you please provide more info on what exactly you are looking for?
In my own opinion though, the WinJS.UI.ListView control introduces a "panorama" view, which usually intentionally left some indication that "there is more to scroll". So, displaying a "fixed" number of items in the ListView may not be the preferable because the user may not be aware of the existence of more items outside of the viewport.
UPDATE:
As #rattrick1 pointed out, the above HTML snippet doesn't work even though it is the same code as the one on MSDN. I modified the code in the default application created by Visual Studio and it still displayed 2 rows. If someone can point out what is wrong with the above, that would be great!
So I tried to set the property in Javascript and it works for me:
In App1\pages\groupedItems\groupedItems.js
_initializeLayout: function (listView, viewState) {
listView.itemDataSource = Data.items.dataSource;
listView.groupDataSource = Data.groups.dataSource;
listView.layout = new ui.GridLayout();
// limit the List View to display only 1 row
listView.layout.maxRows = 1;
}
Please let me know if this doesn't work.
For me HTML + CSS is quite complex. HTML + CSS + #media is nightmare. Now my HTML + CCS looks like spagetti. Pls help me with questions:
How should I organize my SCSS includes: by function (header/footer)
or by dimension (0_480)?
How should I use #media limits:
max-width only: 0-420, 0-870, no limit
min-width + max-width: 0-420, 421-870, 871+
min-width only: 870+, 420+, 0+
To test site for Adaptability can be easily and quickly!
http://plastilin5.com/tools/
here's a good example (check in the lower part of the site)
http://m.alistapart.com/articles/responsive-web-design/
you can place all your stylesheet imports in the header.
On how to use #media max and min widths, some developers would argue strongly for “mobile first”, e.g. focus on styles for small screens first, and then override those styles for larger screens.
http://stuffandnonsense.co.uk/blog/about/320_and_up/
I think that would match most closely with your “max-width only: 0-420, 0-870, no limit” option.
Here is what I do:
write CSS for maximum size only
at the end of the CSS file (or as #import if the project is to big) add "#media screen and (max-width: 1700px)" and write all the changes for that resolution
repeat previous step for every needed resolution
The main reason I think this is the best approach is that for the smaller screens you can (and most probably will) decide not to show some of the elements, and you'll be able to do that by simply adding display:none; to those elements on the first (biggest) resolution they are to be hidden on. While when you're building your CSS the other way around, adding elements becomes a bit harder to follow.
Sass has what they call "media query bubbling", which means that no matter what nesting level your media queries are placed at, they will bubble up to the top. This is both a good thing and a bad thing if you aren't using it responsibly (good that you can keep your media queries grouped with related styles, bad if used excessively since you end up with 100s of media queries all over the place).
What I've found that works for my workflow is to group together media queries as much as possible with the block of content that its for. Each major block of styles is broken up into its own file (master layout, image gallery, clients, etc), and each file will have as few numbers of media queries as possible (typically only 1 or 2, 3 or more for more complex blocks).
$x-small-device: 25em; // smallest
$small-device: 35em; // larger mobile
$medium-device: 55em; // tablet or really small desktop
.clients {
// no matter what resolution, these styles are always applied
#media (min-width: $small-device) {
// have our clients display in a 2-col layout
}
#media (min-width: $medium-device) {
// have our clients display in a 3-col layout
}
}
If you try to break it up based on the width of the device you're targeting, it is more difficult to find where the styles are located when it comes time to change it.
Ok, first of all I think that you should read more about CSS architecture. The first question is kinda complex and involves different concepts. I'll suggest to check OOCSS, SMACSS or Atomic design. There are some really great ideas. What I usually do is to use a mixture between all those things. I guess that you will find what it fits in your project.
Media queries should not be based on the devices or on some popular resolutions. You should set your break points based on the content that you have. Try to follow the Mobile First concept and see where the content needs updating. Very often the different break points are related to different parts of your site. I mean one media query may refer only the header of the application. Another only the footer and so on. I'll also suggest to use media queries bubbling. I.e. to place those parts inside the container that you want to change, not in a separate file or at the end of the current one.