This module provides a system for creating and serving unique classes in your web application.
The workflow for creating and serving styles typically involves creating and compiling SASS files in your
These files need to be written by hand and compiled by sass either manually or as part of the build process. They get hard to manage because they're separate from the content they're describing.
Inline allows you to define styles anywhere in your code!
Pass a CSS string to
inline\css(str) and it returns a uniquely-named class.
The class selector and attributes will be appended to the head of the layout after your Widgets render, so you can pass the class name around and use it anywhere!
luarocks install inline
Add to layout
- Require the module
inline = require "inline"
- Add this line to the head of your layout:
Use in Widgets
- Import the css function
css = (require "inline")\css
css(str)to make a new class
myClass = css " display: flex; flex-direction: column; justify-content: center; background-color: grey; "
- Apply the class to DOM elements
class MyWidget extends Widget content: => div class: myClass
This example renders a 100x100px red square.
import Widget from require "lapis.html" -- Import inline inline = require "inline" class InlineLayout extends Widget content: => html_5 -> head -> -- Just add this line! style inline\stylesheet! body -> @content_for "inner"
import Widget from require "lapis.html" -- Import inline inline = require "inline" -- Create a class outside of the Widget redSquareClass = inline\css "width: 100px; height: 100px; background-color: red" class RedSquare extends Widget content: => -- Use myClass inside the Widget div class: redSquareClass
lapis = require "lapis" class extends lapis.Application -- Be sure to use your custom layout layout: "inline_layout" "/": => -- Render a Widget render: "red_square"