Lemieux Design

Flash | Interactive | Web | Graphics | Brand | Video

Archive for the ‘css-web’ Category

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; }<br />
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"<br />
"sidebar" "main"<br />
"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"<br />
"main" "sidebar"<br />
"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.

Site Redesign

Posted on: August 10th, 2009 by alemieux

I guess I’m a typical artist. I’m almost never completely satisfied with the work that I create. Either illustration, web design, or music that I write, I can never seem to find that sense that “yes, this is what I imagined, that’s looking like what I thought it would.”

Redesigning my own personal site is something I’ve been wrestling with for some time now. Do I highlight my web skills, my Flash skills, my personal art? How do I sell my services, etc. I almost wish there were someone else who would design and market the hell out of it.

Anyway, there’s a great article about this topic by Lea Alcantara at A List Apart. It’s a great read, so check it out. And maybe it is time for a design refresh.

Contact Sheet Cascade

Posted on: June 12th, 2009 by alemieux

Find out about a cool feature for placing multiple images in InDesign.

Firefox 3: Reviewed

Posted on: June 20th, 2008 by alemieux

Now that the Firefox Download Day has quieted down (they got 8 million downloads in 24 hours), we can reflect a little on the latest and ‘greatest’ browser. Installing Firefox on my PC was painless. After downloading and launching the installer, I was prompted to update all of my add-ons and lost one, which I hardly used [some add-ons are incompatible with this release], and Firebug, which I’ll have to re-install. On the Mac side, it was also pretty painless, but I also lost Firebug. Fortunately, re-installing add-ons is really simple in Firefox 3. The new Add-ons Manager, makes it really easy to install and find other add-ons.

On the PC side, the interface is nice and clean with little touches to the UI, including some new buttons for navigation. On the Mac side, the interface has a lot more contrast than the last release and looks more like a native OSX app.

Performance-wise, on both platforms, Mozilla’s claim that Firefox is faster seems to be substantiated. It feels a lot quicker than the last release. There’s less of a hesitation for pages to load. The new location bar, toted as "Awesome Bar" by Mozilla, is a little less than that.  When typing an address into the location bar, relavant matches are returned as possible choices for surfing. This feature is like the search feature found on Apple’s website. Type in a phrase like MacBook and a list of possible results appears even before you commit the search. I find the ‘Awesome Bar’ to be less than that, simply because the possible results don’t seem to be that relavant or of interest to me. According to Mozilla, the Awesome Bar "learns as people use it, adapting to user preferences and offering better fitting matches over time." Maybe it will get better over time.

The new Library houses all of your bookmarks, history, and Tags. Tags aren’t necessarily new to Firefox, but now they are more useable. To access the Library, go to the Bookmarks menu to Organize Bookmarks. Select a bookmark and enter a value into the Tags field. For example, I entered Flash as a tag for Ultrashock and FlashKit. Now when I want to visit Flash sites, all I have to do is type the tag Flash into the location bar and those bookmarks will appear.

One click bookmarking (that’s the star icon in the location bar) is now available. So, you visit a site for the first time. The star is hollow. Click the star and it becomes yellow, which means the site is bookmarked for future reference. Click the star again and you can categorize the bookmark so it goes somewhere meaningful in your bookmarks folder. So, it may be called one click bookmarking, but if you click only once, the bookmark will be created, but it will go into a folder called Unsorted Bookmarks.

Another new feature in the location bar is the ability to click on the favicon for any site to find out more information about that site. You can instantly get detailed information about a site, like it’s web standards status, encoding, media – or where all of the images are linked to. You can even then save those images quickly with the click of a button. You can set any permissions settings, like pop-up blocking, and cookies. Finally, you can view security features for the site you are on, including all saved cookies and saved passwords.

The new Password Manager is unobtrusive, compared to the previous version. In Firefox 2, a big dialog would hit you over the head and ask if you wanted Firefox to remember a password after you entered it.In Firefox 3, a slim bar appears below the top of the viewport with the same options.

This is not an exhaustive review, so you can learn more about all of the new features here: http://www.mozilla.com/en-US/firefox/features/#full-zoom

All-in-all, I think Firefox 3 is a welcome upgrade with some very user-centric features that continue to make it stand, head and shoulders above Internet Explorer. It’s pretty clear to see that Firefox is becoming the standard bearer for browsers, innovating new features that empower the user – whether the user is a typical surfer, serious web user, or even developer – there’s enough features here for everyone.

Web Design Survey

Posted on: October 17th, 2007 by alemieux

A List Apart has released its 2007 Web Design Survey.

Web Fonts – Literally

Posted on: October 11th, 2007 by alemieux

Verdana, Arial, Helvetica, sans-serif; Or Times, Times New Roman, serif. You’ve used it many times. Possibly with variations, like Georgia or Trebuchet MS. The small set of fonts that are commonly available on most systems is simply boring. I can’t get any energy out of a story in Times.

Enter Prince 6 and the ability to embed fonts in a web page. Not a new concept, but something that’s been desired for a while. This article on A List Apart describes in detail what is possible and what the future may hold for font embedding.

Unfortunately, only TrueType fonts are the file type of choice, so don’t get your OpenType hopes up.