Post pobrano z: Getting Started with CSS Grid

This was a blockbuster week for front-end developers as CSS Grid landed in the latest versions of Firefox and Chrome without a feature flag. That’s right: we can now go and play with Grid in two of the most popular browsers right away.

But why is CSS Grid a big deal and why should we care?

Well, CSS Grid is the first real layout system for the web. It’s designed for organizing content both into columns and rows and it finally gives developers almost God-like control of the screens before us. That means that we can finally ditch decades of hacks and workarounds for setting elements on a web page – ultimately it means that complex layouts and beautifully typeset pages are now not only possible but easy and maintainable.

With CSS Grid, the web is about to become a much more beautiful place than what we’re accustomed to.

OK, but how does Grid work? There are a lot of complex tutorials out there that go into an awful lot of detail but I think we should start with the very basics. What we’ll be making here is a relatively simple type specimen, with a bunch of characters from an alphabet laid out on a page.

To get started we’ll add our markup:

<div class='wrapper'>
  <div class='letter'>
    A
  </div>
  <div class='letter'>
    B
  </div>
</div>

First up we’ll style those letters to use the right font-size and color and then we’ll center those letters in the divs with flexbox properties like align-items and justify-content. And yes, that’s right! CSS Grid doesn’t replace flexbox properties as much as it compliments what they already do. We can even use many of these properties in conjunction with CSS Grid. But for now let’s return to the demo:

In the example above we have two simple divs sitting on top of one another because they’re default is display: block. Next up we’ll set our parent element to use Grid layout:

.wrapper {
  display: grid;
}

Which will then lead to this:

See the Pen Type Specimen Grid Demo – 1 by Robin Rendle (@robinrendle) on CodePen.

Now you might see that nothing really happened. And you’d be right! Unlike setting display: inline-block; or display: inline;, it’s not entirely clear what happens when we set display to grid. In fact, to get our grid to actually do something we first need to feed it a certain number of columns or rows. In this example we’ll just align the letters next to each other into two columns:

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 1px;
  background-color: black;
}

Let’s break these new lines of code down. First we create two columns of our grid with grid-template-columns. That 1fr value might seem super weird if you’ve never seen it before but it’s a valid CSS unit that tells each column to be one fraction of our grid. In this instance, that means there will be two columns of equal width.

This will end up looking something like this:

See the Pen Type Specimen Grid Demo – 2 by Robin Rendle (@robinrendle) on CodePen.

Hooray! It works. But see that curious gap between the two columns? That’s the background of the wrapper peaking through each letter div and that’s because we’ve set the grid-column-gap property to 1px. Usually, we’d want to give a larger column-gap then that, especially if we’re aligning text blocks next to each other. But in this instance, a single pixel is good enough for us.

So what happens if we add two new letters to our markup? How will that change the layout?

<div class='wrapper'>
  <div class='letter'>
    A
  </div>
  <div class='letter'>
    B
  </div>
  <div class='letter'>
    C
  </div>
  <div class='letter'>
    D
  </div>
</div>

Well, technically it won’t change the grid at all – we’ve already told the grid to have two columns so those two letter divs are going to sit in place directly beneath the others and be exactly 1fr wide:

See the Pen Type Specimen Grid Demo – 3 by Robin Rendle (@robinrendle) on CodePen.

Now here’s the weird thing – why isn’t there a 1px gap between letters A and C as well as between B and D? Well, grid-column-gap is only for columns and what we’ve effectively done here is create a new row in our grid. We’ll have to use grid-row-gap to see that change take effect:

.wrapper {
  grid-column-gap: 1px;
  grid-row-gap: 1px;
  /* other styles go here */
  /* we could have also used the shorthand `grid-gap` */
}

And here’s what that looks like:

See the Pen Type Specimen Grid Demo – 4 by Robin Rendle (@robinrendle) on CodePen.

We’ve created our very first grid. We’ve made a row and a column and all we’ve really had to do is change the markup. But let’s just explore our columns a little more. What would happen if we add another value to the grid-template-columns property? Like this:

.wrapper {
 grid-template-columns: 1fr 1fr 1fr;
}

Well, we’d create another column of course! And notice how we can clearly see the background of the wrapper element now because there aren’t any children to fill that space:

See the Pen Type Specimen Grid Demo – 5 by Robin Rendle (@robinrendle) on CodePen.

And if we change the value of a fr in that property then that would effectively create what’s known as an asymmetric grid. Let’s say that we wanted our first column in our grid to take up three times the amount of space as the other two columns:

.wrapper {
 grid-template-columns: 3fr 1fr 1fr;
}

That would lead to the columns with A and D to be larger than the other two columns, just as we’d expect:

See the Pen Type Specimen Grid Demo – 6 by Robin Rendle (@robinrendle) on CodePen.

Isn’t that powerful? No longer do we have to worry about negative margins or the perfect % value of a grid column to align things properly. We can make super complex grids without having to do any of the math that we would’ve been forced to do in the past. Now we just need to add a new value to the grid-template-columns property and voilá, a new grid column appears like magic!

But what about responsive grids, you might ask? Well that’s really just as simple as changing that property within a media query. Let’s say that we want 2 columns as our default grid size then at 500px we want 3 columns and finally, on larger screens, we’ll shift all that content into 4 columns. All we’d need to write is this:

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  
  @media screen and (min-width: 500px) {
    grid-template-columns: 1fr 1fr 1fr;
  }
  
  @media screen and (min-width: 800px) {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

Make sure to open up this demo in a new tab and change the size of the viewport to see the responsive magic happen!

So the grid-template-columns property is a lot more complicated than what I’ve shown here but this is a great starting point. Next up we ought to learn about the real, life-changing property in the CSS Grid spec: grid-template-rows.

Ok, let’s go into it blind. In the small bit of code below, and with what we’ve learned so far about Grid, let’s figure out what this new property might do:

.wrapper {
  display: grid;
  grid-template-columns: 3fr 1fr 1fr;
  grid-template-rows: 1fr 3fr;
}

Instead of setting the width of columns and their relationship with one another, we’re now going to set the height of rows and their relationship. So if we have two rows like in our previous demo and the last unit is set to 3fr then that means the second row will always be three times the height of the first:

See the Pen Type Specimen Grid Demo – 8 by Robin Rendle (@robinrendle) on CodePen.

This might look pretty simple yet previously we’ve never really been able to do this. We’ve always had to write gross hacks like setting a min-height on a specific element or changing a class name. But we’ve never been able to create relationships between rows like this before; that’s what makes CSS Grid so powerful.

With this tiny bit of knowledge and a handful of new properties, we can create fabulously complex layouts – asymmetric and responsive grids being just one small part of them. And so far this has only been a glimpse into the monstrous CSS Grid spec, as there’s an awful lot to cover. But I think that Jen Simmons described it best when she wrote about Grid:

We need to explore CSS Grid until we understand what it wants to do, what it can be forced into doing, and what it refuses to do. Many designers may not ever learn to code CSS, but you need to understand CSS well enough to understand our artistic medium.

And sure, all the code above looks very strange at first. But what it means is that we don’t have to use giant CSS frameworks and also a whole bunch of layout hacks are now completely irrelevant. But what really excites me most about Grid is that it compels us to see the space inside a browser in a completely new way.

We’ll have to not only learn a bunch of new properties, but we’ll also have to entirely rethink what we’ve learned in the past. So CSS Grid is not just a spec but a strange philosophy unto itself.

Let’s figure it out together!

Browser Support

More Information

• Jen Simmons and Rachel Andrew have written a lot of amazing tutorials and walkthroughs on the subject
• Grid Inspector Tools in Firefox is super handy
• We have a Complete Guide to Grid which goes into a lot more detail on each property and value

---

Getting Started with CSS Grid is a post from CSS-Tricks

Post pobrano z: If Your Company Were a Couch…

Without even realizing it, our perceptions are cross-referenced with our memories. Our brains conjure up an emotional reaction when our eyes see familiar shapes, colors, and textures. This fun exercise uses various styles of couches to help you make decisions about the emotional response that best represents the personality of your company (or how you would like your company to be perceived).

So, which couch feels most like your company? Parallel your choice with your company’s brand personality attributes. Insights on effective color and hand-picked typography choices (with links to free fonts) are included and will help codify your communication style. See if your choice aligns with your company’s mission and vision.

Is your brand…

Stylish?

Clean lines, modern, current. That’s a stylish company. Being confident and deliberate in your decision-making shows in everything you do. This company may associate themselves with a Mid-Century modern look.

Recommendations:

For color — go fruity for the main color, use: orange, plum, lime, blueberry, etc. ground it with a gray or charcoal. A geometric sans-serif font like Raleway will feel contemporary yet timeless; look cutting-edge yet approachable —all staying in line with that sharp stylish image.

Case in Point:

Agile?

Pragmatic in its approach, this company can accommodate almost anything that is thrown its way. The agile company appeals to people who want to get things done no matter what road blocks they come against. Energetic and flexible, this company is always on its toes.

Recommendations:

A fun muted tone with sage greens and slate blues will keep the look grounded. The typography should be super clean while the layout is geometric and modular. A condensed font face like Alpin Gothic will make an excellent evergreen typeface solution for your logotype.

Case in Point:

Collaborative?

Communication is key. Relationships are important to your organization both internal and external. Decisions are not made in a vacuum but are a result of the collaboration of many minds. Your company culture is perceived as young, thoughtful, and deliberate.

Recommendations:

The color family is a pop of color grounded in neutrals. Pick one strong color. Don’t clash hues. Balance a dominant color with lots of white. For a logotype, stay friendly and timeless with a sans-serif font such as, Langdon.

Case in Point:

Rustic?

Solid furniture, wood, and leather — heirlooms that evoke a rugged, organic tone. You take your work seriously. You are a meat and potatoes kind of company.

Recommendations:

Stay earthy or let your corporate identity color palette go beyond greens and chestnut browns with inspiration drawn from the colors of autumn leaves, baked clays, and terracotta. Keep the font strong, legible, and simple by using a san-serif or get bold with a slab font like Museo Slab. A showy, novelty font will dilute your message.

Case in Point:

Playful?

Happy and productive corporate or retail culture. This is a place where ideas become realized and enthusiasm is valued. The employees feel appreciated and are proud to be associated with the company.

Recommendations:

Let go a little with this color palette. Explore colors such as vintage teal, pink, or robin’s egg blue. Conversely, use a neutral as a secondary color to counter the fun color and ensure a professional feel. Play with a bold, retro script like, Grand Hotel for a logotype. Steer clear of novelty fonts. Over-designed fonts make you look like you are screaming for attention and may come off as amateurish. Downplay to stay above the pack.

Case in Point:

Accomplished?

A bookshelf laden with books from every generation and a smart looking desk lamp define this category. Rich in tradition and high on integrity, you’re a company built on a solid reputation that has garnered great respect from years of experience and deep knowledge of your industry.

Recommendations:

Consider darker colors to convey depth and couple it with several shades of an earthy tone: a mid-tone khaki or charcoal gray. Using a classic typeface with contrasting thick and thin strokes will be easily readable. A serif typeface will represent stability and credibility, along the lines of Crimson in upper and lower case.

Case in Point:

---

Karen Barranco is originally from New Orleans and now in Los Angeles. In 2000 she founded Special Modern Design and her work has been been published internationally in books, print magazines, and online, including being featured on lynda.com and being hand-picked by Shepard Fairey to represent the „Revitalization of the Los Angeles River by 2020” initiative. Logos With Soul is a spin-off company for designers.

---

If Your Company Were a Couch… is a post from CSS-Tricks

Post pobrano z: Ambassador Watches

Post pobrano z: AughtFive

Post pobrano z: Infinity Foods

Post pobrano z: C&C Coffee Co.

Post pobrano z: Need to do Dependency-Free Ajax?

One of the big reasons to use jQuery, for a long time, was how easy it made Ajax. It has a super clean, flexible, and cross-browser compatible API for all the Ajax methods. jQuery is still mega popular, but it’s becoming more and more common to ditch it, especially as older browser share drops and new browsers have a lot of powerful stuff we used to learn on jQuery for. Even just querySelectorAll is often cited as a reason to lose the jQuery dependency.

How’s Ajax doing?

Let’s say we needed to do a GET request to get some HTML from a URL endpoint. We aren’t going to do any error handling to keep this brief.

jQuery would have been like this:

$.ajax({
  type: "GET",
  url: "/url/endpoint/",
}).done(function(data) {
  // We got the `data`!
});

If we wanted to ditch the jQuery and go with browser-native Ajax, we could do it like this:

var httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = ajaxDone;
httpRequest.open('GET', '/url/endpoint/');
httpRequest.send();

function ajaxDone() {
  if (httpRequest.readyState === XMLHttpRequest.DONE) {
    if (httpRequest.status === 200) {
      // We got the `httpRequest.responseText`! 
    }
  }
}

The browser support for this is kinda complicated. The basics work as far back as IE 7, but IE 10 is when it really got solid. If you wanna get more robust, but still skip any dependencies, you can even use a window.ActiveXObject fallback and get down to IE 6.

Long story short, it’s certainly possible to do Ajax without any dependencies and get pretty deep browser support. Remember jQuery is just JavaScript, so you can always just do whatever it does under the hood.

But there is another thing jQuery has been doing for quite a while with it’s Ajax: it’s Promise based. One of the many cool things about Promises, especially when combined with a „asynchronous” even like Ajax, is that it allows you to run multiple requests in parallel, which is aces for performance.

The native Ajax stuff I just posted isn’t Promise-based.

If you want a strong and convenient Promise-based Ajax API, with fairly decent cross-browser support (down to IE 8), you could consider Axios. Yes, it’s a dependency just like jQuery, it’s just hyper-focused on Ajax, 11.8 KB before GZip, and doesn’t have any dependencies of its own.

With Axios, the code would look like:

axios({
  method: 'GET',
  url: '/url/endpoint/'
}).then(function(response) {
  // We got the `response.data`!
});

Notice the then statement, which means we’re back in the Promise land. Tiny side note, apparently the requests don’t look identical to jQuery on the server side.

Browsers aren’t done with us yet though! There is a fairly new Fetch API that does Promise-based Ajax with a nice and clean syntax:

fetch('/url/endpoint/')
  .then(function(response) {
    return response.text();
  })
  .then(function(text) {
    // We got the `text`!
  });

The browser support for this is getting pretty good too! It’s shipping in all stable desktop browsers, including Edge. The danger zone is no IE support at all and only iOS 10.1+.

---

Need to do Dependency-Free Ajax? is a post from CSS-Tricks

Post pobrano z: CSS-Tricks Chronicle XXX

I got a chance to be on the Thunder Nerds podcast the other week, on the episode 55 – Down Wit SVG? Yeah You Know Me with Chris Coyier. We got to talk about a variety of things that I work on, including Practical SVG, CodePen, this site, ShopTalk, and upcoming conferences. Speaking of which…

---

The very next thing I’ll be speaking at is An Event Apart in Seattle on April 3-5, 2017. I’m also doing the A Day Apart workshop, which I gave a tiny sneak peek at the other day.

I’ll be at most of the other An Event Apart shows this year as well: Boston, Chicago, San Francisco, and Denver.

The AEA gang interviewed me about a bunch of interesting stuff recently, as well.

---

Other conferences I’ll be at this year include:

• June 16, 2017, CSS Day, Amsterdam, NL
• August 17, 2017, Build Right: Maker Series, Dayton, Ohio
• September 25-26, 2017, Web Unleashed, Toronto, Canada
• October 9-11, 2017, CSS Dev Conf, New Orleans, LA

And at least two more that I’ll need to wait to mention until they get something online for.

Sarah Drasner also keeps our Guide to 2017 Conferences post up-to-date, if you want to look more broadly at what’s out there.

---

We’ve shut down the shop here on CSS-Tricks. It’s likely temporary as we kinda revamp the merch in there and freshen things up. No exact plan yet, but of course we’ll let you know when it’s back open again.

---

Since the new year, Dave and I have been very steadily publishing new episodes of ShopTalk, and we have plenty more lined up. If you’re anything like me, your podcast listening behavior fluctuates and you go in and out of it. If you’re about to go into an „in” phase, might I recommend”

• 247: The Performance Equation
• 248: AMP
• 250: Web Security

---

CodePen Radio is also going strong. We’re up to 120 already! I might recommend:

• 114: GitLab
• 115: Community
• 118: Email

---

Speaking of CodePen, if you’re a PRO user, you might have already gotten an email about our latest feature, now in BETA. It will be our biggest release ever on CodePen. If you had any sense at all that releases on CodePen were slowing down, you might have been right, because we’ve been so heads-down on this thing for over a year.

That’s not to say there isn’t anything new. We’ve release things like a revamped Autocomplete, new fonts like Fira Code and an updated Monoid, persistent editor layout, improved CORS handling, improved infinite loop detection, and plenty more.

---

We’ve also started sending another weekly newsletter called The CodePen Spark that is loaded with amazing work from that week. We’re already up through week 15!

---

CodePen Meetups are also hopping. I’m gearing up to go to one tonight, here in Miami where I have been living the past few months. I also recently got to attend the one in Denver, which was huuuuge. I’ve never been to one I didn’t have a good time and learn something at.

They’ve also been as international as ever! We have plenty in the United States, but There are upcoming meetups in places like:

• Auckland, New Zealand
• Sylhet, Bangladesh
• Örebro, Sweden

Bulgaria just had their first! Dublin has had fourteen! If you’d like to host one in your area, you can.

---

Last but not least, the CSS-Tricks Newsletter gets better all the time. Remember it’s completely hand-written these days to explain all the most interesting stuff that week and much of it is unique to the newsletter.

---

CSS-Tricks Chronicle XXX is a post from CSS-Tricks