We will now write the CSS styles for a simple login form. The HTML markup is pretty simple. It has two labels, two input fields, and two buttons, as shown in the following code:
<form method="post" id="login">
<label>Your username</label>
<input type="text" name="u" />
<label>Your password</label>
<input type="password" name="p" />
<input type="submit" value="login" />
<input type="button" value="forgot" />
</form>The result that we want to achieve at the end looks like the following screenshot:
As a preprocessor, we are going to use AbsurdJS and write our styles in the JavaScript format. Let's create an empty style.js file and enter the following code:
module.exports = function(api) {
var textColor = '#9E9E9E';
var textColorLight = api.lighten('#9E9E9E', 50);
var textColorDark = api.darken('#9E9E9E', 50);
var brandColor = '#8DB7CD';
var brandColorLight = api.lighten('#8DB7CD...