lazarljubenovic / grassy Goto Github PK
View Code? Open in Web Editor NEWBuild layout through ASCII art in Sass (and more). No pre-built CSS. No additional markup.
License: MIT License
Build layout through ASCII art in Sass (and more). No pre-built CSS. No additional markup.
License: MIT License
I see that calc is used (IE11+), do you have a plans to fix it?
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
.
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
.
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:
This needs very careful consideration, so I'll open a new issue for this after the basic case is done first.
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"
Would be nicer and easier to play with in codepen, plnkr, etc.
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.