Tag: CSS

Replacing Web Compiler With Node Sass

After a long time of unreliable results with Web Compiler, especially in TFS, I decided to replace it with node-sass. Web Compiler is an extension to Visual Studio that listens to changes in your .scss files (among others) and compiles them. It can also be configured to run as part of your TFS build. With our solution this has however been highly unreliable, where Web Compiler claims that files have been compiled, but the changes you made are not reflected in the resulting bundles. Read more...

Build Steps Using NPM Scripts for My Hugo Blog

Quite recently I migrated this blog from WordPress to Hugo. Since I didn’t want to use a theme built by someone else, I had to add things like CSS and JavaScript myself. To be able to work with this locally in an efficient way and to be able to produce a complete build output in a reproducible manner, I had to automate the build steps. With WordPress I used Gulp for this, but I thought that might not be needed, so I made an attempt to do this using only npm scripts. Read more...

Sass vs SCSS

As I have worked more and more with CSS during the last year, both at work and with an updated version of this blog, I have come to the following conclusions regarding the Sass vs SCSS syntax. SCSS is the obvious default choice as it’s a more natural extension of CSS and that you can simply rename an existing .css file. In a team with several developers focused more on server-side, it’s usually easier to explain SCSS than Sass syntax. Read more...

Using a Responsive CSS Grid with Relative Measures

When you build a web site on a CMS and a theme made by someone else you always have some limitations. For this blog I use WordPress and the Montezuma theme, and this is how I customised the default CSS grid options to my liking. These are the grid options you can choose from in version 1.2.4 of the Montezuma theme. Not bad at all, but if you want to use a responsive layout (and yes, you should) you have to choose between a fixed 960 px maximum width or use the 100% width option which can become ridiculous on large high resolution screens. Read more...

No matching posts found. You can use wildcards and search only in titles, e.g. title:iot
Loading search index, please try again in a few seconds.
Index has completed downloading. Please search again.