Author: bethsoderberg
-
CSS Transitions: The Basics
The standard linguistic definition of a transition is a “movement, passage, or change from one position, state, stage, subject, concept, etc., to another.” Within CSS, transitions do exactly what you’d expect: they allow for elements to change from one state to another over time. My favorite short explanation of what the CSS transition property does…
-
CSS Transform Origin Property
The CSS transform origin property defines the point from which a CSS transform is applied to an element. Transform Origin Syntax The syntax for identifying the value of the transform-origin property takes into account the x-offset and y-offset of the point of origin. The x-offset is a length or percentage from the left edge of…
-
Three Common Visual Mistakes in Web Design
I can not browse the internet like a normal person because I build websites for a living. I constantly critique the websites I find and open up my code inspector to see how a particular effect was achieved. With surprising frequency I have come across websites (including quite a few for huge companies) that are…
-
What Developers Mean when they say “Don’t Hack Core”
In both the WordPress and Drupal communities you’ll frequently hear the refrain “don’t hack core.” What does that mean though? Often I see this phrase used out of context or without explanation. When I was first learning to code, I certainly didn’t know what it meant, I just knew that one time my mentor pointed…
-
CSS Transforms: The Basics
Linguistically speaking, a transform is a “change in form, appearance, or structure,” at least according to the folks over at Dictionary.com. When it comes to CSS, the Mozilla Developer Network describes a transform this way: “The CSS transform property lets you modify the coordinate space of the CSS visual formatting model. Using it, elements can…
-
SEO and Mobile-Friendliness
Google recently announced on their blog that starting April 21, 2015, the mobile-friendliness of websites will have a significant impact on search results. How does Google define “mobile-friendliness” and what are the implications of this change on design for the web? Mobile-Friendliness On a basic level, Google is defining a mobile-friendly website as one that…
-
Establishing Project Requirements for Personal Blog Projects
As I’ve previously described, I am planning to design and build my own theme for Responsive Geometry from the ground up. Now that Responsive Geometry exists, the next step in the process is defining project requirements that will help guide the design and development process. There are six major questions I’m asking myself: Visual Identity:…
-
Styling Bulleted Lists with an Icon Font
Though the classic bulleted list is perfectly utilitarian in many circumstances, sometimes we need to present bullets that are a little more graphically variant than the list styles disc, circle, and square. In this tutorial, I’ll walk you through styling bulleted lists using an icon font and CSS to create custom bullets. Step 1: Install…
-
A Developer’s Theme Design Plan
Responsive Geometry will be a blog about the intersection of code and design. My skills are primarily in front end development and day to day I typically code and interpret designs other people have created. With this project, I am challenging myself to explore skills outside of my typical workflow and one of the ways…