Mike Street

CSS

Showing posts from the category "CSS"

  1. Home
  2. Blog
  3. CSS

  • SCSS Reverse direction

    Posted on 3rd July 2017.

    There may be a point in your CSS coding that you want to know the opposite of a direction (e.g. up, down). This function allows you to pass it a direction and get the opposite back!

    Web CSS SCSS

  • Multiple transition delays

    Posted on 3rd May 2017.

    Being able to animate with CSS transitions is great, although there are a few gotchas when using them. This one with transition-delay had me scratching my head for a while.

    Web CSS

  • CSS Custom Properties - everyday applications

    Posted on 26th April 2017.

    CSS Custom properties are now supported in Edge, meaning you can use them nearly everywhere. However, there are some cases where further browser support is required. Using PostCSS we can use CSS custom properties in development while still maintaining cross browser support.

    Web CSS

  • Find and remove vendor prefixes in your CSS using Regex

    Posted on 17th November 2016.

    I recently set out to remove all of the vendor prefixes from the CSS for all of our clients at work. This is because we use Gulp with Autoprefixer - which means we have up-to-date prefixes and cleaner SCSS. One way of doing this would be to open every CSS file, search for `-moz`, then search for `-webkit` etc. Some of the CSS I was searching through is well over 5 years old and is rife with vendor prefixes.

    Web CSS

  • CSS frameworks and why you should make one

    Posted on 20th May 2016.

    With recent front-end twitter conversation turning to CSS frameworks, I went on a roller coaster of emotions but eventually settled on the above to sum up how I felt about the ordeal. Before we settle once more, let me take you on the journey I travelled.

    Web CSS

  • Responsive Typography in SCSS

    Posted on 2nd November 2015. Written For Liquid Light

    Making sure your typography is readable on every display is arguably one of the most important aspects of front-end development. If your users can’t read the content on the ...

    Web CSS

  • Creating SVG Sprites using Gulp and Sass

    Posted on 11th November 2014. Written For Liquid Light

    Following on from our recent blog post about SVG Sprites which gave an introduction and overview to using SVGs in a sprite, this post will outline the processes and tools ...

    Web CSS Gulp

  • Working with SVGs in Sprites

    Posted on 7th August 2014. Written For Liquid Light

    This article will explain how and why you would want to use SVGs and what advantages using them in a sprite can bring. It will also cover scaling the images ...

    Web CSS

  • An Introduction to CSS Preprocessors

    Posted on 24th March 2014.

    Writing and updating CSS can be a repetitive, tedious and arduous task - especially for big projects. CSS preprocessors can help with that - amalgamating related styles and helping you make your style sheets more DRY

    Web CSS

  • Sass Rule Layout

    Posted on 23rd February 2014.

    We've been going through a bit of a reshuffle at work with regards to our front-end conventions and layout. With the introduction of Sass into the team, we took it ...

    Web CSS

  • From Less to Sass

    Posted on 4th February 2014.

    Recently we've decided a change in preprocessor to help optimise our workflow. Within this blog post, I am going to type Sass, but really I mean Scss.

    Web CSS SCSS Less

  • Compiling Less on the Command Line

    Posted on 19th October 2013.

    We have been using LESS for a while now, but our process involved including the less.js in the header during development, compiling the LESS using an app before launch and then maintaining the site using the css.

    Web Command Line CSS Less

  • Sass - Hidden Gems

    Posted on 11th November 2012.

    I've recently been getting into pre-processors for CSS and I have been using LESS for sometime - getting to grips with the nesting and variables while keeping a library of my own mixins.

    Web Front-end Development CSS

  • It's My Way or the Highway. Not.

    Posted on 24th January 2012.

    Recently with the spate of CSS3 and media queries, there has been a few debates over how development should be done.

    Web CSS

  • CSS - The basics

    Posted on 25th January 2009.

    CSS, or Cascading Style Sheets are the easiest, cleanest and most accessible way of styling a website. Tables were previously used to position objects on the page and CSS used just to make the text look pretty. Now CSS is being relied more and more to position images, text, add spacing to websites and bring the whole site together.

    Web Front-end Development CSS HTML