visuelle Gedanken von Martin Wolf

26. September 2014

Dropbox inspired .card with some CSS animations

See the Pen Dropbox inspired .card with some CSS animations by Martin Wolf (@martinwolf) on CodePen.

06. April 2014

Weekly Recap

Hello lovely readers. This week was a busy one for me so I didn’t manage to read a lot and thus the list is a little shorter than in the past. But there are still very good articles in here. Have fun!

30. März 2014

Weekly Recap

Hello everybody! It’s sunday again and this means it’s time for some link tips for you guys. A lot of good stuff this week. Let’s do this:

29. März 2014

Using BEM Syntax with Sass 3.3

As you might know I’m a big fan of the BEM Syntax. If you haven’t heard of it, it’s basically a way to name your CSS classes in a way that makes sense and gives everybody involved with writing CSS for the site some knowledge of the structure. It really helps to write modular CSS and makes it easy to understand the code even if you get into a project later on.

BEM stands for Block Element Modifier. Here is an example to get you started:

.nav {
    // This is the BLOCK
    margin-bottom: 20px;
}

.nav__item {
    // This is the ELEMENT
    color: #000;
}

.nav__item--active {
    // this is the MODIFIER
    color: #1193e5;
}

Some people don’t like how the notation looks, but I assure you it works really well and even some people I first had to convince are totally stoked now.
Now let’s look at Sass 3.3 and what it has to offer.

With Sass you can use & to reference the selector which is already in place if you want to nest code. Just like this:

.nav {
    margin-bottom: 20px;

    & a {
        color: #000;
    }
}

This compiles to the following CSS:

.nav {
    margin-bottom: 20px;
}

.nav a {
    color: #000;
}

That’s pretty nice and straightforward and helps a lot in authoring CSS. With Sass 3.3 it gets even better if you are a BEM guy or gal. Now you can write our first example like this and get the exact same CSS output only that your Sass looks cleaner and you have less to write:

.nav {
    // This is the BLOCK
    margin-bottom: 20px;

    &__item {
        // This is the ELEMENT
        color: #000;
       
        &--active {
            // this is the MODIFIER
            color: #1193e5;
        }
    }
}

The CSS output looks as follows:

.nav {
    margin-bottom: 20px;
}
.nav__item {
    color: #000;
}
.nav__item--active {
    color: #1193e5;
}

I haven’t used that in production myself yet, but I will as soon as possible because I think it’s great. But I can imagine that if one would nest to deep it can get a little confusing. But the good thing is, just because you use it in one place doesn’t mean you have to use it every time. Nevertheless, make sure you Sass follows some kind of style guide.

Now if you ask yourself if you have Sass 3.3 installed you can check this by typing

$ sass -v

into you console of choice. If you are not on 3.3 you can update with

$ sudo gem install sass

After installing check if everything went well with

$ sass -v

As of writing this post Sass is at Version 3.3.4 (Maptastic Maple).

If you have any questions or suggestions, feel free to send me a tweet at @_martinwolf or write an email at martin@visuellegedanken.de

Hope this article helps some of you. Have a nice day!

26. März 2014

The Right Pseudo Elements Notation

Did you know that there is a difference between pseudo elements and pseudo classes and that they actually should be written differently?

Pseudo classes refer to the state of the selected element, like :hover, :focus or :last-child.

For example:

p:last-child {
    margin-bottom: 0;
}

Pseudo elements on the other hand are actual elements, that get somehow created by CSS. The newest Chrome Dev Tools are making a good job in demonstrating that with actually showing them in the code. To make the difference clear pseudo elements are since CSS3 notated with two colons.

blockqoute::before {
    content: '“';
}

blockqoute::after {
    content: '”';
}

(Be aware, if you need to support IE8 you have to write it in the wrong single-colon CSS 2.1 syntax with only one colon.)

You can read more on pseudo elements at the W3.

23. März 2014

Weekly Recap

Hello everyone, feeling good today? You should, it’s Weekly Recap day! There was actually plenty of things going on the past week. Julia Ann Horvath talking about why she had to leave GitHub, an indiegogo campaign for implementing picture in Blink and much more. Enjoy!

.widget:media(max-width: 30em) {
    /* styles */
}

09. März 2014

Weekly Recap

Hey everyone, I already told you about the new Editor by GitHub: Atom. It’s an invite only beta at the moment, but I got two more invites to give away. It’s currently Mac only, keep that in mind. So if you want one of the invites, just write a comment. First come, first serve. And now: Happy reading.

  • CSS Shake
    Not that I think this is very useful, but it’s definitely funny. (via)

  • New UI in Firefox Aurora
    Firefox Aurora came out in Version 29 and it sports a new UI, which I really like. (Aurora is even more beta than Firefox beta, but you can get an idea what is coming down the pipe.)

  • CodeKit 2 Release
    CodeKit 2 is here. If you are not a fan of the command line and thus don’t use things like Grunt.js, this is THE app for you.

  • MAMP 3
    And another update to a very useful and already great, if not very good looking, app. Haven’t tried the new version, but it sure looks like it’s a worthy update.

  • Just Do One Thing
    Good advice. Make small steps. Achieve small goals. Feel good and keep going. It’ll add up.

  • Improving the CSS performance of fixed position elements
    Handy trick to stop fixed positioned elements from repainting on scroll.

  • Ridiculously Responsive Social Sharing Buttons
    Social Sharing Buttons are always a pain to implement responsively and responsibly. rrssb is here to help.

16. Februar 2014

Weekly Recap

This week the links are all on very different topics. Hope you like it.

  • A simple guide to responsive design.
    You are just getting started with responsive design and want an easy to understand introduction to some basic coding principles? Here you go, this is for you.

  • InstantClick
    This Javascript library preloads links you are about to click, more precisely when you hover over a link. There are even options for only preloading on mouse down so you don’t have to waste requests and still get a small performance boost. This is a pretty clever idea which will makes your site feel faster even if it isn’t.

  • Sublime Text Setup
    A simple starting guide to Sublime Text by Dave Rupert. Also lots of recommendations and tips in the comments.

  • Mediocre ideas, showing up, and persistence.
    Although this article by Chris Coyier is from last year, it’s good to revisit it once in a while. Now is this time.

  • Protecting Against Link Rot While Embracing the Future
    Making sure embedded content will always be accessible even if a service closes is a pretty good idea. Here is how you can do it with embedded CodePens. Even though we all hope we will never be without CodePen.

  • Parent selector: On has() and ^
    Hugo Giraudel explains the two possible syntax options for the upcoming CSS parent selector. I’m with him, by the way.

  • Multiple Simultaneous Ajax Requests (with one callback) in jQuery
    I’m still relatively new to Javascript, or jQuery, compared to HTML and CSS and am learning so much with every article I read on the topic. If you read this one, make also sure to read the comments, they provide an even simpler solution for the explained problem.

  • Harry Roberts on big CSS, working for Sky, and being a home bird
    Nice, short interview with Harry Roberts. Worth a read.

09. Februar 2014

Weekly Recap

Hey there, it’s time for some awesome web development links. This week is very heavy on CSS and performance. Enjoy!

07. Februar 2014

Screencast: Menüpunkte gleichmäßig horizontal verteilen mit text-align: justify;

Themenvorschläge? Wünsche für weitere Screencasts? Wenn es euch gefallen hat, vergesst nicht den Like. Danke! n_n

Mittlerweile wurde auch eine 100% funktionierende Lösung gefunden: CodePen. Ein Dankeschön geht an Christopher Bohnenberger!

Update: Funktioniert offenbar nicht in Firefox. :/

So funktioniert es in Firefox, dann bleibt aber noch der Abstand unten: CodePen.

Abonnieren für mehr Screencasts.