Skip to content

clsls/framework

Folders and files

NameName
Last commit message
Last commit date

Latest commit

f51ae8d Β· Nov 5, 2024

History

24 Commits
Aug 23, 2022
Nov 5, 2024
Dec 29, 2023
Nov 5, 2024
Nov 5, 2024

Repository files navigation

πŸ«™ clsls

classless framework for fast prototyping

  • 0 classes
  • 0 dependencies
  • use plain HTML tags to get pleasant look
  • combine tags to get more complex components
  • customize colors and decorations easily
  • auto enabling dark || light theme based on system preferences

Demos

  • Main with docs by inspecting source code πŸ—Ώ

Install

For last version:

<link href="https://clsls.github.io/framework/src/index.css" rel="stylesheet" />

Customize

To create your own theme just rewrite following variables in your CSS file:

{
    /* colors */
    --clsls-color-main: ;
    --clsls-color-opposite: ;
    --clsls-color-background: ;
    --clsls-color-text: ;
    --clsls-color-link-hover: ;
    --clsls-color-button: ;
    --clsls-color-border: ;
    --clsls-color-code: ;
    /* fonts */
    --clsls-font-heading: ;
    --clsls-font-text: ;
    /* other */
    --clsls-line-thickness: ;
    --clsls-radius: ;
    --clsls-zoom-main: ;
    --clsls-icon-chevron: ;
}

Roadmaps

v2

  • code block
  • seprate font for headline
  • inline code
  • card component
  • dotted link
  • sizes for buttons
  • more demos
  • checkboxes
  • npm install support
  • better docs page with code to copy

v3

  • match variable name with CSS properties and HTML tags
    • --clsls-color-link-hover β†’ --clsls-color-a-hover
    • --clsls-radius β†’ --clsls-border-radius
    • --clsls-line-thickness β†’ --clsls-border-width
    • --clsls-color-code β†’ --clsls-color-code-background
  • deletion of --clsls-zoom-main?