Lemieux Design

Flash | Interactive | Web | Graphics | Brand | Video

Archive for the ‘CSS’ Category

CSS Grid Course from Wes Bos

Posted on: July 3rd, 2018 by alemieux

CSS Grid Course

Coding guru and whiz Wes Bos put together a free online course on CSS Grid. I recently finished the course and have to say it was awesome!

Like his other courses, Wes focuses on the things that are important and gets right to it. There’s not a lot of chit chat and useless conversation—it’s all about the coding. I followed along with him (he gives all of the exercise files and more) and was really impressed by the way in which we go from zero to a full grid layout in a matter of minutes. He’s so fast in the code editor, you can tell he codes everyday. There were many times I had to pause the videos to catch up.

There are 25 lessons and the first 18 – 19 are all about the nuts and bolts of grid and how it works. There are several exercises and explorations on grid properties and situations. Then he progresses into practical applications of grid for responsive design, as an alternative to Bootstrap, for image galleries and more. It really comes together in the last 5 videos.

There are some golden nuggets in the first video in terms of his setup and how he uses NPM browser watch that really is a great productivity increase. He even sprinkles in some JavaScript. I highly recommend it.

Learn more about the course here: https://wesbos.com/announcing-my-css-grid-course/

CSS Variables

Posted on: June 28th, 2018 by alemieux

I’m not a fan of LESS or SASS, at least for my workflow. In marketing, I usually am designing landing pages or one-off experiences that don’t require a ton of styles to manage. I’m not collaborating with other designers who are also in the same code as I am.

I have played around with SASS, so I was familiar with the concept of setting variables. Having read a few articles on CSS Variables (Custom Properties), I was blown away by the utility of it. To set a property once and apply it throughout a design so that if and when it changes, it ripples through and changes it everywhere. That’s pretty powerful for CSS, which isn’t a programming language.

Support is pretty good except for IE and Opera Mini, but no surprises there. All of the major vendors do support it.

There are a couple of ways to implement vars in your stylesheet, but I feel like the most useful way is to use it in the :root selector, which is a unique selector that can store all the variables for your web application in one place. Here’s an example:

:root {
–purple: #cc69a7;
}

Notice the syntax of the variable is two dashes followed by the name of the variable and its property. The :root selector will have effect throughout the stylesheet and can be overridden in other selectors by declaring variables within them and using them there.

To apply a variable to a property within a selector, you use the var() command and call on the name of the variable:

.header {
background-color: var(–purple);
}

Variables can contain property values for color, font-family, box shadow, and any other property you can think of. It’s pretty amazing when you begin to realize the power of setting things for consistency throughout a design.

Here’s a basic code example:

See the Pen CSS Variables test by Al Lemieux (@alemieux) on CodePen.

Without a doubt, I’ll be putting this to good use in the future.

Palette Generator

Posted on: September 12th, 2007 by alemieux

Big Huge Labs has a cool product/mashup called palette generator. You can upload a photo or use photos from your flickr account and it will generate a color palette for you based on the colors in the image. It even gives you a CSS file with all of the hex values for use. Nice!