The lass-flexbox Reference Manual

Table of Contents

The lass-flexbox Reference Manual

This is the lass-flexbox Reference Manual, version 0.1, generated automatically by Declt version 2.4 "Will Decker" on Wed Jun 20 12:04:33 2018 GMT+0.

1 Introduction

lass-flexbox

Flexbox for Lass. Ported from this library by Brian Franco.

Overview

Lass is a library for generating CSS from a Lisp-based DSL.

Flexbox is a layout mode that greatly simplifies the task of arranging things in CSS.

The problem is it's not portable without vendor prefixes because it's experimental.

"But that's fine", you say, foolishly. "I'll just add a couple of webkits and mozzes". Oh, gentle reader, what I would give to relive those days of innonence and wild abandon.

This is the portable version of display:flex and flex-direction: row:

display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-direction: normal;
-webkit-box-orient: horizontal;
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;

See what I mean?

Usage

Just load the library.

Example

This:

(.fun
  :flexbox
  :flex-direction "row"
  :justify-content "space-around"
  :align-items "center")

Gets compiled to this:

.fun {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-direction: normal;
    -webkit-box-orient: horizontal;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-pack: distribute;
    -webkit-justify-content: space-around;
    -moz-justify-content: space-around;
    justify-content: space-around;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center;
}

License

Copyright (c) 2016 Fernando Borretti

Licensed under the MIT License.

2 Systems

The main system appears first, followed by any subsystem dependency.

2.1 lass-flexbox

Maintainer

Fernando Borretti <eudoxiahp@gmail.com>

Author

Fernando Borretti <eudoxiahp@gmail.com>

Home Page

https://github.com/eudoxia0/lass-flexbox

Source Control

(:git "git@github.com:eudoxia0/lass-flexbox.git")

Bug Tracker

https://github.com/eudoxia0/lass-flexbox/issues

License

MIT

Description

Flexbox for Lass.

Long Description

# lass-flexbox

[](https://travis-ci.org/eudoxia0/lass-flexbox)

Flexbox for [Lass][lass]. Ported from [this library][lib] by Brian Franco.

# Overview

[Lass][lass] is a library for generating CSS from a Lisp-based DSL.

[Flexbox][flex] is a layout mode that [greatly simplifies][solved] the task of
arranging things in CSS.

The problem is it’s not portable without vendor prefixes
[because it’s experimental][so].

"But that’s fine", you say, foolishly. "I’ll just add a couple of webkits and
mozzes". Oh, gentle reader, what I would give to relive those days of innonence
and wild abandon.

This is the portable version of ‘display:flex‘ and ‘flex-direction: row‘:

“‘css
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-direction: normal;
-webkit-box-orient: horizontal;
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
“‘

See what I mean?

# Usage

Just load the library.

# Example

This:

“‘lisp
(.fun
:flexbox
:flex-direction "row"
:justify-content "space-around"
:align-items "center")
“‘

Gets compiled to this:

“‘css
.fun {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-direction: normal;
-webkit-box-orient: horizontal;
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-pack: distribute;
-webkit-justify-content: space-around;
-moz-justify-content: space-around;
justify-content: space-around;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
align-items: center;
}
“‘

# License

Copyright (c) 2016 Fernando Borretti

Licensed under the MIT License.

[lass]: https://github.com/Shinmera/LASS
[lib]: https://github.com/mastastealth/sass-flex-mixin
[flex]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes
[solved]: https://philipwalton.github.io/solved-by-flexbox/
[so]: http://stackoverflow.com/questions/8131846/why-do-browsers-create-vendor-prefixes-for-css-properties/8131879#8131879

Version

0.1

Dependency

lass

Source

lass-flexbox.asd (file)

Component

src (module)

3 Modules

Modules are listed depth-first from the system components tree.

3.1 lass-flexbox/src

Parent

lass-flexbox (system)

Location

src/

Component

lass-flexbox.lisp (file)

4 Files

Files are sorted by type and then listed depth-first from the systems components trees.

4.1 Lisp

4.1.1 lass-flexbox.asd

Location

lass-flexbox.asd

Systems

lass-flexbox (system)

4.1.2 lass-flexbox/src/lass-flexbox.lisp

Parent

src (module)

Location

src/lass-flexbox.lisp

Packages

lass-flexbox

5 Packages

Packages are listed by definition order.

5.1 lass-flexbox

Lass Flexbox extension.

Source

lass-flexbox.lisp (file)

Use List

common-lisp

Appendix A Indexes

A.1 Concepts

A.2 Functions

A.3 Variables

A.4 Data types