Viewing posts tagged CSS

Release Day: Our Drupal 8 Theming Guide

Today, we're super excited to publish our Drupal 8 Theming guide, a collection of tutorials that will teach you everything you need to know to create amazing Drupal 8 themes. We've put hundreds of hours into researching, digesting and understanding the Drupal 8 theme system. We've poured over the existing documentation and helped to update it whenever we could. We've read the code that makes it all possible, we've dissected core and contributed themes, and talked with front-end developers at Lullabot about their experiences, in order to learn about best practices and unique challenges. And then we boiled it all down into the ultimate Drupal 8 theming guide.

Controlling CSS Classes with the Classy Theme in Drupal 8

You may have heard some news about the fact that a new theme has been added to Drupal, named Classy. But what kind of theme is it exactly? Is it a pretty new look for Drupal 8? Well, no. You will still see Bartik as the default theme on your Drupal 8 site, so why another theme? Classy is a new base theme in core, which Bartik and Seven will then use as their bases. The idea here is to provide more flexibility to themers when it comes to choosing default CSS classes.

Release Day: CSS Prep and Drupal Elements

This week we're chugging along with our PSD to Drupal Theme series, with a look at getting our CSS system setup and figuring out our Drupal elements for theming. Now that we have a style guide, we want to start stubbing out the CSS files we'll use to represent it with our grid framework, and then we'll get our layout rules into place. With the CSS basics in place we're going to run through creating our Drupal element checklist to make sure we know which design components map to which Drupal pieces. This will set us up with a good foundation to begin setting up the site for theming.

Next week we'll continue with the Drupal site-building by getting the elements into place that we'll need. We'll be configurig things like image styles and blocks for the site.

Release Day: Sass Partials and Using Compass

For this week's installment of the Learning Sass and Compass series we will wrap up our Sass basics with looking at how to use "partials" to help organize our CSS. Then we launch ourselves into the world of Compass. We'll walk through the Compass configuration and play around with the commands we can use to get Compass helping us with our Sass projects.

Podcast Episode 20: Getting Sassy with Chris Eppstein

In episode 20 of the Drupalize.Me podcast, we're fortunate to be joined by guest Chris Eppstein, the creator of Compass, and part of the core Sass team. We also have three Lullabot front-end developers on the podcast, Micah Godbolt, Kris Bulman, and Carwin Young.

Release Day: Sass Variables, Mixins, and Functions (oh My!)

This week in the Learning Sass and Compass series we really dive into the meat of using Sass by covering the major features. We'll walk through what variables, mixins, functions, and the @extend directive. We explain each feature, show you how to use it, and we also take a look at the differences between them. This is the real power of using a CSS preprocessor like Sass.

Release Day: Getting Started with Sass

As we continue our Learning Sass and Compass series we finish up with installing Compass two different ways, and then open up a text editor to start playing with Sass. In previous weeks we've installed Ruby and Sass, using the command line. This week, we install Compass from the command line as well, but then we introduce a nice GUI application, Scout, that contains Ruby, Sass, and Compass already all set up for us — no command line needed at all!

Release Day: Sass Terminology and Getting It Installed

This week in the Learning Sass and Compass series we finish preparing ourselves to work with Sass, by taking a look at the main pieces we have to work with. We'll see what Compass is all about, and walk through the important Sass terminology you'll encounter, including that confusing bit about .scss versus .sass. With our background information complete, we'll get started by getting Sass, and Ruby, installed and tested.

New Series: Learning Sass and Compass

Sass is a great tool for taking your CSS to the next level. It is a CSS preprocessor, which is a class of CSS tools which are essentially a scripting language that gives CSS much greater flexibility and power, but still gives you CSS at the end of the day. This week we're happy to be starting a new series, Learning Sass and Compass, that explains what CSS preprocessors are, and how to use one of the most popular ones in use today, Sass, along with its popular library, Compass. More and more projects today are incorporating Sass and Compass, and it's no surprise once you see the power and efficiency they add to any front-end web project your working on. You'll even see Sass popping up in some great Drupal base themes, like Zen, as a standard way to efficiently get the job done.