Lemieux Design

Flash | Interactive | Web | Graphics | Brand | Video

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.

CSS Grid

Posted on: May 30th, 2017 by alemieux

I attended An Event Apart in Boston this May for an all-day workshop Designing Layouts: The New Superpowers of CSS, with Jen Simmons, Designer Advocate at Mozilla. I admit, I was a little skeptical that CSS Grids would be the answer and end all for web layout moving forward. However, after just a few demonstrations and seeing how little code was needed, my jaw hit the floor.

Simmons began the day by articulating Writing Modes, which at first myself and other participants were wondering “What does this have to do with CSS Grid?” Globally, about 70% of languages are left-to-right horizontally and top to bottom vertically when reading and writing. Some languages are right-to-left, like Chinese and some are totally different, like Mongolian. Since this applies to web pages, there are ways to control text-direction and other properties to affect the way a page is read. These can be manipulated via CSS. The most important concept that comes out of Writing Modes is Start and End. A block of text starts on left and ends on the right of a row. The start of a column of text is at the top and ends at the bottom. This aspect is also part of the CSS Grid specification.

We briefly took a look at support across browsers for CSS Grid. It was a hidden feature for a while, but now is fully supported in the major browsers with partial support for IE and Edge. Using the @supports media query though, graceful degradation can be utilized to serve it up to those major browsers while traditional layout methods are used in the main stylesheet for all the rest. As dismal as that sounds, the arguments for the grid are so compelling that I think a majority of designers will push for it and get on board with the code sooner than later. Something to note is that this is not a replacement for Flexbox. Flexbox has its place in web development and can be used in conjunction with the grid.

Probably the most amazing thing about CSS Grid is that it does not exist in the DOM. It’s not a new set of HTML tags or attributes. It is pure CSS. The beauty of this is that the order of page elements can be changed without touching the HTML structure. With a few lines of code, you can start a grid layout quickly and easily. Some terminology is needed first for an understanding of how the grid works. First, the grid needs a container defined with display: grid; to start a layout:

ul { display: grid; }

The grid consists of Grid tracks, grid items, grid cells, grid areas, grid lines and grid gaps.

Grid Terminology

Grid tracks are either grid columns or grid rows. Grid lines are important and not visible when you enable the grid. If you download Firefox Nightly though, you can enable the Layout Panel, which can show you the grid lines, which is very helpful when trying to understand CSS Grid.

Firefox Nightly

Starting off with a basic example. This is just a basic unordered list which would normally appear as a vertical list of text. By adding display: grid to the ul (container), we can then set up the grid using grid-template-columns: repeat(3, 1fr); This sets up a 3-column grid with each column being 1/3 of the width. The browser does all of the calculations and gives equal widths to each column and if needed, automatically gives us rows for when there are more the 3 elements in the list. We could’ve specified the grid-template-columns as 1fr 1fr 1fr, but the repeat syntax does this for us. 1fr is a new unit which is a fraction unit. We can also specify columns in pixels, ems, percentages too. Try changing the grid-template-columns to 1fr, 200px, 5em. The browser will first calculate the space needed for the second and third columns and the attribute the rest of the space to the first column. The other aspect of the grid that’s specified in this example is the grid-gap, which gives us the white space between the grid tracks. When flexing the browser width, the grid cells are flexible.

See the Pen CSS-Grid Simple Example by Al Lemieux (@alemieux) on CodePen.

In this next example we can also use the grid to explicitly place elements into grid cells. This is where grid-column-start and grid-column-end, grid-row-start and grid-row-end come into play. The grid is set up on the container (again an unordered list) and each list item is sent to a specific cell in the grid with grid-column and grid-row. Grid-column: 1 / 2 means start on grid line 1 and end on grid line 2. If you play with the designation of each rule, you can change the location of the items on the grid.

See the Pen CSS-Grid Explicit Placement by Al Lemieux (@alemieux) on CodePen.

Probably the most promising factor for CSS Grid is named Grid Areas. An area on the grid could span multiple columns and rows. You can assign a grid area a name so that when you call it in the code, you can recognize it. In the following example, HTML elements are given grid area names:

header { grid-area: header; }
footer { grid-area: footer; }

The named grid area names are then used in the grid container to define the areas for layout.

body { grid-template-areas: "header" "main" "sidebar" "footer"; }

See the Pen CSS-Grid Named Areas by Al Lemieux (@alemieux) on CodePen.

Notice the media query for larger browsers. This sets the layout to:

grid-template-areas: "header" "header"
"sidebar" "main"
"footer" "footer"

We can switch the location of the sidebar and the main content area by updating the code order:

grid-template-areas: "header" "header"
"main" "sidebar"
"footer" "footer"

I’m still playing around with the concepts and wrapping my head around the code. All of the examples I’ve built so far are a lot easier than floating elements, worrying about their container collapsing, or relative and absolute positioning. With minimal code, a layout can be achieved rapidly with minimal issues. More complex layouts might be more challenging, but I’m open for that. The next version of Bootstrap will have the grid built into it and I imagine that a lot of CMS themes will come out soon taking advantage of CSS Grid.

RESOURCES

I highly recommend checking out Jen Simmons’ labs site labs.jensimmons.com for a variety of examples and resources.

There’s also Rachel Andrews site Grid By Example, which is good source for examples.

Also, check out the fun and informative game that helps you learn CSS Grid CSS Grid Garden.

Brand Thinking

Posted on: February 13th, 2017 by alemieux

NY Trip

1. The Trump Building on Wall Street. 2. A view looking down Wall Street. The NY Stock Exchange is on the left of the Church building. 3. The residence of president George Washington, before there was a White House. 4. The boardroom at the NY Stock Exchange where the team met for the first time. 5. A view inside the NY Stock Exchange. 6. Below the flag is a balcony where they ring the bell to start the trading day. No trading starts until the bell is rung. 7. The live set of SQUAWK ON THE STREET. 8. The boards at the NY Stock Exchange. 9. The ringing of the bell to start trading. 10. The South Tower reflection pool. The names of the deceased are carved and illuminated around the outside. The water cascades down endlessly. 11. A view from the Observation deck on the Freedom Tower of Lower Manhattan. 12. The altar at Our Lady of Victory church near my hotel.

I had an opportunity last week to meet with other designers from my company in New York to talk about and kick the tires on a new brand direction. The company did some research and found that their current brand wasn’t reflective of how the users perceived the company. As anyone in brand knows, moving in a radical direction for a big company can be risky. When Tropicana made a big change to their orange juice packaging, their sales dropped dramatically and they were forced to revert to the old design. Other branding endeavors ended in fiascos, like the London Olympics. The challenge of setting standards and visually identifying the company’s values and appeal to its target audience is rigorous.

A core team set out to define a framework for the new brand initiative and shared that with a group of stakeholders who reacted positively to the direction the team set out on. We got to test that direction by applying those assets to everyday corporate assets – PowerPoint and email templates, website and UI/UX elements, event graphics, and video assets. Through discovery and adaptation, each working group found problems and solutions to working with the new brand assets.

What amazed me is the process, strategy and thinking that has to go into a brand. First, overall, what kind of image or idea that a brand should convey to its clients and to the public. The imagery, colors and graphics that are created can create a tone. Think of Apple’s branding and logo. Their approach is minimalistic, with vivid imagery and finely tuned typography. Even without their logo, their ads and billboards have a sense about them that unequivocally says Apple. That idea is captivating and most companies are scrambling to attain something that’s on par, if not better.

Apple Ad

Advertisement from Apple, Inc. Even without the logo, the typography and imagery tell that it is from Apple

The second thing that stood out to me is that a brand can’t be strict and unchangeable. If it’s so tight, it gets stuffy and difficult to work with. A brand that is nimble and flexible can afford itself multiple applications and still sustain its overall look and appeal. Nike has a variety of applications in the sports world – from running to soccer and xtreme sports. Yet their logo, quality fabrics, graphical treatments still represent a recognizable brand.

Nike Ad

As long as the logo is represented, this ad from Nike uses powerful imagery and effective typography to adhere to its brand.

There are so many considerations that go into a brand and its usage. Our working groups brought questions back to the core team about color when it’s presented on screen, for example. One of the chose colors in the palette didn’t end up working in presentations. We also had questions about graphics interfering with the logo positioning. We collaborated on possible solutions and it was energizing! We focused on a goal of getting the brand to work in a variety of situations. It was exciting!

Smooth Scrolling – With Bootstrap

Posted on: January 16th, 2017 by alemieux

Sending users to in-page targets with an ID can be jarring. They might lose context of the page when they move further down and they lose site of what came previously. A smooth scrolling animation can solve this issue and looks great!

This Pen has a great example: http://codepen.io/chriscoyier/pen/dpBMVP However, the page I was building also included Bootstrap Panels (Accordion). Since the target is any ID on the page, that will include the targets in the Panels, so it broke the functionality. I did some brief searching and found a StackOverflow response that tweaks the code to refine the targeting so as not to affect Bootstrap Carousels, or Panels. Here’s the full code:

$(document).ready(function() {
$('a[href*="#"]:not([href="#"]):not([data-toggle])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});

Now I have the functionality I want for scrolling to targets and the Panels still work.

JavaScript ES6 and the JavaScript 30

Posted on: January 4th, 2017 by alemieux

JavaScript 30

As most developers, I’ve dabbled enough in JavaScript to know that it’s a weird language (scoping, constants, strict typing, etc.). ECMA Script 6, the new face of JavaScript is looking to change all that. I’ve been going through Wes Bos’ (@wesbos) JavaScript 30 course and it’s awesome! You build 30 things in 30 days with JavaScript. Some of them are short and informative, others are lengthy and there’s a lot of code involved, but you always end up with something that you can reference and possibly use in projects.

Wes is quick and the code examples are very good. He shows you how to build out the code the old way, and then slowly builds up to the new way, with arrow functions and ternary operators. It’s fast paced fun and I’ve been thoroughly challenged by it. I highly recommend you give it a shot.