1º Banana hangout

[afonsopacifer]

1º Banana hangout

Participantes:

• @afonsopacifer
• @nathpaiva
• @danilovaz
• @jjaderg (stealth mode)

O que rolou:

Apresentação dos objetivos do projeto e primeiras features.

• bnn-size property.
• bnn-position property.
• bnn-gradient property.
• bnn-align property.
• bnn-width property.
• bnn-height property.
• Module Bundler with native @import syntax.
• Global variables with native custom properties syntax.

Objetivo:

Colher feedbacks e gerar ideias.

Novas features sugeridas:

Grid:

Banana code:

.row {
    bnn-width: 900px;
    bnn-position: center;
    bnn-align: left top;
}

.column {
    bnn-col: 4 12 2px; /* cols | total of cols | margins */
}

CSS result

.row {
    width: 100%;
    max-width: 900px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
}

.column {
    margin-right: 2px;
    margin-left: 2px;
    width: x%; /*  x = ((100% * 4) / 12) - (2px * 2) */
}

Box model:

Banana code:

.* {
    bnn-box: default;
    bnn-box: content;
}

CSS result

.* {
    box-sizing: border-box;
    box-sizing: content-box;    
}

Transform:

Banana code:

.element {
    bnn-x: 200px;
    bnn-y: 150px;
    bnn-scale: 50%;
    bnn-rotate: 45deg;
}

CSS result

.element {
    transform: translateX(200px) translateY(150px) scale(.5) rotate(45deg);
}