Less Breakpoints

The web is getting more diverse and websites needs to be more adaptable than ever. In my opinion it is necessary to reduce breakpoints and let the content decide and define the layout of webpages.

I created a very simple fluid layout, with new css technologies, just to see if a fluid page is already feasible in modern browsers. I have used flexbox, vw units en css variables.

fuid-layout

CSS Variables

See the example below the :root pseudo selector is an analogy to the global scope in JavaScript. You could also for example scope the variables to a “.module” class name.

:root {
    --main-color: #EFECCA;
    --accent-color: #A7A37E;
    --accent-color-middle: #E6E2AF;
    --title-color: #002F2F;
    --interactive-color: #046380;
    --text-color: #696969;
}

One breakpoint…

Still one breakpoint left, at first relative units and flexbox did the trick. One breakpoint for better mobile view and more readable font-sizes on small screens is still included.

fluid-mobile

Conclusion and concerns.

I still have my concerns for a full blown webpage. There will always be third party content, like adds and other embedded content which will not stretch easy. However it is perfectly possible to create a pleasing layout with very little and mainable CSS. I even found it pleasant to be working with plain CSS afters years of .less and .scss. I predict a comeback for CSS with CSS-variable, flexbox and CSS gridlayout arround the corner. And with HTTP2 and modern bundlers like Webpack the need for css compilers might diminish in the future.

You can get the code at https://github.com/jeroenoliemans/wonderolie/tree/master/LessBreakpoints for further experimentation, I only tested it in Chrome 49 and beyond.

SVG viewbox, make stretchable graphics

Get the source at Github

I struggled with SVG, creating an early protoype of a mobile webapp. I wanted to create an interesting background for the webapp. It needs to be resolution independent and scalable without quality loss, SVG seems the best choice because of the vectors.

My initial thought was to make a 9-slice attempt for SVG. However since the app should be used with a phone in portrait orientation and I felt that repeating parts of the background would not be sufficient for final app. Therefore stretching should be full isze and strechable.

Steps

First I created an illustrator file with the symbol sprayer to create a framelike graphic, I exported it as svg with the default setting with “Save for web”. You can see the example below.

Background in illustrator for SVG export

Secondly make sure the svg element has the folowing style:

	position: absolute;
	width: 100%;
	height: 100%;

The trick is to make sure that the width and height of the input SVG in pixels matches the width and height of the viewbox, and that the start corner matches you desired result. Viewing the examples makes it more clear.

Examples

example : desired results

SVG properties

As you can see Illustrator defaults the viewbox as desired. Is moves the mask (viewbox) to the position 166.646, 114.09 of the dimension of the available vector art in the drawing.

	 x="0px" 
	 y="0px" 
	 width="100%" 
	 height="100%" 
	 viewBox="166.646 114.09 720 1280"
	 preserveAspectRatio="none"
	 meetOrSlice="slice"

example : undesired result now it shows all the artwork

SVG properties

In this example the viewbox contains all the available vectors in the illustrator file.

	 x="0px" 
	 y="0px" 
	 width="100%" 
	 height="100%" 
	 viewBox="0 0 994 1517"
	 preserveAspectRatio="none"
	 meetOrSlice="slice"

Code

The examples and the illustrator file can be downloaded from Github

 

Improved front-end workflow for Windows

For some time I wanted to improve my front-end workflow. The search for an optimized workflow almost made me switch to mac, and I am still considering the switch. It seems to me that the windows front-end developing environment lacks serious momentum compared to the progress being made on linux and osx.

However now onto the good stuff. I had a few goals for my new workflow; LESS / SASS, auto refresh function, file minification and optional device checking. All this in combination with a proper IDE. At first I gave a shot at Yeoman, the installation with Chocolatey went perfect, however Yeoman itself gave some windows related errors. I am sure Yeoman should work fine, but I like to have my stack divided in several software sections.

The first goal was getting autoreload for the browser. For windows there are several options, all with there own pros and cons.

  • First there is “web essentials” an extension for visual studio, these make it possible to reload the css only. This could be a use full start if your company restricts you to use visual studio for front-end development.
  • Netbeans 7.3 with live html, this is an easy way to get a lot of functionality. However the beta version had difficulties to detect changes made by external compilers. For example css files compiled by the winless less compiler were not detected by the live html functionality. Netbeans live html has the advantage that it works on all file locations, a local server isn’t required.
  • Livereload browserplugin, i use this plugin in combination with sublime text 2. This solution works perfect, combined with some LESS plugins for sublime the less files compile automatically and the updated css file updates the livereload plugin.
  • At last there are a lot of scheduled refresh options, these refresh the browser every on predefined time. I think these options work but are not a very “clean” solution for the problem.

I’m more than happy that I have renewed my workflow, especially “Sublime text” is an instant saver, although it is lacking some deeper IDE functions, like recognizing functions from other files ( If there are some plugin to solve this please share them ). But overall Sublime is an amazing fast and “clean to the eye and mind” editor.

My current stack is as follows; sublime coupled with some less formatting plugins. Less compiling is done with WinLess. Livereload in chrome is coupled with sublime and chrome is optionally connected to devices with Adobe Edge Inspect.
Coding now feels like typing a letter, focused on the code, instantaneous feedback, brilliant 😉

At least until I need to merge the code back into visual studio and TFS, and of course next year there will definitely be new shiny toys.