lazarljubenovic / grassy

Build layout through ASCII art in Sass (and more). No pre-built CSS. No additional markup.

Grassy | Docs | Playground

What you ASCII is what you get.

Build layout through ASCII art in Sass (and more).

Installation and Usage

yarn add grassy -D

@import "node_modules/grassy/grassy";

Quick overview

ASCII art

HTML:

<section>
  <article>Hello</article>
  <article>Grassy</article>
  <article>World!</article>
</section>

Sass:

section {
  @include grid((
    'x-x',
    'x x',
  ));
}

Result:

As complex as you like!

HTML never requires any additional classes, wrappers, etc.

@include grid(
  'x-x-x x   x'
  'x   x-x-x-x'
  '    x-x   x'
  '  x   x-x  '
);

distribute syntax

Don't lose count of your xs! Freely combine distribute with your ASCII art.

section {
  @include grid((
    'x-x x x',
     distribute 7,
  ));
}

Quick n-column layouts

As basic as it gets.

section {
  @include fixed-grid(3);
}

Don't like dangling elements?

Just tell Grassy to distribute dangling elements.

section {
  @include fixed-grid(
    3,
    $distribute-dangling: true
  );
}

Or distribute them at the top if you prefer it that way.

section {
  @include fixed-grid(
    3,
    $distribute-dangling: true,
    $dangling-at-beginning: true,
  );
}

Also take a look at full documentation. (Includes both the public API and explanation of some internal functions to help you if you want to contribute but have no idea where to start from.)

Playground

Try it out now in the Codepen playground.

Why Grassy?

• No additional markup.
• CSS is generated based on your needs: you won't have styles you don't use.
• The syntax makes it almost like you're drawing boxes instead of doing CSS.
• Great for generated content.
• Zero runtime dependencies.

More coming soon™©®.

---

NOTE This is still in rapid development phase. There might be breaking changes along the way. For this reason, I advise you not to use this in serious projects. However, to find (and fix) bugs, people have to use it somewhere. So if you have a suitable non-critical project, it would be awesome if you could try out Grassy.

Please report bugs and suggest ideas by opening an issue.

---

Grassy is heavily inspired by Effortless Style, a talk by Heydon Pickering.

grassy's Issues

Any chance for CDN?

Would be nicer and easier to play with in codepen, plnkr, etc.

IE9+ support?

I see that calc is used (IE11+), do you have a plans to fix it?

Fixed-width column support?

It could be perfect to have at least one fixed width column supported (from left or right side).
Something like: f x-x-x in ascii and additional option to specify width for "f"

Stuff to do

• Write API docs for everything
• List pros and cons, compare with other grid systems
• README with screenshots and quick tutorial (a bunch of examples)
• Check browser compatibility
• Unit tests
• Better errors for parsing ASCII art
• Contribution guide
• Code of conduct
• Open a Gitter channel
• Write a GitBook about how it all actually works
• A sassy logo
• Make sure it's not a hassle to set up in other projects
• Travis
• Introduce a styleguide
• Split up some stuff in several modules (or find existing ones with at least this much functionality)
• Take a look at Jekyll for the project site + host docs there
• Custom theme for sassdoc

Make specifying flags easier

The fixed-grid mixin currently uses a few "flags". These are actually arguments which are set to false by default, and the consumer can set them to true individually easily because Sass allows specifying arguments out of order when the argument name is given.

  @include fixed-grid(
    3,
    $distribute-dangling: true,
    $dangling-at-beginning: true,
  );

However, the number of flags would eventually grow, and this can become cumbersome. It can be solved much easier:

@include fixed-grid(3, $flags: distribute-dangling dangling-at-beginning);

Just for convenience (and some Sassy source code fun), it wouldn't be hard to allow an alternative syntax with spaces (but using commas to separate flags):

@include fixed-grid(3, $flags: distribute dangling, dangling at beginning);

We could still support the current syntax in parallel or just drop it completely.

Support repeating in ASCII syntax

Basic idea

It'd come in handy if Grassy allowed to repeat rows "forever", instead of forcing a full spec declaration. For example, a simple alternating layout such as the following will work only for 1, 2, 3 or 4 elements. The fifth element would not styled at all.

x-x x
x x-x

The grid mixin should accept a parameter $repeat, which can be set to true.

Extending the idea

However, it's not always desirable to repeat the whole layout. Consider this.

x-x-x
x x-x
x-x x

We might want to repeat the last two rows "forever". Something like $repeat-last: 2.

Thinking further

Of course, this begs for $repeat-first, or even $repeat: from 2 to 4 in cases like the following:

x-x-x
x x-x
x-x x
x-x-x

This would make sure that the first and last elements are always spanning across the whole grid, while the middle ones are alternating. However, even such a simple case would have too many edge cases to consider, which would have to be configurable in order to be sued properly:

• What if there is only 1 element? 2?
• How to even-out "dangling" elements?

This needs very careful consideration, so I'll open a new issue for this after the basic case is done first.