CSS Pseudo Selectors

A pseudo class is usually added to the end of a selector to define a special state of an element. It is used in CSS so the styling can target a specific type/state of element. Here is the syntax and example of a pseudo class:

/* Syntax */
selector:pseudo-class {
    property: value;
}

/* Example */
a.link:hover {
    color: #666666;
}

Below I have listed all CSS pseudo classes:

Element states (links)

:hover
Targets links on mouse over

:active
Targets the active link

:visited
Targets a link which has previously been visited by the user

:link
Targets a link which has not previously been visited by the user

Element states (inputs & links)

:focus
Targets an input element that is currently being used or that the mouse is focusing on

:checked
Targets an input element, of type checkbox or radio, when they are checked or with on state

:indeterminate
Targets an input element, of type checkbox or radio, whose indeterminate DOM property is set to true by JavaScript

:enabled
Targets form elements, that are selected, clicked on, that you can enter data into, or that you can focus on

:in-range
Targets an input element when their value is within the range specified

:out-of-range
Targets an input element when their value is outside the range specified

:valid
Targets elements that contain valid content, determined by its type="" attribute

:invalid
Targets elements that do not contain valid content, determined by its type="" attribute

Element Targeting (based on attribute)

:lang(language)
Targets elements based on the context of their given language attribute

:read-only
Targets an input element containing “readonly” attribute

:read-write
Targets an input element not containing “readonly” attribute

:required
Targets an input element containing “required” attribute

:optional
Targets an input element not containing “required” attribute

:target
Targets elements that have an id attribute which matches the hash in the URL

:disabled
Targets an input element containing “disabled” attribute

Element Targeting (based on position/numbering)

:first-child
Targets the first element immediately inside another element

:last-child
Targets the first element immediately inside another element

:first-of-type
Targets the first element of that type within its parent element

:last-of-type
Targets the last element of that type within its parent element

:only-of-type
Targets element that is the only on of its type within its parent element

:only-child
Targets element inside another element that is the only element within its parent element

:nth-child(n)
Targets positioned element, specified in (n), within its parent element

:nth-of-type(n)
Targets positioned element, specified in (n), of that type

:nth-last-child(n)
Targets positioned element, from last to first, specified in (n), inside another element

:nth-last-of-type(n)
Targets positioned element, from last to first, specified as (n), of that type

:root
Targets the highest-level parent element

Relational Element Targeting

:not(selector)
Targets elements that are not a particular element. I have listed some examples below:

a:not(.highlighted) {...}

p:not(:first-of-type) {...}

input:not([type="checkbox"]) {...}

/* Even multiple :not selectors can be used: */
div:not(.block):not(:first-of-type) {...}

:empty
Targets elements that do not have any child elements or content

Content Targeting

::first-letter
Targets the first letter in that element

::first-line
Targets the first line in that element

::selection
Targets any text the user has selected or highlighted

Pseudo Elements

These allow you to add content into your page from CSS. They will not appear in the DOM but they will display on the page like any other element would. They will only be added to the page if the content: ; styling is added to the selector. Here are the different values that can be inserted into content: ;:

  • A string – You can add any wording you like, but special characters and HTML entities need to be written as a unicode entity.
  • A URL image –  This cannot be resized, so it needs to be added in the correct dimensions.
  • Nothing – You can simple include " ". This is useful for setting background images or using the element for other styling.

::before
Inserts element before targeted element

::after
Inserts element after targeted element

Browser support tip: The double colon (::) is supported by all browsers except IE8. If you require IE8 support, then use a single colon (:) instead, which is also supported by all browsers.

References
http://www.w3schools.com/css/css_pseudo_classes.asp
https://css-tricks.com/almanac/selectors/a/after-and-before/
https://css-tricks.com/pseudo-class-selectors/

A basic guide to SASS and SCSS syntax

Before we get started with learning the SASS basics you will need to install and set up Sass. I have covered this in Getting Started with SASS, where you can find out how to install Sass.

Nesting

I have previously looked at this in Getting started with SASS. Below is an example of some CSS and how it would be written in SCSS syntax. The SASS example shows how SCSS syntax allows you to embed an elements child within it’s parent selector to make the CSS easier to read.

CSS:
.container {
   ...
}

.container .heading {
   ...
}

.container .heading p {
   ...
}

.container .block {
   ...
}

Here’s the same code using SCSS syntax:

.container {
   ...

   .heading {
      ...

      p {
         ...
      }
   }

   .block {
      ...
   }
}

There also might be times when you want to add a pseudo class like :hover or :first-of-type. This can be achieved by adding the :hover inside the element it is related to with the character “&” in front of it.

Here is an example:

a {
   ...

   &:hover {
      ...
   }
}

.block {
   ...
   
   &:first-of-type {
      ...
   }
}

When you run SASS, the CSS it will generate will look something like this:

a {
   ...
}

a:hover {
   ...
}

.block {
   ...
}

.block:first-of-type {
   ...
}

Partials and Importing

Partials are SASS files that can be imported into other SASS files. This can be useful for small snippets of code which are used on specific parts of a site. A partial file is very similar to a normal CSS file except it would have an underscore in the file name. For example, a partial file could be named _partial.scss. By making a partial you can ensure the file isn’t generated into a CSS file; Instead the file would need to be included in another SASS file using the @import directive.

Here is an example of a partial file:

/* --- _partial.scss --- */

html,
p,
ul {
   margin: 0;
   padding: 0;
}

To include this partial into a file you would only need to use the ‘partial’ name without the underscore. SASS will know that the file is actually called _partial.scss Here is an example of a SASS file importing this partial:

/* --- stylesheet.scss --- */

@import 'partial';

.container {
   ...
}

The CSS file generated from this would look like the example below:

/* --- stylesheet.scss --- */

html,
p,
ul {
   margin: 0;
   padding: 0;
}

.container {
   ...
}

Extend/Inheritance

This feature allows you to share styles in different selectors. This can be useful for avoiding duplicated styling and keeping the code clean. Some great example for using this are buttons on a page, left/right arrows, for warning and error messages, etc. Basically anything that is similar in style/layout with only slight differences. We can call the code by using @extend.

Here is an example:

.arrow {
   height: 40px;
   width: 20px;
   cursor: pointer;
   background-repeat: no-repeat;
   background-size: auto 18px;
   background-position: center center;
}

.arrow-left {
   @extend .arrow;
   background: url('/images/icon/left.png');
}

.arrow-right {
   @extend .arrow;
   background: url('/images/icon/right.png');
}

This is the CSS:

.arrow,
.arrow-left,
.arrow-right {
   height: 40px;
   width: 20px;
   cursor: pointer;
   background-repeat: no-repeat;
   background-size: auto 18px;
   background-position: center center;
}

.arrow-left {
   background: url('/images/icon/left.png');
}

.arrow-right {
   background: url('/images/icon/right.png');
}

One of the main advantages of this is that it allows you to add styling to multiple selectors without having to write multiple class names.

Mixins

A mixin allows you to reuse CSS declarations throughout your site without having to rewrite them. A great example of this is block styles. Unlike the @extend function, you would have to add @mixin and remove the “.” from the selector of the styles that you wish to reuse. You can call the styles by using @include.

Here is the block example:

@mixin block-styles {
   padding: 10px;
   border-bottom: 1px solid #EAEAEA;

   p {
      font-size: 14px;
      color: #333333;
   }
}

.block {
   @include block-styles;
   width: 100%;
}

Here is the CSS which would be generated:

.block {
   padding: 10px;
   border-bottom: 1px solid #EAEAEA;
   width: 100%;

.block p {
   font-size: 14px;
   color: #333333;
}

You can also use values to make your mixin more flexible. The value can be added to any style within the mixin and declares in the @include. An example of this is below:

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
       -o-border-radius: $radius;
          border-radius: $radius;
}

.box {
   @include border-radius(5px);
}

Operators

Sass allows you to be able to use standard math operators which are +, -, *, / and %. It also allows you to convert pixels into percentages while doing so. This can be useful for calculating widths for fluid layouts.

Here is an example:

.container {
   width: 100%;

   article {
      float: left;
      width: 650px / 990px * 100%;
   }

   aside {
      float: right;
      width: 300px / 990px * 100%;
   }
}

This is the CSS that would be generated:

.container {
   width: 100%;
}

.container article {
   float: left;
   width: 65.65%;
}

.container aside {
   float: right;
   width: 30.30%;
}

Sass also allows you to use calc() function which can also be useful for fluid layouts by using math operators and variables. This will be covered in detail in another post, but I have included an example below:

.container {
   width: 100%;

   $width: 650px;
   $gutter: 30px;

   article {
      float: left;
      margin-right: $gutter;
      width: $width;
   }

   aside {
      float: right;
      /* This will work out the percentage of space left over
      for the sidebar after the article width has been set.
      This will show as a percentage in CSS */
      width: calc(100% - #{$width} - #{$gutter});
   }
}

References
http://sass-lang.com/guide

Getting started with SASS

Syntactically Awesome Style Sheets

SASS is a CSS preprocessor that enables the user to be able to write tidier and more readable CSS. By indenting and embedding selectors it allows a visible hierarchy of parent and child selectors in the stylesheet.

How it works

After installing Sass you can write your CSS in the Sass format, in a file with the extension .scss. Sass will compile this file either automatically(this needs to be setup) by the user running a command. Once Sass has compiled the code it will create a new .css file (I like to have this file in another folder if there are multiple stylesheets). This would be the stylesheet you would reference in in your HTML and would look like original CSS but possibly a little messier. Going forward, you can continue to update the .scss file with new CSS and SASS will process it to update the .css file.

Lets take a look…

Here’s an example of some CSS:

.container {
   ...
}

.container .heading {
   ...
}

.container .heading p {
   ...
}

.container .block {
   ...
}

Here’s the same code using Sass format:

.container {
   ...

   .heading {
      ...

      p {
         ...
      }
   }

   .block {
      ...
   }
}

Installing SASS

If you have windows you would need to install Ruby, which can be done by using the Ruby Installer. You can install Sass using your command line. On a Mac you can access this with the application ‘Terminal.app’, which is located in the ‘Utilities’ folder. On Windows you can search for and open ‘cmd’.

In your command line run:

gem install sass

This will install the Sass package and anything else you might need for it. If you get an error you can try using the code below:

sudo gem install sass

To check if it has installed properly you can run:

sass -v

Getting started

When making your SASS files you create a stylesheet with the extension .scss. Once you have some CSS in that file in the Sass format you use command line to produce a compiled, original format, version of your CSS in a .css file.

You can do this by using:

sass input.scss output.css

This will take your “input.scss” file and create a new css file “output.css”.  To make the Sass compile your stylesheets automatically whenever you make a change to a file you can use:

sass --watch input.scss:output.css

If you have multiple Sass files it might be better to compile the whole folder using this:

sass --watch stylesheets/input:stylesheets/output

References:
https://scotch.io/tutorials/getting-started-with-sass
http://www.hongkiat.com/blog/getting-started-saas/
http://sass-lang.com/

BEM Naming and Sass

Block, Element, Modifier

BEM is a front end naming methodology, which is used for naming CSS classes to make it easier for developers to have a better understanding of the front end infrastructure. By using BEM naming, the classes can be informative and descriptive while preventing bad semantics. It was originally developed by Yandex to allow for “fast development and long-lasting results”. It can ensure your code is carefully structured, readable and ensure maintainability when working in large, and constantly changing, teams.

Here is how BEM works in CSS:

.block {}
.block--modifier {}
.block__element {}
.block__element--modifier {}

The .block is the parent component. Examples of this could be a <section></section>, main component or container element.
The .block__element is usually a direct child of the .block element. These usually make up the .block element.
The .block__element--modifier and .block--modifier are the states or versions of the elements in .block.

Here’s an example:

<div class="media media--wide">
   <div class="media__img"></div>
   <div class="media__text media__text--list"></div>
</div>

SASS (read more about sass)

We can also apply this to SASS variables. This is useful because it improves the clarity of the variables, which makes it easier for other developers to read and use.

Here are some examples:

$color__primary: #AAAAAA;
$color__primary--light: #CCCCCC;
$color__primary--dark: #666666;

$font__primary--style: Helvetica;
$font__primary--size: 14px;
$font__primary--weight: 200;

References:
https://en.bem.info/method/
http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/
http://mathayward.com/modular-css-with-sass-and-bem/

Getting Started With My Portfolio Website

I’ve recently started the journey of making my own portfolio website with the main objective being to showcase my expertise and web development skills, but more importantly, so I could test myself by learning new codes and practices. A portfolio is very important for promoting your skills and accomplishments, not only through a portfolio of  work, but also through the layout and design of your website. This is why it is fundamental to show your personality and demonstrate the kind of person you are through out your website.

After I left University I did make a portfolio website based on a template and, surprisingly, the quality of the site didn’t look too bad considering I had no industry skills. I was determined to make a space of my own which exhibited my work and personality (which is probably why it ended up being black and pink at the time!). The quality of the code, however, was something to be desired and an area where I will hopefully be able to demonstrate some improvements in this new project.

I will hopefully be documenting the ongoing progress of this; But considering how much I enjoy seeing an idea come to life, I might end up coding more frequently than I can keep up with the blogging. So please bear with me.

And So It Begins!

Hey there! My name is Rachel Bull and I am a Front End Web Developer from London. I have worked in the industry for about 4 years now after being given my first break at a well known parenting forum website. It’s safe to say I have learnt more in the industry (and using Google) than I have from my 3 years at University.

On many occasions I have pondered upon the idea of writing a blog and wondered if it would be helpful or useful to anyone. Very recently, I began trying to learn AngularJS and spent most days trawling the internet reading tons of guides and tutorial sites. Needless to say, when I had finally achieved the desired effects, I looked at the code and disappointingly thought, “Is that it?”. I don’t know what I expected, but I almost wanted to see a complicated code masterpiece, that demonstrated the frustration and confusing mess that my mind had made the code out to be.

Sometimes the most basic of code can be turned into a nightmare of complicated jargon through reading complicated tutorials and user answered forums online, especially for people who are quite new to web developing. I’m sure many would agree that development tutorials online can make coding seem impossibly advanced. I have spent many days banging my head on a desk in frustration, only to glance at it the next day with fresh eyes and see exactly what my mistakes are. So I thought I’d spare a few sore heads, by sharing my knowledge, skills and web developing experiences with anyone who, like me, wants to understand coding from a basic, almost “starting from scratch” perspective.