The lass-flexbox Reference Manual

Next: , Previous: , Up: (dir)   [Contents][Index]

The lass-flexbox Reference Manual

This is the lass-flexbox Reference Manual, version 0.1, generated automatically by Declt version 4.0 beta 2 "William Riker" on Wed Jun 15 04:55:25 2022 GMT+0.

Table of Contents


1 Introduction

lass-flexbox

Build Status

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.


Previous: , Up: Systems   [Contents][Index]

2.1 lass-flexbox

Flexbox for Lass.

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

Long Description

# lass-flexbox

[![Build Status](https://travis-ci.org/eudoxia0/lass-flexbox.svg?branch=master)](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 (system).

Source

lass-flexbox.asd.

Child Component

src (module).


3 Modules

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


Previous: , Up: Modules   [Contents][Index]

3.1 lass-flexbox/src

Source

lass-flexbox.asd.

Parent Component

lass-flexbox (system).

Child Component

lass-flexbox.lisp (file).


4 Files

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


Previous: , Up: Files   [Contents][Index]

4.1 Lisp


4.1.1 lass-flexbox/lass-flexbox.asd

Source

lass-flexbox.asd.

Parent Component

lass-flexbox (system).

ASDF Systems

lass-flexbox.


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

Source

lass-flexbox.asd.

Parent Component

src (module).

Packages

lass-flexbox.


5 Packages

Packages are listed by definition order.


Previous: , Up: Packages   [Contents][Index]

5.1 lass-flexbox

Lass Flexbox extension.

Source

lass-flexbox.lisp.

Use List

common-lisp.


Appendix A Indexes


Next: , Previous: , Up: Indexes   [Contents][Index]

A.1 Concepts


Next: , Previous: , Up: Indexes   [Contents][Index]

A.2 Functions


Next: , Previous: , Up: Indexes   [Contents][Index]

A.3 Variables