v.1.1.4
A pack of useful mixins, functions, classes and placeholders for a faster development. Available in Stylus, LESS, and SCSS.
Due language limitations, aliases are not available in every language.
Creates a four colored border in the desired element's text.
.text-border(red, 1px, yellow, 1px, green, 1px, purple, 1px)
text-shadow: 1px 1px red, -1px -1px yellow, 1px -1px green, -1px 1px purple;
Changes the placeholder, border and outline colors.
.error-input(red)
input {
border: 1px solid red !important;
color: red;
outline-color: red;
}
input::-webkit-input-placeholder {
color: red;
}
input::-moz-placeholder {
color: red;
}
input:-moz-placeholder {
color: red;
}
input:-ms-input-placeholder {
color: red;
}
input::placeholder {
color: red;
}
input:focus {
outline-color: red;
}
Changes the placeholder color.
.placeholder(#eee)
input::-webkit-input-placeholder {
color: red;
}
input::-moz-placeholder {
color: red;
}
input:-moz-placeholder {
color: red;
}
input:-ms-input-placeholder {
color: red;
}
input::placeholder {
color: red;
}
input:focus {
outline-color: red;
}
Removes the placeholder while the input is focused and empty. Also removes the 'invalid' input state red box shadow from Firefox.
&:extend(.fix-input all);
input:focus::-webkit-input-placeholder {
color: transparent;
}
input:invalid {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
Enables font antialiasing.
.anti-aliasing, .font-smoothing
&:extend(.antialiasing);
-moz-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-moz-text-rendering: optimizeLegibility;
-ms-font-smoothing: antialiased;
-ms-text-rendering: optimizeLegibility;
-o-font-smoothing: antialiased;
-o-text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-webkit-text-rendering: optimizeLegibility;
font-smoothing: antialiased;
text-rendering: optimizeLegibility;
Changes the scrollbar's default style (Not for Firefox).
.scroll-bar(6px, transparent, #ccc, 5px)
html {
scrollbar-3dlight-color: transparent;
scrollbar-arrow-color: #666;
scrollbar-base-color: transparent;
scrollbar-darkshadow-color: transparent;
scrollbar-face-color: #ccc;
scrollbar-highlight-color: transparent;
scrollbar-shadow-color: transparent;
scrollbar-track-color: transparent;
}
html::-webkit-scrollbar {
width: 6px;
height: 6px;
}
html::-webkit-scrollbar-track {
background: transparent;
}
html::-webkit-scrollbar-thumb {
background: #ccc;;
-webkit-border-radius: 5px;
border-radius: 5px;
}
References: Link 0
Disable scrollbar styling by not vendor-prefixed properties.
&:extend(.disable-scroll-styling);
scrollbar-3dlight-color: ThreeDLightShadow !important;
scrollbar-arrow-color: ButtonText !important;
scrollbar-darkshadow-color: ThreeDDarkShadow !important;
scrollbar-face-color: ThreeDFace !important;
scrollbar-highlight-color: ThreeDHighlight !important;
scrollbar-shadow-color: ThreeDDarkShadow !important;
scrollbar-track-color: Scrollbar !important;
References: Link 0
Cross-browser border-radius.
.border-radius(5px)
-khtml-border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-ms-behaviour: url('https://cdn.rawgit.com/ghaschel/koffie/master/htc/PIE.htc');
behavior: url('https://cdn.rawgit.com/ghaschel/koffie/master/htc/PIE.htc');
References: Link 0
Wrapper function for easier use of padding-left and padding-right.
.padding-x(3px)
padding-left: 3px;
padding-right: 3px;
Wrapper function for easier use of padding-top and padding-bottom.
.padding-y(6px)
padding-bottom: 6px;
padding-top: 6px;
Wrapper function for easier use of margin-top and margin-bottom.
.margin-y(9px)
margin-bottom: 9px;
margin-top: 9px;
Wrapper function for easier use of margin-left and margin-right.
.margin-x(6px)
margin-left: 6px;
margin-right: 6px;
Cross-browser opacity function.
.opacity(0.35)
-webkit-opacity: 0.35;
-khtml-opacity: 0.35;
-moz-opacity: 0.35;
opacity: 0.35;
-ms-filter: progrid:DXImageTransform.Microsoft.Alpha(opacity=35);
filter: alpha(opacity=35);
Removes the outline when focus state is active.
&:extend(.nout all);
a {
outline: none;
}
a:focus {
outline: none;
}
Displays a triangle at the element's top.
span:after { .top-triangle(15px, #fff) }
span:after {
border-bottom: 15px solid #fff;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 15px solid transparent;
content: '';
display: inline-block;
height: 1px;
position: absolute;
top: 29px;
width: 1px;
}
Displays a triangle in the element's bottom.
span:after { .bottom-triangle(15px, #fff) }
span:after {
border-bottom: 15px solid transparent;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 15px solid #fff;
bottom: 29px;
content: '';
display: inline-block;
height: 1px;
position: absolute;
width: 1px;
}
Displays a triangle in the element's left.
span:after { .left-triangle(15px, #fff) }
span:after {
border-bottom: 15px solid transparent;
border-left: 15px solid transparent;
border-right: 15px solid #fff;
border-top: 15px solid transparent
content: '';
display: inline-block;
height: 1px;
left: 29px;
position: absolute;
width: 1px;
}
Displays a triangle in the element's right.
span:after { .right-triangle(15px, #fff) }
span:after {
border-bottom: 15px solid transparent;
border-left: 15px solid #fff;
border-right: 15px solid transparent;
border-top: 15px solid transparent;
content: '';
display: inline-block;
height: 1px;
position: absolute;
right: 29px;
width: 1px;
}
Displays reticences at the line's end in case it doesn't fit.
.txt-ovf, .txtovf
&:extend(.text-overflow);
display: inline-block
max-widt: 100%
overflow: hidden
text-overflow: ellipsis
white-space: nowrap
Disable user content selection.
.nousel
&:extend(.no-user-select);
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
Changes the user content selection color.
.user-select(yellow, red)
p::selection {
color: red;
background: yellow;
}
p::-moz-selection {
color: yellow;
background: red;
}
Fixes the flickering on pseudo elements when animated by transition.
.fixfl
.&:extend(.fix-flickering);
-ms-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
Function for faster transition creation.
.transition(0.3s, ease-in-out, all)
-khtml-transition: 0.3s ease-in-out all;
-moz-transition: 0.3s ease-in-out all;
-ms-transition: 0.3s ease-in-out all;
-o-transition: 0.3s ease-in-out all;
-webkit-transition: 0.3s ease-in-out all;
transition: 0.3s ease-in-out all;
Hides an element from screen readers.
.no-speak
&:extend(.nospeak)
speak: none;
Enables hardware acceleration. Use at the desided element's parent.
.hwacc
&:extend(.hw-accelerated);
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
-webkit-transform: rotateZ(360deg);
backface-visibility: hidden;
perspective: 1000;
Removes select tag's default style.
&:extend(.fixsel all)
select {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
overflow: -moz-hidden-unscrollable;
text-indent: .01px;
text-overflow: '';
}
select::-ms-expand {
display: none;
}
Add a hyphen to broken words.
&:extend(.hyphen);
-moz-hyphens: auto;
-ms-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
References: Link 0
Creates a four colored border in the desired element's text.
@include text-border(red, 1px, yellow, 1px, green, 1px, purple, 1px)
text-shadow: 1px 1px #f00, -1px -1px #ff0, 1px -1px #008000, -1px 1px #800080;
Changes the placeholder color.
@include placeholder(#eee)
input::-webkit-input-placeholder {
color: red;
}
input::-moz-placeholder {
color: red;
}
input:-moz-placeholder {
color: red;
}
input:-ms-input-placeholder {
color: red;
}
input::placeholder {
color: red;
}
input:focus {
outline-color: red;
}
Removes the placeholder while the input is focused and empty.
@include noPhOnFocus()
input:focus::-webkit-input-placeholder {
color: transparent;
}
input:invalid {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
Changes the scrollbar's default style on chrome.
@include scroll-bar(6px, transparent, #ccc, 5px)
html::-webkit-scrollbar {
height: 6px;
width: 6px;
}
html::-webkit-scrollbar-track {
background: transparent;
}
html::-webkit-scrollbar-thumb {
background: #ccc;
-webkit-border-radius: 5px;
border-radius: 5px;
}
References: Link 0
Wrapper function for easier use of padding-left and padding-right.
@include p-x(3px)
padding-left: 3px;
padding-right: 3px;
Wrapper function for easier use of padding-top and padding-bottom.
@include p-y(6px)
padding-bottom: 6px;
padding-top: 6px;
Wrapper function for easier use of margin-top and margin-bottom.
@include m-y(9px)
margin-bottom: 9px;
margin-top: 9px;
Wrapper function for easier use of margin-left and margin-right.
@include margin-x(6px)
margin-left: 6px;
margin-right: 6px;
Removes the outline when focus state is active.
@extend %nout
a {
outline: none;
}
a:focus {
outline: none;
}
Displays a triangle at the element's top.
span:after {
border-bottom: 15px solid #fff;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 15px solid transparent;
content: '';
display: inline-block;
height: 1px;
position: absolute;
top: 29px;
width: 1px;
}
Displays a triangle in the element's bottom.
span:after {
border-bottom: 15px solid transparent;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 15px solid #fff;
bottom: 29px;
content: '';
display: inline-block;
height: 1px;
position: absolute;
width: 1px;
}
Displays a triangle in the element's left.
span:after {
border-bottom: 15px solid transparent;
border-left: 15px solid transparent;
border-right: 15px solid #fff;
border-top: 15px solid transparent
content: '';
display: inline-block;
height: 1px;
left: 29px;
position: absolute;
width: 1px;
}
Displays a triangle in the element's right.
span:after {
border-bottom: 15px solid transparent;
border-left: 15px solid #fff;
border-right: 15px solid transparent;
border-top: 15px solid transparent;
content: '';
display: inline-block;
height: 1px;
position: absolute;
right: 29px;
width: 1px;
}
Displays reticences at the line's end in case it doesn't fit.
%txt-ovf, %txtovf
@extend %text-overflow
overflow: hidden
white-space: nowrap
text-overflow: ellipsis
max-widt: 100%
display: inline-block
Disable user content selection.
%nousel
@extend %no-user-select
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
-webkit-user-select: none;
user-select: none;
Changes the user content selection color.
usel()
@include user-select(yellow, red)
p::selection {
background: yellow;
color: red;
}
p::-moz-selection {
background: red;
color: yellow;
}
Fixes the flickering on pseudo elements when animated by transition.
%fixfl
@extend %fix-flickering
-ms-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
Function for faster transition creation.
@include transition(0.3s, ease-in-out, all)
-webkit-transition: 0.3s ease-in-out all;
-khtml-transition: 0.3s ease-in-out all;
-moz-transition: 0.3s ease-in-out all;
-ms-transition: 0.3s ease-in-out all;
-o-transition: 0.3s ease-in-out all;
transition: 0.3s ease-in-out all;
Hides an element from screen readers.
%no-speak
@extend %nospeak
speak: none;
Enables hardware acceleration. Use at the desided element's parent.
%hwacc
@extend %hw-accelerated
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
-webkit-transform: rotateZ(360deg);
backface-visibility: hidden;
perspective: 1000;
Removes select tag's default style.
@include fixsel()
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
overflow: -moz-hidden-unscrollable;
text-indent: .01px;
text-overflow: '';
}
select::-ms-expand {
display: none;
}
Add a hyphen to broken words.
@extend %hyphen
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
References: Link 0
Creates a four colored border in the desired element's text.
tb()
text-border( red, 1px, yellow, 1px, green, 1px, purple, 1px )
text-shadow: 1px 1px #f00, -1px -1px #ff0, 1px -1px #008000, -1px 1px #800080;
Changes the placeholder, border and outline colors.
error(), err()
error-input(red)
input {
border: 1px solid red !important;
color: red;
outline-color: red;
}
input::-webkit-input-placeholder {
color: red;
}
input::-moz-placeholder {
color: red;
}
input:-moz-placeholder {
color: red;
}
input:-ms-input-placeholder {
color: red;
}
input::placeholder {
color: red;
}
input:focus {
outline-color: red;
}
Changes the placeholder color.
ph()
placeholder(#eee)
input::-webkit-input-placeholder {
color: red;
}
input::-moz-placeholder {
color: red;
}
input:-moz-placeholder {
color: red;
}
input:-ms-input-placeholder {
color: red;
}
input::placeholder {
color: red;
}
input:focus {
outline-color: red;
}
Removes the placeholder while the input is focused and empty. Also removes the 'invalid' input state red box shadow from Firefox.
fix-input()
input:focus::-webkit-input-placeholder {
color: transparent;
}
input:invalid {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
Enables font antialiasing.
$anti-aliasing, $font-smoothing
$antialiasing
-moz-font-smoothing antialiased
-moz-osx-font-smoothing grayscale
-moz-text-rendering optimizeLegibility
-ms-font-smoothing antialiased
-ms-text-rendering optimizeLegibility
-o-font-smoothing antialiased
-o-text-rendering optimizeLegibility
-webkit-font-smoothing antialiased
-webkit-text-rendering optimizeLegibility
font-smoothing antialiased
text-rendering optimizeLegibility
Changes the scrollbar's default style (Not for Firefox).
scroll-bar(6px, transparent, #ccc, 5px)
html {
scrollbar-3dlight-color: transparent;
scrollbar-arrow-color: #666;
scrollbar-base-color: transparent;
scrollbar-darkshadow-color: transparent;
scrollbar-face-color: #ccc;
scrollbar-highlight-color: transparent;
scrollbar-shadow-color: transparent;
scrollbar-track-color: transparent;
}
html::-webkit-scrollbar {
width: 6px;
height: 6px;
}
html::-webkit-scrollbar-track {
background: transparent;
}
html::-webkit-scrollbar-thumb {
background: #ccc;;
-webkit-border-radius: 5px;
border-radius: 5px;
}
References: Link 0
Disable scrollbar styling by not vendor-prefixed properties.
disable-scroll-styling()
scrollbar-3dlight-color: ThreeDLightShadow !important;
scrollbar-arrow-color: ButtonText !important;
scrollbar-darkshadow-color: ThreeDDarkShadow !important;
scrollbar-face-color: ThreeDFace !important;
scrollbar-highlight-color: ThreeDHighlight !important;
scrollbar-shadow-color: ThreeDDarkShadow !important;
scrollbar-track-color: Scrollbar !important;
References: Link 0
Cross-browser border-radius.
bradius()
border-radius(5px)
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
behavior: url('https://cdn.rawgit.com/ghaschel/koffie/master/htc/PIE.htc');
-ms-behaviour: url('https://cdn.rawgit.com/ghaschel/koffie/master/htc/PIE.htc');
References: Link 0
Wrapper function for easier use of padding-left and padding-right.
paddingx()
padding-x(3px)
padding-left: 3px;
padding-right: 3px;
Wrapper function for easier use of padding-top and padding-bottom.
paddingy()
padding-y(6px)
padding-bottom: 6px;
padding-top: 6px;
Wrapper function for easier use of margin-top and margin-bottom.
marginy()
margin-y(9px)
margin-bottom: 9px;
margin-top: 9px;
Wrapper function for easier use of margin-left and margin-right.
marginx()
margin-x(6px)
margin-left: 6px;
margin-right: 6px;
Cross-browser opacity function.
opc()
opacity(0.35)
-khtml-opacity: 0.35;
-moz-opacity: 0.35;
-webkit-opacity: 0.35;
opacity: 0.35;
-ms-filter: progrid:DXImageTransform.Microsoft.Alpha(opacity=35);
filter: alpha(opacity=35);
Removes the outline when focus state is active.
nout()
a {
outline: none;
}
a:focus {
outline: none;
}
Displays a triangle at the element's top.
span:after { top-triangle(15px, $fff) }
span:after {
border-bottom: 15px solid #fff;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 15px solid transparent;
content: '';
display: inline-block;
height: 1px;
position: absolute;
top: 29px;
width: 1px;
}
Displays a triangle in the element's bottom.
span:after { bottom-triangle(15px, $fff) }
span:after {
border-bottom: 15px solid transparent;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 15px solid #fff;
bottom: 29px;
content: '';
display: inline-block;
height: 1px;
position: absolute;
width: 1px;
}
Displays a triangle in the element's left.
span:after { left-triangle(15px, $fff) }
span:after {
border-bottom: 15px solid transparent;
border-left: 15px solid transparent;
border-right: 15px solid #fff;
border-top: 15px solid transparent
content: '';
display: inline-block;
height: 1px;
left: 29px;
position: absolute;
width: 1px;
}
Displays a triangle in the element's right.
span:after { right-triangle(15px, $fff) }
span:after {
border-bottom: 15px solid transparent;
border-left: 15px solid #fff;
border-right: 15px solid transparent;
border-top: 15px solid transparent;
content: '';
display: inline-block;
height: 1px;
position: absolute;
right: 29px;
width: 1px;
}
Displays reticences at the line's end in case it doesn't fit.
$txt-ovf, $txtovf
$text-overflow
display: inline-block
max-widt: 100%
overflow: hidden
text-overflow: ellipsis
white-space: nowrap
Disable user content selection.
$nousel
$no-user-select
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
-webkit-user-select: none;
user-select: none;
Changes the user content selection color.
usel()
user-select(yellow, red)
p::selection {
color: red;
background: yellow;
}
p::-moz-selection {
color: yellow;
background: red;
}
Fixes the flickering on pseudo elements when animated by transition.
$fixfl
$fix-flickering
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
Function for faster transition creation.
transition(), trans()
transition(0.3s, ease-in-out, all)
-khtml-transition: 0.3s ease-in-out all;
-moz-transition: 0.3s ease-in-out all;
-ms-transition: 0.3s ease-in-out all;
-o-transition: 0.3s ease-in-out all;
-webkit-transition: 0.3s ease-in-out all;
transition: 0.3s ease-in-out all;
Hides an element from screen readers.
$no-speak
$nospeak
speak: none;
Enables hardware acceleration. Use at the desided element's parent.
$hwacc
$hw-accelerated
-webkit-backface-visibility hidden
-webkit-transform rotateZ( 360deg )
-webkit-perspective 1000
backface-visibility hidden
perspective 1000
Removes select tag's default style.
fixsel()
select {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
overflow: -moz-hidden-unscrollable;
text-indent: .01px;
text-overflow: '';
}
select::-ms-expand {
display: none;
}
Add a hyphen to broken words.
$hyphen
-moz-hyphens: auto;
-ms-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
References: Link 0