Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
src
 
 
 
 

README.md

inline

This module provides a system for creating and serving unique classes in your web application.

Why Inline?

The workflow for creating and serving styles typically involves creating and compiling SASS files in your /static folder.

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!

Quick Start

Install

luarocks install inline

Add to layout

  1. Require the module
inline = require "inline"
  1. Add this line to the head of your layout:
style inline\stylesheet!

Use in Widgets

  1. Import the css function
css = (require "inline")\css
  1. Use css(str) to make a new class
myClass = css "
  display: flex; 
  flex-direction: column;
  justify-content: center;
  background-color: grey;
"
  1. Apply the class to DOM elements
class MyWidget extends Widget
  content: =>
    div class: myClass

Example

This example renders a 100x100px red square.

views/inline_layout.moon

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"

views/red_square.moon

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

app.moon

lapis = require "lapis"

class extends lapis.Application
  -- Be sure to use your custom layout
  layout: "inline_layout"

  "/": =>
    -- Render a Widget
    render: "red_square"

About

Inline CSS for Lapis

Resources

Packages

No packages published
You can’t perform that action at this time.