Левый блок col по ширине может быть равен 2.5(два с половиной стандартных столбца)
.col {
@include make-col-ready();
@include make-col(2.5);
}
.col-1-of-5 {
@include make-col-ready();
@include make-col(1, 5);
}
сайты не нарисованные под сетку bootstrap
@mixin transition-base($properties...){
// Свойство transition-property по-умолчанию равно значению all
// т.е. запись transition: 250ms ease 0s; будет
// эквивалентна записи transition: all 250ms ease 0s;
transition: 250ms ease 0s;
@if length($properties) > 0 {
transition-property: $properties;
}
}
@include transition-base();
@include transition-base(padding, color, border-color);
.col-xs-1of5, .col-sm-1of5, .col-md-1of5, .col-lg-1of5, .col-xl-1of5 {
@include make-col-ready();
width: 100%;
}
.col-xs-1of5 { @include make-col(1, 5); }
@include media-breakpoint-up(sm) { .col-sm-1of5 { @include make-col(1, 5); } }
@include media-breakpoint-up(md) { .col-md-1of5 { @include make-col(1, 5); } }
@include media-breakpoint-up(lg) { .col-lg-1of5 { @include make-col(1, 5); } }
@include media-breakpoint-up(xl) { .col-xl-1of5 { @include make-col(1, 5); } }
<div class="col-sm-1of5">1</div>
<div class="col-sm-1of5">2</div>
<div class="col-sm-1of5">3</div>
<div class="col-sm-1of5">4</div>
<div class="col-sm-1of5">5</div>
$root-font-size: 16px;
@function rem($size) {
@return $size / $root-font-size * 1rem;
}
html {
font-size: ($root-font-size / 16px) * 100%;
}
.some-block {
font-size: rem(24px);
}
"devDependencies": {
"browser-sync": "^2.17.1",
"del": "^2.2.2",
"gulp": "^3.9.1",
"gulp-autoprefixer": "*",
"gulp-changed": "^1.3.2",
"gulp-changed-in-place": "^2.0.3",
"gulp-cssnano": "^2.1.2",
"gulp-data": "^1.2.1",
"gulp-if": "^2.0.1",
"gulp-imagemin": "^3.0.3",
"gulp-notify": "^2.2.0",
"gulp-rename": "^1.2.2",
"gulp-rigger": "^0.5.8",
"gulp-sass": "^2.3.2",
"gulp-sequence": "^0.4.6",
"gulp-sourcemaps": "^1.6.0",
"gulp-twig": "^0.5.0",
"gulp-uglify": "^2.0.0",
"require-dir": "^0.3.1"
}
"devDependencies": {
"autoprefixer": "^6.5.3",
"babel-core": "^6.18.2",
"babel-loader": "^6.2.8",
"babel-preset-es2015": "^6.18.0",
"babel-preset-stage-0": "^6.16.0",
"browser-sync": "^2.18.2",
"css-loader": "^0.26.0",
"del": "^2.2.2",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.9.0",
"gulp": "^3.9.1",
"gulp-autoprefixer": "^3.1.1",
"gulp-changed": "^1.3.2",
"gulp-changed-in-place": "^2.0.3",
"gulp-concat": "^2.6.1",
"gulp-if": "^2.0.2",
"gulp-imagemin": "^3.1.1",
"gulp-notify": "^2.2.0",
"gulp-rename": "^1.2.2",
"gulp-sass": "^2.3.2",
"gulp-sequence": "^0.4.6",
"gulp-sourcemaps": "^1.9.1",
"gulp-util": "^3.0.7",
"node-sass": "^3.13.0",
"require-dir": "^0.3.1",
"sass-loader": "^4.0.2",
"style-loader": "^0.13.1",
"webpack": "^1.13.3",
"webpack-stream": "^3.2.0"
},