The lass-flexbox Reference Manual

Table of Contents

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 2.3 "Robert April" on Wed Mar 14 04:07:28 2018 GMT+0.


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

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.


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

2 Systems

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


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

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

[![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

Source

lass-flexbox.asd (file)

Component

src (module)


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

3 Modules

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


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

3.1 lass-flexbox/src

Parent

lass-flexbox (system)

Location

src/

Component

lass-flexbox.lisp (file)


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

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


Next: , Previous: , Up: Lisp files   [Contents][Index]

4.1.1 lass-flexbox.asd

Location

lass-flexbox.asd

Systems

lass-flexbox (system)


Previous: , Up: Lisp files   [Contents][Index]

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

Parent

src (module)

Location

src/lass-flexbox.lisp

Packages

lass-flexbox


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

5 Packages

Packages are listed by definition order.


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

5.1 lass-flexbox

Lass Flexbox extension.

Source

lass-flexbox.lisp (file)

Use List

common-lisp


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

Appendix A Indexes


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

A.1 Concepts

Jump to:   F   L   M  
Index Entry  Section

F
File, Lisp, lass-flexbox.asd: The lass-flexbox<dot>asd file
File, Lisp, lass-flexbox/src/lass-flexbox.lisp: The lass-flexbox/src/lass-flexbox<dot>lisp file

L
lass-flexbox.asd: The lass-flexbox<dot>asd file
lass-flexbox/src: The lass-flexbox/src module
lass-flexbox/src/lass-flexbox.lisp: The lass-flexbox/src/lass-flexbox<dot>lisp file
Lisp File, lass-flexbox.asd: The lass-flexbox<dot>asd file
Lisp File, lass-flexbox/src/lass-flexbox.lisp: The lass-flexbox/src/lass-flexbox<dot>lisp file

M
Module, lass-flexbox/src: The lass-flexbox/src module

Jump to:   F   L   M  

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

A.2 Functions


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

A.3 Variables


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

A.4 Data types

Jump to:   L   P   S  
Index Entry  Section

L
lass-flexbox: The lass-flexbox system
lass-flexbox: The lass-flexbox package

P
Package, lass-flexbox: The lass-flexbox package

S
System, lass-flexbox: The lass-flexbox system

Jump to:   L   P   S