How to add Autoprefixer to work with Bootstrap using LESS

If you’ve been following the latest Bootstrap releases, you are probably aware that starting with version 3.2, it doesn’t use mixins for vendor prefixes.

#12670: Drop use of vendor prefix mixins and use autoprefixer as part of our Gruntfile.

Mixins were moved to a separate vendor-prefixes.less file and kept for backward compatibility. However, they will be dropped entirely starting with version 4.

Who does it actually affect?

Well, it really affects me. And you, if you use a CSS pre-processor! :)

Usually, when I use Bootstrap I work with its LESS files. This way I don’t need to include a separate bootstrap.min.css into my HTML. It also gives me 100% control over my final CSS file, because I can exclude those Bootstrap modules that I don’t need in a current project, to keep it efficient.

So now, if you compile your LESS files into CSS, you will notice that you don’t have browser-specific prefixes in your CSS. Actually, some Bootstrap modules would be entirely broken. For example, Bootstrap carousel won’t slide at all, because it lacks transition browser prefixes.

To solve this issue, we have three options:

Read more

Custom responsive grid-based CSS framework

These days I’ve been re-developing my online portfolio, so it is mobile friendly and more interactive. This work hasn’t been finished yet, so here is a sneak peek:

As you can see, it has a pretty uncommon timeline-based structure, which divides the screen into two equal 50% width columns. Each of these columns contains separate projects and events, that have their own <sections> with different data inside. The main question for me was - how to properly structure all of them to build a sustainable DOM structure that would be responsive and would allow me to load all my projects using JSON in the future?

Quite an interesting challenge, right? :)

Read more

How to validate CPF number using custom method in jQuery.validate plugin

Last week, I polished the subscription process of an app that I’m currently working on for better validation and more friendly UI/UX.

During the subscription this form collects a non-confidential CPF number, which is the Brazilian analog of SIN (Canada) or SSN (USA). This information is critical to be verified upfront, so it’s required to be checked during subscription process, on a client side.

The entire subscription form is being validated by jQuery.Validate plugin, which has many of options for verification, such as digits only, min/max number of characters or even built-in methods for credit card validation.

Certainly, this plugin doesn’t have a built-in method for CPF number validation, since it’s very rarely needed. So I decided to write a custom method for its validation.

Read more

A better way to center div or section horizontally and vertically with CSS

Yes, you’ve guessed it - we’ve got a bit of CSS magic this week. :)

Usually, to center a section with CSS you code something like this:

div {
   width: 100px;
   height: 100px;
   position: absolute;
   left: 50%;
   margin-left: -50px;
   top: 50%;
   margin-top: -50px;
}

This week, I found a better way to achieve the same results:

Read more

Dribbble Genealogy: Meet your Dribbble ancestors

This is my new web experiment with JavaScript, jQuery and Dribbble API – called “Dribbble Genealogy“: (API was deprecated, see my UPD below)

• If you’re, by any chance, a Dribbble Player, you can enter your username to generate your own dribbble genealogy.
• If not, you may use my username – Rork, or try these IDs to check the functionality: 14392, 2942, 38531, 1433, 34963.

This time, I’m connecting to API directly with AJAX requests using JSONP without Jribbble library I used before. So I’m going to do some re-work of Dribbble Profile too and add its dependency-free version to Github in some time.

Here is the Github repo.

UPDATE

Unfortunately, Dribbble API introduced the limit that prevents looking into your users’ ancestors data.