Grammuelle is a Declarative CSS (SASS) framework for building cellular designs.
Try
@include Do('moduleN') {
@include If($type: "form") {
@include Then($type: "modal");
};
}
To get
.__moduleN__ form [capabillity="cancel"] {
background: #777; }
.__moduleN__ form [role] {
outline: 1px solid gold; }
.__moduleN__ form [rel] {
background: limegreen;
color: #fff; }
.__moduleN__ form [cancel] {
color: red; }
.__moduleN__ modal [role] {
outline: 1px solid gold; }
.__moduleN__ modal [rel] {
background: limegreen;
color: #fff; }
.__moduleN__ modal [cancel] {
color: red; }
Maybe (not working yet)
$ grammuelle do "aNewModuleName" "background-image: url('http://placehold.it/350x150'); color: gold;"
To update the __stylebook__
with
@include Do('aNewModuleName') {
background-image: url('http://placehold.it/350x150');
color: gold;
}
Get weird
// @fileOverview ./src/__templates__.scss
$tachyonsOnceExampleRedux: (
__typeplate__: _(
(extend, f6),
(extend, grow),
(extend, no-underline),
(extend, br-pill),
(extend, ph3),
(extend, pv2),
(extend, mb2),
(extend, dib),
(extend, white),
(extend, bg-black),
(extend, hint--bottom)
),
);
// @fileOverview ./__interface__.scss
@include Do('module__tachyonsOnceExample') {
a { @include Once(
$model: "anchor",
$collection: $tachyonsOnceExampleRedux
) }
}
$ bower|npm install grammuelle
Now update
// your theme.scss
@import "path/to/gramuelle/__stylebook__";
:root {
@extend %banner;
}
@include Do('modelP') {
@include Do('header') {
@include Responses((
banner--print,
)) {
background: purple;
}
}
}
$ node index.js path/to/stylebook
// (filename ModelP.coffee created)
class ModelP
class Header
constructor: () ->
constructor: () ->
@render()
render: () ->
@header = new Header
return
module.exports = ModelP
__basics__.scss (physical and geometric denominations)
__core__.scss (just grammatical stuff)
__interface__.scss (idiomatic stuff, web stuff, thematic media queries)
__stylebook__.scss (a new book for *grammuratificographs*)
Names are up to you. What problems are we solving?
vjuex's big css
problems:
Guard against globals:
@include Do ... If ... Then ...
Pair up thematic media queries with JS expectations:
@include Do ... Responses ...
See pynaximander. Otherwise
@include Do ... With ...
encourages template sharing which can be used in build automation pruning.
Use BEM classes and reduce to hashes:
@include Do ... Class ...
@include Do ... Once ... [getComputedStyled or requestAnimationFrame with basics]
@include Do ... Class ...
@include Do ... Rules ...
Module-level interplay goes here, or meta-CSS type junk like:
modules
grids
displays
hooks
(before
,after
order serializations)models
basics
(wip)
Generally the design ontology should be implemented within an internal, so that we provide CSS middleware from admixtures of the following:
theme.scss
and __interface__.scss
are good places to start. The latter is
like a master style
booklet for your project. After you are done preparing
your grids, modules, rules, hooks, responses, etc., import
your interface:
@import "__stylebook__";
@import "__interface__";
@import "__theme__";
Probably not, but until neversville we've got non-atomic declarative CSS to make what's possible explicit.
See ./docs/
or Web docs.
See ./glossary.md
See ./idioms.md
See ./CONTRIBUTE
See ./LICENSE