roytomeij

Sass Forms

Styling forms is hard. Wouldn't it be great if there was a Sass extension that would do just that, configurable to fit your needs? Here's a concept for Sass Forms (which needs a fancier name, obviously). Sass Forms comes with sensible defaults.

Based on existing markup

Because we only want to fight over Sass and the resulting CSS, we'll start with markup from SimpleForm, a gem wildly used in Rails projects (but you could just hand-code said markup as well). By doing this, Sass Forms will immediately work in thousands of web apps. By making the input wrappers, etc configurable, like SimpleForm does, it can be used in even more projects.

Later on, Sass Forms can also support Formtastic markup (or any other gem with predefined output). By tweaking just a few configuration variables, it's also great for forms with custom markup.

roytomeij

FOR IMMEDIATE RELEASE

Amsterdam, April 1st, 2014 — Today Stroopwafel.me launches its cloudless service. The Dutch company is about to redefine SaaS: Stroopwafels as a Service. Cookie-lovers worldwide can order batches of Stroopwafels to be delivered to their doorstep monthly. Stroopwafel.me's mission is to make stroopwafels available to everyone.

A stroopwafel (pronounced as stroop-waffle) consists of two thin layers of baked dough with a caramel-like syrup in the middle. It was first made in the Dutch city of Gouda, where leftover bread-crumbs were sweetened with syrup. Although widely available in the Netherlands, they are hard to come by in other parts of the world. Until now.

Stroopwafel.me offers three batch sizes: 25 ($39), 50 ($74) or 100 ($139) stroopwafels. Prices include handling and worldwide shipping. The cookies are individually wrapped to make sure they stay fresh.

The delicious treats are a great snack to grab during a morning coffee break, or for an afternoon sugar rush. They are enjoy

roytomeij

// ----
// Sass (v3.3.7)
// Compass (v1.0.0.alpha.18)
// ----

.foo {
  content: doesnotexist();
}

roytomeij

// ----
// Sass (v3.3.7)
// Compass (v1.0.0.alpha.18)
// ----

@mixin retina {
  @media
    (min--moz-device-pixel-ratio: 1.3),
    (-o-min-device-pixel-ratio: 2.6/2),
    (-webkit-min-device-pixel-ratio: 1.3),

roytomeij

// ----
// Sass (v3.3.7)
// Compass (v1.0.0.alpha.18)
// ----

@mixin retina($filename) {
  @media
    (min--moz-device-pixel-ratio: 1.3),
    (-o-min-device-pixel-ratio: 2.6/2),
    (-webkit-min-device-pixel-ratio: 1.3),

roytomeij

// ----
// Sass (v3.3.7)
// Compass (v1.0.0.alpha.18)
// ----

@mixin retina-background($filename) {
  background-image: url("images/non-retina/#{$filename}");
  
  @media
    (min--moz-device-pixel-ratio: 1.3),

roytomeij

// ----
// Sass (v3.3.7)
// Compass (v1.0.0.alpha.18)
// ----

$column-width: 60px;
$gutter-width: 20px;

@function span-columns($columns) {
  @return

roytomeij

// ----
// Sass (v3.2.19)
// Compass (v0.12.6)
// ----

@mixin respond-to($device) {
  @if ($device == 'tablet')
  {
    @media (max-width: 768px) {
      @content;

roytomeij

// ----
// Sass (v3.3.7)
// Compass (v1.0.0.alpha.18)
// ----

$devices: (
            tablet-landscape: 1024px,
            tablet-portrait: 768px,
            phone-landscape: 460px,
            phone-portrait: 320px

roytomeij

// ----
// Sass (v3.3.8)
// Compass (v1.0.0.alpha.19)
// ----

$color: "red";

a {
  color: $color;
}