Category: Code

background-image

A responsive Image Slider with Sass

Do JavaScript-Work with a Sass mixin

I was looking for a simple responsive image Slider featuring as little markup as possible. It should not be fancy or packed with features, just plain old scrolling through some images. While searching CodePen for inspiration I acutally ran over this pen which was doing exactly what I wanted. Also with CSS only. But when I was trying to write keyframes for another amount of images I though that it would get way overboard if I needed to recalculate the numbers whenever I wanted to change the image count. So I took over the CSS into my Sass workspace and wrote a mixin for the keyframes. This is what I want to go over today. You can check out the demo here if you want to have it full screen.

Continue reading “A responsive Image Slider with Sass”

Shrinking sticky header

how a header is fixed smoothly and part of the element is shrunk

A while ago I was asked how to get a similar effect for the navbar like in this template. After taking a look at the code I was not super happy with how they solved the problem and decided to do it a little faster and easiert. The result can be seen on the demo page.

Continue reading “Shrinking sticky header”

Two Menus, One Responsive Off-Canvas Navigation

two menus combined into one off-canvas nav

I created this menu at work, when we wanted to have two menus but just one off-canvas navigation after the collapse. The idea was to combine an off-canvas menu with a classic navbar and then merge them into one separate off-canvas navigation on the collapse. Suprisingly, this proved to be not as easy as I initially had thought. But it was still achieved in the end, here you’ll see how.

Continue reading “Two Menus, One Responsive Off-Canvas Navigation”

Basic responsive menu (off-canvas with flexbox)

pretty much the easiest 1-Level-Menu ever

Menus. The first Menu I wrote was a list that was made looking like a navigation with CSS. I still use a lisst for a drop down menu. But since we are finally ready to use Flexbox, I have given up on lists and turned to a simpler markip. This navigation is written with flexbos and becomes off-canvas once it collapses.

Continue reading “Basic responsive menu (off-canvas with flexbox)”

Responsive Blogger Menus: 3-Level dropdown from list

A dropdown menu without coding skills

When I first started creating responsive Websites, navigation was always one of the hardest things to accomplish. Because of that, I almost always went with Bootstrap. But using a pretty huge framework for something pretty small like a menu pretty soon started bothering me. So I searched for tutorials on how to write a responsive menu and soon started, to write my own, because there was almost always something that I did not like.

For all of you out there that are in the same position I was, when I started, I created this menu. It is a three level navigation, that will be generated from a simple link list.

Continue reading “Responsive Blogger Menus: 3-Level dropdown from list”

A front Matter generator with ruby

Why I will no longer remember my front matter variables

After an Introduction to Java a few years ago in school I decided to leave the programming languages behind me. I think if we’d have gotten an introduction to Ruby, my opinion would have been different. I had studied ruby for one day, when I wrote the first version of this generator. After a year of Java I was not even able to program as much functionality as I can with just a few lines of JavaScript and CSS today. And the thing I wrote in ruby is definitely more useful. Because It means that I will never again write front matter declarations in a jekyll page.

Continue reading “A front Matter generator with ruby”