Css – Andreas Plahn Developer Blog

Web Compiler – Visual Studio Marketplace

The easiest and most powerful way to compile LESS, Scss, Stylus, JSX and CoffeeScript files directly within Visual Studio or through MSBuild.

Source: Web Compiler – Visual Studio Marketplace

Solution for responsive images covering entire container and keeping aspect ratio

This solution is probably already out there somewhere on the interwebs, but I write it down for now.

I’ve been working with a Bootstrap 4 based website a lot lately.
Today I got the requirement to make an background image adjust to the height of its sibling column but at the same cover the entire background of its container.

I want the entire container box to be covered by the background image and still keeping its aspect ratio in various screen sizes, it’s ok with clipping and stretching (if image is to small). Here is a solution:

html:

...column 1 html content...

</div>

...column 2 other various height html content...

</div>

css:

#teaser1

{

height: 100%;

background-image: url('/globalassets/top-image.jpg');

background-repeat: no-repeat;

background-position: center;

background-size: cover;

}

Materialize is a modern responsive CSS framework based on Material Design by Google.

Source: Documentation – Materialize

Run default Gulp tasks in Visual Studio 2015

How to run the default gulp tasks for a front end web project in Visual Studio 2015.

Open Task Runner Explorer window in Visual Studio.
Right-click Tasks > build (build should be the list of tasks needed) and Run. Css and js files will be created.