The bootstrap 3 grid system targets 4 different screen resolutions, depending on their width:
Large / col-lg (>= 1200px width)
Medium / col-md (992px - 1199px)
Small / col-sm (768px - 991px)
Extra Small / col-xs (<768px)
I find that these resolutions do not represent the user group of my webapp. For example Medium and Small combined is used by less than 5 % of my user base (meaning less than 5 % of my users have a screen resolution width of 768px to 1199px).
I would rather target the following 4 different resolutions:
ExtraLarge (>= 1600px width)
Large (1200px - 1599px)
SmallMedium (600 - 1199px)
MobileSmall (<= 599px)
So I not only like to add an extra large set but also change / replace the medium, small and extra small one.
Has anybody run into similiar issues? I would love to use a grid generator where I input my custom grid widths and get out the CSS code.
You can customize pretty much every aspect of Bootstrap using the customization section of the official site.
http://getbootstrap.com/customize/#grid-system
That link takes you directly to the grid system items.
Enter your values, and download your custom version of Bootstrap. Even includes a JSON file with your settings so you can re-import them later and make adjustments.
This is for the Bootstrap 4 users, who are using SCSS and like to create their own grid system using bootstrap mixins and variables.
#import '../../../bower_components/bootstrap/scss/variables';
#import '../../../bower_components/bootstrap/scss/mixins';
// Create custom variables to supply it for bootstrap's mixins
$grid-gutter-width-10: 10px;
$grid-gutter-widths-10: (
xs: $grid-gutter-width-10,
sm: $grid-gutter-width-10,
md: $grid-gutter-width-10,
lg: $grid-gutter-width-10,
xl: $grid-gutter-width-10
);
.row-xs {
#include make-row($gutters: $grid-gutter-widths-10);
#include make-grid-columns($columns: $grid-columns, $gutters: $grid-gutter-widths-10, $breakpoints: $grid-breakpoints)
}
Related
<div class="col-sm-6 col-md-4">
The above bootstrap element has 2 columns(col-sm-6 & col-md-4) within its element.
What does that mean?
Each bootstrap element can have another row and columns in it. For example if your element is 100px wide and you have 4 and 6 columns then you get 40px and 60px, minus padding of course.
See Two columns with two nested columns on https://getbootstrap.com/examples/grid/
The .col-md- prefix takes effect on medium devices (≥992px)
The .col-sm- prefix takes effect on small devices (≥768px)
You can read more about this on http://getbootstrap.com/css/#grid-options
Using both classes at the same time will let you achieve different behavior depending on the the device/resolution of the user.
For example, with the same markup and no additional CSS, you may achieve three columns side by side on bigger resolutions and 2 columns side by side and one beneath them on smaller resolutions
You can view and play around with this example on codepen: http://codepen.io/rebagliatte/pen/GNKvOB
col-xs-* ---> Extra small devices (phones, up to 480px)
col-sm-* ---> Small devices (tablets, 768px and up)
col-md-* ---> Medium devices (desktops, 992px and up)
col-lg-* ---> Large devices (large desktops, 1200px and up)
Each class above kicks in depending on the screen size.
So in your case col-sm-6 & col-md-4 .
Your container takes up 6 columns for small devices and 4 columns for medium devices and up.
Let's say if the screen size goes to extra small devices since we dont have anything specified by default it takes up full width available that being 12 columns.
Hope this helps :)
I'm building a site in Joomla 3 on T3 framework.
I'm having to use LESS for the first time, but am experienced with CSS.
The site will have differently themed landing pages. These will all be identical except for the colour scheme.
I am attempting to set up a colour scheme in the T3 'variables' less file and then implement the colours - the colour will be different for many core components - such as H1, P, DIV Background Color, etc.
So if I set up, say, a master colour for Thailand's page, I create this rule in the variables.less file:
#thai: #e55092;
and then my knowledge of exactly how LESS compiles to CSS falls flat and I lose my entire train of thought.
Because I now want to be able to set up a landing page for Thailand in the T3 template. I need to be able to use the class 'thai' in various places in this page - for instance, the H1 text should be coloured #e55092, an aside background should be #e55092, an HR should be #e55092 ... for THIS page only.
I hope this isn't a too open question but what would be best practice for achieving this, keeping my code clean and fast? My current line of thought is that I create a whole bunch of rules in LESS along the lines of:
thai.h1 { color: #thai }
thai.button [ background-color: #thai }
(excuse syntax - very new to LESS and not sure what's possible or correct)
But isn't that defeating the whole purpose of using LESS in the first place?
I think your question is very broad indeed. Depending on your situation:
One CSS file for all pages. You can consider changing selector order The code for a button can then look like that shown beneath:
.button {
border: 1px solid white;
.thai & { background-color: red;}
.japanese & { background-color: yellow;}
}
In your HTML pages: <body class="thai"> and so on..
Compile different CSS files for each landing page
In Less you can override a variable by putting the definition afterwards
You should first define a main file, for the button example this button.less file should contain something like that shown below:
#button-background-color: orange;
button { background-color: #button-background-color; }
Now you can define you thai theme file (thai.less) as follows:
#import "button.less";
#button-background-color: red;
Or alternatively compile different CSS files using the modify-var option:
lessc button.less --modify-var="button-background-color=red" thai.css
As the question states I would like to know where the percentage widths are being generated from in order to override them if necessary?
Thanks for any help
In bootstrap.css if combined, else you'll find the grid variables in bootstrap / less / grid.less or bootstrap / less / variables.less.
You can also override the width's you need with your own css, for example:
.col-md-3 { width: 20%; }
I am trying to use separate media queries for Desktop / Normal tablets / Retina based tablets.
I have one set of visual design & icons for desktop, another set for tablets.
What is the best possible way to write a less mixin so that i can give one set of icons to desktop, another set to normal tablets and the 2X ones to retina based ones?
Right now, i am trying using the following snippet, but this one cant handle the normal tablet query. The less than, greater than symbol cant be used in media queries, else it would have been easy to write one mixin for device-pixel-ratio: 2 and another for device-pixel-ratio < 2 .
I tried with min-device-pixel-ratio:1 , but then, that gets applied to the desktop as well.
I need a query which can uniquely identify the normal tablets excluding the retina ones & desktop.
Is it correct to write like this for normal tablets? Putting a breakpoint just under 2 so that 2 and above will take the retina based query and 1.9 and below takes the normal tablet. But then, this query is applicable to desktops as well?
#media
only screen and (-webkit-max-device-pixel-ratio: 1.9),
only screen and ( max--moz-device-pixel-ratio: 1.9),
only screen and ( -o-max-device-pixel-ratio: 1.9),
only screen and ( max-device-pixel-ratio: 1.9),
{
Query that i have now.
.retina-image(#file-1x, #file-2x, #width-1x, #height-1x) {
background-image:~"url('#{imgPath}/#{file-1x}')";
width:#width-1x;
height: #height-1x;
#media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx)
{
background-image:~"url('#{imgPath}/#{file-2x}')";
background-size: #width-1x, #height-1x;
}
}
Any pointers will be of great help!
TIA
I'm building a Sencha Touch mobile application and are using the functionality to create image-sprite-maps with Compass.
Is there any way to calculate the size of the image-map (width and height) and put it as a variable in your SCSS file?
In Compass, image-height and image-width are the functions to get image dimensions. Using them with your sprite map would look something like this (warning, untested):
// Assuming $my-sprites is your sprite map variable
$map-path: sprite-path($my-sprites);
$map-height: image-height($map-path);
$map-width: image-width($map-path);
In the latest version of Sass (3.4) sprite-path() returns the full filesystem path while image-width() expects a path relative to the images directory. But there is a simple solution:
sprite-width($sprite-map);
sprite-height($sprite-map);
You can get a unit value by using the magical dimension functions <map>-sprite-height and <map>-sprite-width.
// Note: "my-icons" represents the folder name that contains your sprites.
#import "my-icons/*.png";
$box-padding: 5px;
$height: my-icons-sprite-height(some_icon);
$width: my-icons-sprite-width(some_icon);
.somediv {
height:$height + $box-padding;
width:$width + $box-padding;
}
Check the official documentation for more details.
Ext.getBody().getSize() gets you height and width of the screen but i dont think you can write this in SASS