Coder Social home page Coder Social logo

lazarljubenovic / grassy Goto Github PK

View Code? Open in Web Editor NEW
332.0 13.0 8.0 259 KB

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

License: MIT License

CSS 97.60% JavaScript 1.17% HTML 1.23%
sass grid grid-layout grid-system ascii-art

grassy's Issues

IE9+ support?

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

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.

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"

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.

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.