author: Krasimir Tsonev

Krasimir is a blogger, who writes and speaks.
He loves open source and codes awesome stuff.

CSSSteal - Chrome extension that extracts CSS

posted in CSS3 on 2015-09-17

We had to update some of our old pages adding new elements. This means mixing old and new code. Placing HTML markup and JavaScript in legacy pages is not that difficult. Yes, it brings some issues but they are easily solvable. However, the CSS is a whole new story. That’s why I did CSSSteal. It helps me extract the needed styles.

read more comments

CSS variables are here for ages

posted in CSS3 on 2014-08-13

Every front-end developer that starts reading about CSS preprocessors thinks “Oh, finally variables in CSS". Indeed, the ability to create and use variables in CSS makes our code much more flexible. However, I think that there is no need to use a preprocessor to create flexible stylesheets.

read more comments

Simple, good looking separator made with pure CSS

posted in CSS3 on 2014-02-12

I'm currently working on the official site of AbsurdJS. There are a lot of code samples out there and I wanted to present them in JSBins. read more comments

Select drop-down broken under Firefox

posted in CSS3 on 2013-09-27
Firefox has problems if you use <select> element inside a container which has CSS translate applied. To fix that you have to avoid translating and apply the following hack, targeting the element only under Firefox. read more comments

SASS: interpolation in a name of variable

posted in CSS3 on 2013-08-29

I just answered on that question at StackOverflow. That's actually asked a lot last few months.

read more comments

The power of inherit or how to animate pseudo elements

posted in CSS3 on 2013-08-27

Luckily, I have time to watch screencasts from various conferences. Last few weeks I'm watching videos from Fronteers2012. They are all great and it worths checking out. However, there is something which I found really interesting. It's about animating pseudo elements.

read more comments

CSS: common use cases and architecture at VarnaLab

posted in CSS3 on 2013-08-22
Yesterday I made a talk about CSS common use cases and architecture. Floats, pseudo clases, animations, OOCSS, SMACSS, Atomic design and tons of other interesting stuff. read more comments

SASS mixin for grid generation

posted in CSS3 on 2013-08-20

The mixins in SASS are really helpful. Here is something really short which I just start using. It's a mixin which I apply on the grid's container.

read more comments

CSS: Understanding first-child, last-child and nth-child

posted in CSS3 on 2013-08-16

I like the CSS only solutions. Very often I need to select a specific DOM element. Sure I could add a new class, but it is always nice if I can do that inside my stylesheets. It just looks better and keeps my HTML markup clean. first-child, last-child and nth-child are made exactly for this purpose.

read more comments

SASS mixins covering media queries

posted in CSS3 on 2013-08-15

These days I'm working on this little thing. It's a CSS micro framework following atomic concept. My preprocessor of choice is SASS. That's why I wrote several articles on this subject. Today's post is about media queries mixin.

read more comments

Two handy and advanced SASS features and their limitations

posted in CSS3 on 2013-08-13

I really like SASS and I use it a lot in my daily job. There are tons of useful features. However there are some things which I want to do, but I can't. There are limitation in the syntax and missing functionalities. Sharing what I found, I want to know if you meet those limitation and how you get around them.

read more comments

SASS: universal mixin for box model properties

posted in CSS3 on 2013-08-09

I'm currently working on OrganicCSS - a micro framework based on atomic CSS concept. I'm thinking a lot for name conventions, classes and of course mixins. I decided to combine three mixins in a file called _box-model.scss. They will provide a shortcuts for margin, padding and border properties.

read more comments

SASS: @content directive is a wonderful thing

posted in CSS3 on 2013-08-06

I just started using SASS and I love it. A bunch of cool features, which will help me to improve my CSS coding. @content directive is one of them.

read more comments

SASS: differences between mixins, extends and placeholders

posted in CSS3 on 2013-08-05

I used LESS a lot. These days I decided to try SASS and to be honest it's a better choice for CSS preprocessor. It just gives me more functionalities and better control on my code. There are few instruments for architecting your CSS logic - @mixin, @extend and placeholders. However there are differences between them and specific use cases.

read more comments

CSS Challenge #2: Layouting

posted in CSS3 on 2013-08-03

The first challenge, was something which I was thinking about a lot these days. The next one is actually a well known common task, but it is still difficult. In every project we have different types of layouts. Of course there are some patterns. The idea today is to implement them with pure CSS.

read more comments

CSS Challenge #1: expand and center an image

posted in CSS3 on 2013-08-01

That's first of (I hope) many posts with such an idea. Problems solved with pure CSS. No JavaScript. read more comments

CSS: :before and :after pseudo elements in practice

posted in CSS3 on 2013-07-26

By definition :before and :after are CSS pseudo elements. You can use them to insert something before or after the content of an element. There are some great articles giving the basics, but I wanted to write down a blog post for the real use cases. Or, at least, to show what I'm using them for.

read more comments

Get computed css styles for a given element

posted in CSS3 on 2013-06-16
I just found out that it is possible with pure javascript. It's supported in all the major browsers. Find more information here. read more comments

CSS: The background color and overlapping rows

posted in CSS3 on 2013-05-22

The goal is to achieve a background of the text inside an inline element.

read more comments

CSS: transition from pixels to auto

posted in CSS3 on 2013-05-14

As you may know I just updated my web site. There are five columns which nicely slide up and down on a lower resolution. In other words, accordion-like navigation. Initially I made this effect with JavaScript. But there was a bug and I decided to use pure CSS. I wanted to define everything in CSS classes which to add or remove. The idea wasn't bad except the fact that every column contains dynamic content and I wasn't able to set the exact height when the column is slided down.

read more comments

CSS: using float property

posted in CSS3 on 2013-04-08

float property is one of those CSS rules which are somehow difficult to understand. Before a couple of days I had a problem with floating divs. I solved it and decided to write an article about the solution. The article also covers some basics about floating.

read more comments