Next: Introduction, Previous: (dir), 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
Next: Systems, Previous: The lass-flexbox Reference Manual, Up: The lass-flexbox Reference Manual [Contents][Index]
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.
Next: Modules, Previous: Introduction, Up: The lass-flexbox Reference Manual [Contents][Index]
2 Systems
The main system appears first, followed by any subsystem dependency.
2.1 lass-flexbox
Flexbox for Lass.
- Maintainer
Fernando Borretti <eudoxiahp@gmail.com>
- Author
Fernando Borretti <eudoxiahp@gmail.com>
- Home Page
- Source Control
(GIT git@github.com:eudoxia0/lass-flexbox.git)
- Bug Tracker
- License
MIT
- 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 (system).
- Source
- Child Component
src (module).
Next: Files, Previous: Systems, Up: The lass-flexbox Reference Manual [Contents][Index]
3 Modules
Modules are listed depth-first from the system components tree.
3.1 lass-flexbox/src
- Source
- Parent Component
lass-flexbox (system).
- Child Component
lass-flexbox.lisp (file).
Next: Packages, Previous: Modules, Up: The lass-flexbox Reference Manual [Contents][Index]
4 Files
Files are sorted by type and then listed depth-first from the systems components trees.
4.1 Lisp
Next: lass-flexbox/src/lass-flexbox.lisp, Previous: Lisp, Up: Lisp [Contents][Index]
4.1.1 lass-flexbox/lass-flexbox.asd
- Source
- Parent Component
lass-flexbox (system).
- ASDF Systems
Previous: lass-flexbox/lass-flexbox.asd, Up: Lisp [Contents][Index]
4.1.2 lass-flexbox/src/lass-flexbox.lisp
- Source
- Parent Component
src (module).
- Packages
Next: Indexes, Previous: Files, Up: The lass-flexbox Reference Manual [Contents][Index]
5 Packages
Packages are listed by definition order.
5.1 lass-flexbox
Lass Flexbox extension.
- Source
- Use List
common-lisp.
Previous: Packages, Up: The lass-flexbox Reference Manual [Contents][Index]
Appendix A Indexes
A.4 Data types
| Jump to: | F L M P S |
|---|
| Jump to: | F L M P S |
|---|