Articles tagged with "CSS"

The Problem

I imagine many of us have been there: there’s some CSS class in your markup, and you need to do something with it. Maybe you want to remove it, change it, or perhaps alter its style declarations. “Easy peasy,” you think, “I’m a developer. I got this.” And so you should.

Next, if you’re anything like me, your first instinct is to fire up your search tool of choice and search your codebase for that string. You’d expect that would lead you to where that class is getting added to your markup, along with anywhere CSS rules...

Let's have a quick look through our development process on this project and pick out some of the more interesting bits. As briefly mentioned in the last article we are using a composer set up and all code is version controlled using git on github. All pretty standard stuff.

Frontend

In the previous article I briefly discussed how we set up Pattern Lab. Before getting stuck in to the components that would make up the pages of the site, we first needed to set up some global variables and grid. Variables allow us to reuse common values throughout the SCSS and...

Livereload is one the coolest things to happen to frontend development in the last little while, and actually it can really speed up your work. Basically it re-loads your CSS (and Javascript some of the time) automatically as you make changes. You don't have to make a change and then switch to your browser and manually reload the entire page, change 'notifications' are pushed to the browser where they will trigger that single changed file to be reloaded.

There are lots of sites detailing how it works, and there's a great Mac program called: LiveReload that will get you up...

A quick post about the Drupal tinymce module and it's tendancy to display all it's buttons in one inflexible line. The following CSS will split the tinymce buttons onto several lines.

.mceToolbarTop * {
  float:left;
}
.mceToolbarTop select {
width:auto!important;
}
.mceToolbarTop option {
float:none;
}