A simple, lightweight front-end framework. This project is heavily influenced by IBM's Carbon.
- This framework aims to be lighter than a big framework but larger than a micro framework.
- I needed a framework for myself that is highly opinionated so I can get work done faster.
This framework uses Normalize.css as a CSS reset (v8).
The Bootstrap grid is used (Bootstrap 5).
-
Copy the files from the
distdirectory. Or use jsDelivr:https://cdn.jsdelivr.net/gh/armandtvz/front@1.0.x/dist/front.min.css https://cdn.jsdelivr.net/gh/armandtvz/front@1.0.x/dist/front_head.min.js https://cdn.jsdelivr.net/gh/armandtvz/front@1.0.x/dist/front_body.min.js https://cdn.jsdelivr.net/gh/armandtvz/front@1.0.x/dist/front.min.js
-
Add
front.min.cssto the<head>tag before your other styles.<head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/armandtvz/front@1.0.x/dist/front.min.css"> <!-- ... --> </head>
-
Add
front_head.min.jsbefore the closing<head>tag if you need browser JS detection or if you need a constant that stores the detected websocket protocol that should be used (wss:whenhttps:andws:whenhttp:). The value is stored inws.scheme:console.log(ws.scheme);
<head> <!-- ... --> <script src="https://cdn.jsdelivr.net/gh/armandtvz/front@1.0.x/dist/front_head.min.js" charset="utf-8"></script> </head>
Also, for JS browser detection add the
no-jsclass to the<html>tag.no-jswill be replaced withjswhen Javascript is supported or when not disabled in the browser. Modernizr is used for this.<html class="no-js"> </html>
-
Add
front_body.min.jsafter the opening<body>tag for dark/light theme related scripts. This script checks theprefers-color-scheme: darkandprefers-color-scheme: lightmedia queries and sets the class on the<body>tag accordingly./* CSS class used for dark theme */ .dark-theme {}
<body> <script src="https://cdn.jsdelivr.net/gh/armandtvz/front@1.0.x/dist/front_body.min.js" charset="utf-8"></script> <!-- ... --> </body>
-
Add
front.min.jsbefore the closing<body>tag for all other scripts.<body> <script src="https://cdn.jsdelivr.net/gh/armandtvz/front@1.0.x/dist/front.min.js" charset="utf-8"></script> <!-- ... --> </body>
This framework does not support Internet Explorer or Opera Mini.
This project follows semantic versioning (SemVer).
Check the root of the repo for these files.