Shipping system fonts to GitHub.com

System font stacks got hot about a year ago, no doubt influenced by Mark Otto's work putting them live on GitHub.

The why, to me, feels like (1) yay performance and (2) the site looks like the rest of the operating system. But to Mark:

Helvetica was created in 1957 when the personal computer was a pipe dream. Arial was created in 1982 and is available on 95% of computers across the web. Millions, if not billions, of web pages currently use this severely dated font stack to serve much younger content to much younger browsers and devices.

As display quality improves, so too must our use of those displays. System fonts like Apple’s San Francisco and Microsoft’s Segoe aim to do just that, taking advantage of retina screens, dynamic kerning, additional font-weights, and improved readability. If operating systems can take advantage of these changes, so too can our CSS.

(more…)

​Wix.com: Make the Web Your Playground

Here's something you should consider having: your own professional website. The only thing you'll need to get started is your imagination, a little free time, and an innovative website builder.

Wix is the world's most technologically advanced website builder. Sign up for Wix, choose a template, and start customizing it. Whether you’re a novice, a business owner, a sophisticated designer, or a professional website builder, you’ll have full control of your website - from design prototyping to production.

(more…)

CSS Basics: Styling Links Like a Boss

You are probably well acquainted with how links looks without any styling at all. That blue. That underline. That's a link in it's purest form. But what if we want to change things up a bit? Perhaps blue doesn't work with your website's design. Maybe you have an aversion to underlines. Whatever the reason, CSS lets us style links just like any other element.

CSS Basics: The Second “S” in CSS

CSS is an abbreviation for Cascading Style Sheets.

While most of the discussion about CSS on the web (or even here on CSS-Tricks) is centered around writing styles and how the cascade affects them, what we don't talk a whole lot about is the sheet part of the language. So let's give that lonely second "S" a little bit of the spotlight and understand what we mean when we say CSS is a style sheet.

(more…)

CSS Grid Layout Module Level 2

The second iteration of CSS Grid is already in the works and the public editor's draft was released last week! While it is by no means the final W3C recommendation, this draft is the start of discussions around big concepts many of us have been wanting to see since the first level was released, including subgrids:

In some cases it might be necessary for the contents of multiple grid items to align to each other. A grid container that is itself a grid item can defer the definition of its rows and columns to its parent grid container, making it a subgrid. In this case, the grid items of the subgrid participate in sizing the grid of the parent grid container, allowing the contents of both grids to align.

(more…)

CSS Basics: The Syntax That Matters & The Syntax That Doesn’t

When you're starting to play around with CSS at the very beginning, like any other language, you have to get used to the syntax. Like any syntax, there are a bunch of little things you need to know. Some characters and the placement of them is very important and required for the CSS to work correctly. And some characters are more about clean looking code and generally followed standards but don't matter for the CSS to work.

(more…)

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag