CSS

Easy CSS grid

I’ve been working with a lot of forms lately and it required some kind of grid system to make it all lay out nicely. I’ve always been a bit hesitant to immediatly pull in another dependency and decided I was going to solve this one myself. How hard could it be?

By using the CSS flex layout, I ended up with just the right amount of flexibility and extensibility while keeping things very small code wise. Let’s have a look!

Simple dialogs with AngularJS and TypeScript

While working an Angular (1) web app I ran into the age-old problem of showing the user notifications when certain conditions are met. Show them a little pop-up, in simple terms.

So what does it take to show a popup? We know the dialog element exists but cannot be used in this case due to browser requirements. The easiest way I could think of is adding a fixed positioned div the the user on top of all other content. Add some CSS in there to make it look nice and we have dialogs.

The dialog element

I was grinding my teeth on a z-index problem today. I needed to cover the entire webpage to show something was happening and nothing else was to interrupt. Some elements (for whatever reasons) were poking through the overlay and nothing seemed to fix my problem with the plain old position: fixed element I was using to cover the page.

So after getting fed up with looking for possible fixes I spent a bit of time looking for alternatives and came across the <dialog> element.

Creating a toggle switch with HTML and CSS

My current project involves an interface that is 100% touch driven (no keyboard and mouse) and I was asked to turn a regular old checkbox into a toggle switch.

Initially I assumed it would be very easy but as with many things browser related, it was not. Let’s take a look at some of the things browsers do to checkboxes using this quick example:

<html>
	<head>
		<title>Test</title>
		<style>
			input {
				border: 1px solid red;
				background-color: green;
				width: 50px;
				height: 50px;
			}
		</style>
	</head>
<body>
	<div>
		<input type="text" />
		<input type="checkbox" />
	</div>
</body>
</html>

Browsers pls

Another simple loading indicator

Here is another loading indicator for when your webpage is busy waiting for a server request to come back with an answer. It’s a bar at the very top of the page this time.

Let’s look at a demo before we dive in:

Press the button to do some imaginary tasks that simulates a workload. A rolling bar will appear at the top of the demo to show that something is happening in the background. So how does it work?

Animations and transforms

Every employee at ITQ has their own little mini-me in the form of a little character based on your appearance. Here is mine:

MiniMe

So I have this image sitting in a folder on my Ondrive for whenever I might need it. Queue a boring evening with not much else to do, I figured, lets animate some life into the little guy using CSS. Here is the result.

CurrentColor in CSS

If you’ve ever used something like LESS or SASS you know what a variable is in CSS. There is also a working draft for native CSS variables but there is something in CSS right now that resembles some variable behavior. Not an actual variable, but interesting nonetheless.

Meet currentColor. Like the description says on the w3 wiki, its value is whatever the color is set to. So how does that work? Lets look at some examples.

CSS Transitions basics

End-users interact with your applications via the user interface (UI for short). If everything was designed with the user in mind, the UI will make things very easy for the user. Everything is nice and organized and easy to navigate. Actions are communicated to the user in a friendly way and the user is happy.

The sad thing is, state changes in the UI tend to be very abrupt and cold. Instant flashes, so fast the user might not even notice if it is something small. So what can we do about this? CSS supports something called transitions. Transitions allow us to specify what happens what state changes on an element. For example, a button going from normal, to being hovered on by the user, rows in a grid that the user can select or a signal telling the user something happened.

The simplest loading indicator

I had a brainwave and dove into codepen for a little bit to doodle around and when I emerged I had this simple little loading indicator. Very simple in terms of markup and CSS (LESS in this case).

Have a look see :-)