/
Gists
/
Bootstrap
Gists - Bootstrap
On gists
Bootstrap
Bootstrap 4 font size utitility helper
font-size-helper.scss #
//--- demand methods --- //
@function to-string($value) {
@return inspect($value);
}
/// Replace `$search` with `$replace` in `$string`
/// @author Hugo Giraudel
/// @param {String} $string - Initial string
/// @param {String} $search - Substring to replace
/// @param {String} $replace ('') - New value
/// @return {String} - Updated string
@function str-replace($string, $search, $replace: '') {
$index: str-index($string, $search);
@if $index {
@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
}
@return $string;
}
/* HELPER */
$fontSizeStart: 0.1;
$fontSizeEnd : 6;
$fontUnit: 'rem';
@each $breakpoint in map-keys($grid-breakpoints)
{
@include media-breakpoint-up($breakpoint)
{
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
$i: $fontSizeStart;
@while $i <= $fontSizeEnd
{
$iSafe: str-replace(to-string($i), '.', '_');
.fs#{$infix}-#{$iSafe}
{
font-size: #{$i}#{$fontUnit};
}
$i: $i + 0.1;
}
}
}
On gists
Bootstrap - font size utility classes
•
Bootstrap
fs.scss #
// ----
// libsass (v3.5.4)
// ----
@function to-string($value) {
@return inspect($value);
}
/// Replace `$search` with `$replace` in `$string`
/// @author Hugo Giraudel
/// @param {String} $string - Initial string
/// @param {String} $search - Substring to replace
/// @param {String} $replace ('') - New value
/// @return {String} - Updated string
@function str-replace($string, $search, $replace: '') {
$index: str-index($string, $search);
@if $index {
@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
}
@return $string;
}
$i: 0.1;
@while $i <= 4
{
$iSafe: str-replace(to-string($i), '.', '_');
.fs-#{$iSafe}
{
font-size: #{$i}rem;
}
$i: $i + 0.1;
}
On gists
Bootstrap
Bootstrap mixins
bootstrap-mixins.scss #
@mixin respond($minWidth: 0, $maxWidth: 0) {
@if $minWidth and $maxWidth
{
@media screen and (min-width: $minWidth) and (max-width: $maxWidth) { @content; }
}
@else if $minWidth
{
@media screen and (min-width: $minWidth) { @content; }
}
@else if $maxWidth
{
@media screen and (max-width: $maxWidth) { @content; }
}
@else
{
@warn "error - undefined params";
}
}
@mixin breakpoint($class)
{
@if $class == xs
{
@media (max-width: 480px) { @content; }
}
@elseif $class == is
{
@media (max-width: 767px) { @content; }
}
@else if $class == sm
{
@media (max-width: 991px){ @content; }
}
@else if $class == md
{
@media (max-width: 1199px) { @content; }
}
@else if $class == lg
{
@media (min-width: 1200px) { @content; }
}
@else
{
@warn "Breakpoint mixin supports: is, xs, sm, md, lg";
}
}
#test
{
@include breakpoint(lg)
{
background: red;
}
@include breakpoint(md)
{
background: green;
}
@include breakpoint(sm)
{
background: purple;
}
@include breakpoint(xs)
{
background: blue;
}
@include breakpoint(is)
{
background: gold;
}
}
On gists
CSS
Bootstrap
CSS trick
From http://stackoverflow.com/questions/26939104/clear-rows-when-doing-multi-responsive-columns-bootstrap/33540628#33540628
bootstrap-autoclear.css #
@media (min-width:1200px){
.auto-clear .col-lg-1:nth-child(12n+1){clear:left;}
.auto-clear .col-lg-2:nth-child(6n+1){clear:left;}
.auto-clear .col-lg-3:nth-child(4n+1){clear:left;}
.auto-clear .col-lg-4:nth-child(3n+1){clear:left;}
.auto-clear .col-lg-6:nth-child(odd){clear:left;}
}
@media (min-width:992px) and (max-width:1199px){
.auto-clear .col-md-1:nth-child(12n+1){clear:left;}
.auto-clear .col-md-2:nth-child(6n+1){clear:left;}
.auto-clear .col-md-3:nth-child(4n+1){clear:left;}
.auto-clear .col-md-4:nth-child(3n+1){clear:left;}
.auto-clear .col-md-6:nth-child(odd){clear:left;}
}
@media (min-width:768px) and (max-width:991px){
.auto-clear .col-sm-1:nth-child(12n+1){clear:left;}
.auto-clear .col-sm-2:nth-child(6n+1){clear:left;}
.auto-clear .col-sm-3:nth-child(4n+1){clear:left;}
.auto-clear .col-sm-4:nth-child(3n+1){clear:left;}
.auto-clear .col-sm-6:nth-child(odd){clear:left;}
}
@media (max-width:767px){
.auto-clear .col-xs-1:nth-child(12n+1){clear:left;}
.auto-clear .col-xs-2:nth-child(6n+1){clear:left;}
.auto-clear .col-xs-3:nth-child(4n+1){clear:left;}
.auto-clear .col-xs-4:nth-child(3n+1){clear:left;}
.auto-clear .col-xs-6:nth-child(odd){clear:left;}
}
On gists
Nette
Bootstrap
Vykreslení objektu Nette\Utils\Paginator, použití {include ../paginator.latte, paginator => $paginator}, kde $paginator máme předán z presen
paginator.latte #
{** Bootstrapové vykreslení paginatoru *}
{default $maxOdkazu = 15}
{default $postupnychStranek = 4}
{var $min = $paginator->getBase()}
{var $max = $paginator->getPageCount()}
{var $pocet = ($max - $min)}
{var $aktStrana = $paginator->getPage()}
{var $doplnkovychStran = $maxOdkazu - 2 - ($postupnychStranek*2) + 1}
{var $volnychMist = $maxOdkazu - $doplnkovychStran}
{var $doplnkovyKrok = ceil(($max - $min) / $volnychMist)}
<ul class="pagination">
{* odkaz na předchozí stranu, když jsem na první straně tak odkazuje na sebe *}
<li n:class="$paginator->isFirst()?disabled"><a n:href="this, page => $paginator->isFirst()?$aktStrana:($aktStrana-1)">«</a></li>
{if (($max-$min)<=$maxOdkazu)} {* Dají se odkazy vykreslit postupně? *}
{for $p = $min;$p<=$max;$p++}
<li n:class="($aktStrana == $p)? active">
<a n:href="this, page => $p">{$p}</a>
</li>
{/for}
{else}
{for $p = $min;$p<=$max;$p++}
{var $prvniAPosledni = ($p == $min || $p == $max)}
{var $nejblizsiRozsah = ($p > ($aktStrana - $postupnychStranek) && $p < ($aktStrana + $postupnychStranek))}
{var $doplnek = (($p % $doplnkovyKrok) == 0)}
{if $prvniAPosledni || $nejblizsiRozsah || $doplnek}
<li n:class="($aktStrana == $p)? active">
<a n:href="this, page => $p">{$p}</a>
</li>
{/if}
{/for}
{/if}
{* odkaz na následující stranu, když jsem na poslední straně tak odkazuje na sebe *}
<li n:class="$paginator->isLast()?disabled"><a n:href="this, page => $paginator->isLast()?$aktStrana:($aktStrana+1)">»</a></li>
</ul>