Flamework 🔥
A SCSS/Styled-components layouting lib. Lightweight, non-intrusive with intuitive and clear syntax to put your project ablaze!
Layout
- Defining a container:
<div contain class="contain">...</div>
- Direction and Wrap:
<div layout=column column nowrap>[columns]</div> <div class="row nowrap mobile-wrap">[row but wraps in mobile]</div> <div mobile-layout=row mobile=column>[column | mobile rows]</div> <div class="row row-reverse" row="nowrap reverse">[reverse]</div>
- Alignment:
<div align="center stretch">...</div> <div mobile-align="center center">...</div>
Options: Main axis:
- start
- between
- around
- even
- center
- end
Cross axis:
- start
- center
- end
- stretch
Flex Columns
<div flex="33">...</div> <div mobile-flex="grow">...</div>
Flex Options:
- multiples of 5: 5, 10, .. 95, 100
- 33 or 66
Behavior:
- none
- initial
- noshrink
- auto
- stretch
- grow
Utils
- .videoWrapper (makes video responsive 16:9)
- .w100, .h100 (util: width or height 100%)
- .hide-mobile, .hide-desktop, .show-mobile, .show-desktop (instruct display on breakpoints)
Mixins
@include shadow; @include transition(); // array with props @include icon-small; @include input-placeholder-color($black3) // custom inputs placeholders color @include selection($color, $bg) // custom text selection color @include drag-cursor; @include reset-button; // Remove relevant button styles @include absolute; // set position: absolute; and zeroes all axis
Vars
$container-width: 76rem !default; $mobile-breakpoint: 69rem !default; // ~780px $desktop-breakpoint: $mobile-breakpoint + 0.01; $mobile: "screen and (max-width: #{$mobile-breakpoint})" !default; $desktop: "screen and (min-width: #{$desktop-breakpoint})" !default; $radius: 6pt !default; $black8: rgba(29, 33, 41, 0.7) !default; $black5: rgba(29, 33, 41, .5) !default; $black3: rgba(29, 33, 41, .25) !default; $black1: rgba(29, 33, 41, .1) !default; $white7: rgba(255, 255, 255, .75) !default; $white5: rgba(255, 255, 255, .5) !default; $white3: rgba(255, 255, 255, .3) !default; $white1: rgba(255, 255, 255, .1) !default; $background: #e0e0e0 !default; $column: '[column], [layout=column], .layout-column, .column'; $row: '[row], [layout=row], .layout-row, .row'; $mobileColumn: '[mobile-column], [mobile-layout=column], .mobile-layout-column, .mobile-column'; $mobileRow: '[mobile-row], [mobile-layout=row], .mobile-layout-row, .mobile-row'; $base-font: 'Assistant', 'Segoe UI', 'Open Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default; $base-line-height: 1.4 !default; $base-font-size: 100% !default;