Next: Introduction, Previous: (dir), Up: (dir) [Contents][Index]
This is the lass-flexbox Reference Manual, version 0.1, generated automatically by Declt version 3.0 "Montgomery Scott" on Thu Mar 11 13:45:38 2021 GMT+0.
• Introduction | What lass-flexbox is all about | |
• Systems | The systems documentation | |
• Modules | The modules documentation | |
• Files | The files documentation | |
• Packages | The packages documentation | |
• Indexes | Concepts, functions, variables and data types |
Flexbox for Lass. Ported from this library by Brian Franco.
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?
Just load the library.
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;
}
Copyright (c) 2016 Fernando Borretti
Licensed under the MIT License.
Next: Modules, Previous: Introduction, Up: Top [Contents][Index]
The main system appears first, followed by any subsystem dependency.
• The lass-flexbox system |
Fernando Borretti <eudoxiahp@gmail.com>
Fernando Borretti <eudoxiahp@gmail.com>
(:git "git@github.com:eudoxia0/lass-flexbox.git")
MIT
Flexbox for Lass.
# 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
0.1
lass
lass-flexbox.asd (file)
src (module)
Modules are listed depth-first from the system components tree.
• The lass-flexbox/src module |
lass-flexbox (system)
src/
lass-flexbox.lisp (file)
Files are sorted by type and then listed depth-first from the systems components trees.
• Lisp files |
• The lass-flexbox.asd file | ||
• The lass-flexbox/src/lass-flexbox.lisp file |
Next: The lass-flexbox/src/lass-flexbox․lisp file, Previous: Lisp files, Up: Lisp files [Contents][Index]
lass-flexbox.asd
lass-flexbox (system)
Previous: The lass-flexbox․asd file, Up: Lisp files [Contents][Index]
src (module)
src/lass-flexbox.lisp
Packages are listed by definition order.
• The lass-flexbox package |
Lass Flexbox extension.
lass-flexbox.lisp (file)
common-lisp
• Concept index | ||
• Function index | ||
• Variable index | ||
• Data type index |
Next: Function index, Previous: Indexes, Up: Indexes [Contents][Index]
Jump to: | F L M |
---|
Jump to: | F L M |
---|
Next: Variable index, Previous: Concept index, Up: Indexes [Contents][Index]
Next: Data type index, Previous: Function index, Up: Indexes [Contents][Index]
Previous: Variable index, Up: Indexes [Contents][Index]
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 |
---|