Category: Web development

Run NPM package for multiple files (using the example of csso-cli)

Some NPM packages already offer the possibility to be applied to several files of a directory at the same time – for instance, node-sass can convert a whole directory of SCSS files into CSS files. The minifier tool csso-cli does not offer an option to minify multiple files at once – here I show a workaround to do this anyway. Continue reading Run NPM package for multiple files (using the example of csso-cli)

Just vertically center one specific flex item

The CSS align-items: center lets you center flex items which are next to each other, so that their horizontal midpoint is on one horizontal line. But recently I had two flex items and only wanted to center the right one, if the left is higher, but not the left one if the right is higher. For that, I cannot use align-items: center, but the solution is not much more complex:

.center-flex-item {
	margin-bottom: auto;
	margin-top: auto;
}

With that, the flex item .center-flex-item will be centered if a higher item sits beneath it, but the other item will not be centered if .center-flex-item is greater.

Update from June 9, 2017: Easier and with the probably more correct CSS rule for the scenario, it looks like that:

.center-flex-item {
	align-self: center;
}

Thanks to Matthias for the hint!

Adapt CSS for right-to-left languages with Gulp

If a website is displayed in a language which goes from right to left, we need to modify a few CSS rules if the CSS was written for left-to-right languages — for example, we would need to adjust left and right spaces and flip floats. We could make these Adjustments manually, but that can be time-consuming. With the help of Gulp, it is easier and faster. Continue reading Adapt CSS for right-to-left languages with Gulp

Running masonry script depending on viewport width

My newest theme will use the Masonry script to display image grids. But I only need this function if the viewport is wider than a particular width. If the viewport is narrower than this width, the images are displayed below each other, and for that, I do not need to initialize the script. This post shows you how to get this behavior working. Continue reading Running masonry script depending on viewport width