The following is a guest post by Mike Neumegen from CloudCannon. Mike and I talked about doing a little series on building Jekyll sites, which of course I was into because Jekyll is great and more education around static site generators is a good thing. Full disclosure, Mike's company CloudCannon is a CMS on top of Jekyll. As part of this series he's going to show you how to use that, so I requested it be a sponsored post.
Jekyll is the most popular static site generator. It takes source files and generates a website of static pages upfront, ready to serve to users directly. This is different from how a traditional CMS works, such as WordPress. WordPress uses a server side language and database to generate a page when requested by a user.
In this series, we'll cover the basics of developing sites with Jekyll. Starting by converting a static site to Jekyll, adding a CMS for non-developers using CloudCannon, then building a commenting system using Firebase.
This article is not intended for seasoned React pros, but rather, those of us who make websites for a living and are curious how React can help us reason about updating user interfaces. I’ve been intrigued by React for some time, and now that it has gained some standing in the community as well as good reviews, the time to learn it seemed justified. There are so many new technologies constantly emerging in front end development that it’s sometimes hard to know if effort into learning something new will pay off. I’ll spend this article going over what I think some of the most valuable practical takeaways are so that you can get started.
background-clip is one of those properties I've known about for years, but rarely used. Maybe just a couple of times as part of a solution to a Stack Overflow question. Until last year, when I started creating my huge collection of sliders. Some of the designs I chose to reproduce were a bit more complex and I only had one element available per slider, which happened to be an
input element, meaning that I couldn't even use pseudo-elements on it. Even though that does work in certain browsers, the fact that it works is actually a bug and I didn't want to rely on that. All this meant I ended up using backgrounds, borders, and shadows a lot. I also learned a lot from doing that and this article shares some of those lessons.
Before anything else, let's see what
background-clip is and what it does.
This year, the O'Reilly Fluent Conference (March 7-10 in San Francisco) brings you new 2-day, in-depth training courses in topics like React, CSS Layouts, Website Planning and Design. You'll also find case studies, introductions to new tools and technologies, best practices, inspiring keynotes, the ever-lively expo hall, and nonstop networking opportunities. Take a look at the schedule and see how it measures up against the problems you need to solve or the things you promised yourself you'd learn. Fluent could just be the best thing you do for your career in 2016.
Take 30% off your registration when you use the code CSS30.
I like other CMS's. I promise. But WordPress is super perfect for all the things I need and want to do around here on CSS-Tricks.
The following is a guest post by Tom Genoni. Tom is going to introduce us to the thinking and process behind Optimizely's new UI library / Sass framework. Part 2, by Daniel O'Connor, looks at some of the technical and integration bits.
When I first started working on web projects, stylesheets were seen as a necessary evil. It was neither a real language to be taken seriously by a computer-science minded engineer nor simple enough for a designer to fully own and understand. With few best practices, organization of the CSS was always ad hoc—“type styles in this section, colors in that section”—and every company did it differently. But as web applications, and the teams building them, grew larger and more complex it became harder to manage ballooning codebases while maintaining consistency across teams and projects.
Jina Bolton is throwing this brand spankin' new conference in San Francisco at the end of March, and I'll be MCing!
10% off with coupon code "CodePen"
On the design of CSS-Tricks as I record this, one of the things I wanted to add was a "Front End Design & Development Jobs" widget, powered by the CodePen Job Board. Those jobs are available as JSON data.