LESS mixins I use

2018 10 07 No Comments

Hey guys. I am using LESS as  pre-processing languages for years. I use mixins in every project to increase readability of code and reduce amount of code.  (more…)

CSS ellipsis text

2018 07 05 No Comments

CSS3 gave us perfect property: text-overflow.
We have ability to cut off words.

In CSS pre-processer there are many mixins, I know. But I wanted to share my little mixin 😀

Use like this:

.ellipsis-text(@LineNumber);

See the Pen RJmQXG by ozer (@ozer) on CodePen.

Also SASS version

@mixin ellipsis($line) {
	display: -webkit-box;
	-webkit-line-clamp: $line;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}
/*
usage:
@include ellipsis(2);
*/

How I start to code CSS

2017 09 10 No Comments

Hello,
Usually I am using these lines to start new project. It makes coding HTML easy.

/* ================== clearfix ================== */
.cf:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } .c
.cf { display: inline-block; }
* html .cf { height: 1%; }
.cf { display: block; }

/* ================== useful ================== */
.cb {clear:both}
.dib {display: inline-block;}
.db {display: block;}
.fl {float: left;}
.fr {float: right;}

/* ================== box sizing ================== */
*, *:before, *:after {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}

*:focus {outline: none;}

Regards.