Rumyra's Head

Just a quick Friday tip

I know a lot of you out there are already aware of this and to you it will seem obvious, however, I’ve found myself giving this tip a few times over the past couple of weeks, so think it’s worth quickly noting.

If you have a containing element, (div, article, section etc…), with a lot of content inside, reference which one it is at the closing tag. E.g:

<section role="main">

  <!-- ALL the page's content here -->

</section><!-- this is the end of section[role="main"] -->

This is particularly helpful if you have your HTML file split into partials. You may close a container in a different file to that which it starts.

Chaining CSS :not()

I found myself using the CSS psuedo class :not() the other day. It proved superbly useful. For those that are unaware, by adding it to your CSS, you can choose not to affect a set of elements.

myelement:not(.ofthisclass) { style: property; }

There’s a couple of good resources about it in the CSS Tricks Almanac or the MDN docs.

What I was looking for was a way to affect anything but a certain class, plus another certain class. If I had declared both separately in my CSS, the first declared would have been overwritten. In this example the div with a class of blue would still have a crimson background, as the declaration below it would overwrite it.

div:not(.blue) {
  background: crimson;
div:not(.green) {
  background: crimson;

But wait… there is a way. All we need to do is chain the two nots together:

div:not(.blue):not(.green) {
  background: crimson;

Voilà! Just what I was looking for. For a demo, check out this codepen.

I want a sarcasm element!

<sarcasm>Throws toys out the pram</sarcasm>

For aaaggees now I’ve wanted a way to express my sarcasm over the internets. When you’re typing this can be pretty hard… it can get lost pretty quickly when words on a screen don’t come with tone.

Enter the <sarcasm> element*. I, (as well as others), have been know to add this to IRC chats, or at least end a line with </sarcasm>.

It suddenly changes the tone of the conversation. You become enlightened as to body language that otherwise gets missed when not in direct vicinity with another person.

And why stop at sarcasm, could we express other emotions too – just with one element and it’s attributes?

<emotion type="excited">I'm going to the fair tomorrow!</emotion>

Are there too many emotions, (and variations of such), or maybe I’m just about to step into a debate about how emotions don’t matter and only logic prevails.

<emotion type="scared">I'd better get out of here!</emotion>

*This idea is in no way practical.

EDIT 9.1.15: There is a sarcasm punctuation mark, as I discovered whilst watching University Challenge the other day. There’s more about it on the sarc mark website.

Animation code snippet

Because I keep referring back to it:

@include simple-vendor-prefix(animation,
    animation-name(name [default:none])
    animation-duration(Xs | Xms [default:0s])
    animation-timing-function(ease | ease-in | ease-out | ease-in-out | linear | cubic-bezier(x1,y1,x2,y2) | step-start | step-end | steps(X start|end) [default:ease])
    animation-delay(Xs | Xms [default:0s])
    animation-iteration-count(X | infinite [default:1])
    animation-direction(normal | reverse | alternate | alternate-reverse [default:normal])
    animation-fill-mode(none | forwards | backwards | both [default:none])
    animation-play-state(running | paused [default:running])

This is the Sass I use for declaring CSS animations. It’s a good list of all the parameters you can get for the CSS animation property, with their parameter format and default value.

Full Article ➺

Finding your break

I remember someone stating a few months back: “I’ve only just realised the ‘break’ in break-points was referring to the design breaking, I thought it was device related.”

Shouldn’t we be taking both into account? The design I’m working on at the moment really needs some tweaking at around 980px, but I think I’ll make my break point just above 1024px.

Full Article ➺

Choosing a colour scheme

I thought I’d document how I usually go about deciding on colours for a new website design.

I’m currently working on a personal project and have already put together some interactive wireframes using my White Paper (link coming soon). The next stage for me is to decide on some colours and fonts which I will then integrate into the wireframes and go on designing from there.

For this project I only have the subject matter for inspiration. Usually I would have a fair idea of look and feel in my head before I start looking for colour influence. However this one is very much an open book.

The first thing I do is turn to Colour Lovers and have a browse through the palettes on there, searching with keywords as I see fit. I screen shot any palettes or colours I am drawn to. I then put all these into one file in Photoshop.

From there I can start to see common colours, what I like, what I don’t like, things I have maybe been drawn to before (for instance the third palette down looks a lot like the colours for this site!).

Full Article ➺

CSS Grid Layout Module

So I had a chance recently to play around with the CSS Grid Layout Module. It has up until recently only been supported by IE (I know, don’t worry I felt a bit weird typing that). I personally don’t have a very accessible way to develop in IE, so was pleased to discover it is now supported by Chrome if you enabled the ‘Experimental Web Platform’ flag.

The best resource for using it in Chrome is Rachel Andrews’ post here (Thanks @justinavery). She did write another great one for 24 Ways, however as it was only supported by IE at the time, it uses IE syntax which is slightly different to the syntax Chrome uses and thus confused me to start with. Similarly with the CSS Tricks post here, which is also good, but if you are using Chrome can be confusing.

Some things to share

I discovered I don’t need vendor prefixes, I was originally using -webkit-, once I removed this I had that ‘Yes’ moment when I refreshed my page.

Full Article ➺

Rolling Your Own

I don’t like to spend a lot of time getting ready in the morning.

I like to spend a lot of time in the shower, cos showers are nice, but the whole idea of styling hair and painting on eye makeup has always made me feel like I could be spending my time better… Like an extra half hour in bed for instance.

So, as a time saver, I make my own face cream, I always have. It’s a mix of my preferred moisturiser, foundation and skin cream. This means I only have to slap this on once and I’m done.

A couple of years ago cosmetic companies started to produce a thing they dubbed BB cream. For those unaware its a similar idea, foundation, moisturiser, skin cream, serums, oils etc… All rolled into one.

I still make my own.

I’ve checked out a number of these BB creams and I don’t feel like any of them are suitable for my needs. Although the concept is the same, I like my own recipe.

Sometimes its cool & ok to roll your own for your own specific needs… Even if there are things out there that are similar.

Happy (belated) International Women’s Day

Yesterday was International Women’s Day, a celebration of being of the fairer sex all over the globe.

I work in the web/app development industry. It is male dominated. I have seen lot of sexism in my career, but then I have in my everyday life as well. Just yesterday my middle aged next door neighbour Nigel was explaining I couldn’t possibly know what size screws were. Why Nigel? It it my bleach blonde hair? My fair skin which makes me look in my twenties (thanks mum & dad). Or is it my breasts.

It was the latter wasn’t it, let’s be honest.

I regularly, as many women, face everyday sexism, just like this.

But this weekend, I want to take a different approach.

I want to be thankful.

Full Article

I got nominated for a net Award!

Net Awards Nominee

Isn’t that amazing!

I’m totally chuffed. Some lovely person/people actually nominated this demo. (NB The last two links work best on an android device with vibrate functionality ;) )

I’d really luv to get to the shortlist… the voting for that closes at the end of March (24th), if you want to vote for me you can here.

Thank you in advance you lovely peeps :D

Next Page »