Beets Layout is a CSS and JavaScript library that gives you some good layout fundation for your HTML or PHP projects. The focus is on dashboards but you can easily modify it to make it work with standard websites or single page applications.
The point of this framework is not to be extremely customizable and every design choice at your fingertips but rather have a good and fully functioning starting point. To get the quickest and best experience, you should use Beets Layout together with Bootstrap, though it can also be used with your own custom css or frameworks like Tailwind CSS.
Also consider using Beets Layout with Beets CSS and Beets PHP
Beets Layout is developed using Boostrap 5.2.X.
For the latest version of Beets CSS, plese see the GitHub Releases page.
The files are located under the section Assets of the version you want.
- Compiled files:
beets-layout-v1.x.x-dist.zip - Source files:
beets-layout-v1.x.x-src.zip
- Download and unzip the compiled version of Beets Layout
beets-layout-v1.x.x-dist.zip. - Include
beets-layout.cssandbeets-layout.jsin the<head>of your projects index file.
<link rel="stylesheet" href="~/assets/css/beets-layout.css">
<script src="~/assets/js/beets-layout.js"></script>- Download and unzip the source files:
beets-layout-v1.x.x-src.zip. - Move the folders
scss/beets-layoutandjs/beets-layoutto your resource folder in your project (from where you compile your resources, i.e.~/resources/). You could@includethe filebeets-layout/beets-layout.scssin your mainapp.scssfile. - Compile
beets-layout.scssandbetts-layout.jsinto you public assets folder (i.e. ~/public/assets/).
Please visit the documentations site for instruction on how to customize and use Beets Layout.