LayoutCSS Docs Showcase
  • Showcase

    • components

  • Area
  • Box
  • Center
  • Extender
  • Grid
  • Icon
  • Ledge
  • Outsider
  • Rack
  • Sidebar
  • Slider
  • Stack
  • Switcher

    • Utilities

  • align-self
  • bg-img
  • flex
  • font-size
  • h
  • hide
  • line-height
  • p-child
  • p-recursive
  • p
  • ratio
  • relative
  • w
  • z-index

    • Get started

    What is LayoutCSS ?

    LayoutCSS is a CSS framework that manages the entire layout of your page (the skeleton) while allowing you to create your styles as desired. In a typical CSS file, approximately 90% is layout-related (such as flexbox, grids, media queries), and only 10% pertains to “true style” (like color, shadow, etc.).

    This approach offers significant time savings in creating and maintaining websites, drastically reduces code complexity, and provides complete creative freedom.

    Using LayoutCSS is deciding to spend time in the aspect that really matters ... your creativity!

    LayoutCSS enables you to create layouts directly from HTML using custom elements called components. These components can be customized to your needs with various attributes specific to each component.

    How to use it ?

    After installing the framework, you will open your folder and start LayoutCSS from the terminal with:

    layoutcss

    Once you have started layoutcss, you will see that two files have been created:

    First, we have the layout.toml:

    [input] directory = "." extensions = [".html"] [style] harmonic_ratio = 1.618 min_screen = "600px" max_screen = "1200px" base_value = "16.5px" resizing_ratio = 1.1 [output] file = "./layout.css"

    This is the configuration file. To get started, you won't need to modify anything in this file.

    The second file will be layout.css.

    You will now create a html file and link it to the layout.css file.

    Once that is done, we can start having fun with LayoutCSS !

    Here is a little bit of code that you can add to your HTML file:

    Since layoutCSS only lets you create the layout of your page, you will need to add a separated CSS file to create your style. For the previous example you can add this to your new CSS file and see the result!

    Now try and change some of the values, see how each component reacts.

    The next step now, is learning how each component works, and how to use them together in order to create every layout you need!