All you need is 1 CSS file, lotus.css to be included in your webpage.
Link this CSS in your HTML:
<link rel="stylesheet" href="https://unpkg.com/lotus-css@latest">You can get the latest release from GitHub
Download Source Download Compiled
Install it from npm or yarn
npm install lotus-cssLOTUS is very simple to use. It doesn't require learning a lot of class names like other frameworks. It applies a few basic styles to the HTML following the HTML Semantics.
Here is a demo of the basic HTML elements.
LOTUS comes with a basic set of CSS variables:
:root {
--typography-font: "Lato", sans-serif;
--typography-code: "Inconsolata", monospace;
--typography-size: 1.6em;
--typography-line-height: 1.4;
--grid-max-width: 120rem;
--grid-gutter-size: 2rem;
--color-primary: #6750A4;
--color-on-primary: #FFFFFF;
--color-primary-container: #EADDFF;
--color-on-primary-container: #21005D;
--color-secondary: #625B71;
--color-on-secondary: #FFFFFF;
--color-secondary-container: #E8DEF8;
--color-on-secondary-container: #1D192B;
--color-tertiary: #7D5260;
--color-on-tertiary: #FFFFFF;
--color-tertiary-container: #FFD8E4;
--color-on-tertiary-container: #31111D;
--color-error: #B3261E;
--color-on-error: #FFFFFF;
--color-error-container: #F9DEDC;
--color-on-error-container: #410E0B;
--color-outline: #79747E;
--color-background: #FFFBFE;
--color-on-background: #1C1B1F;
--color-surface: #FFFBFE;
--color-on-surface: #1C1B1F;
--color-surface-variant: #E7E0EC;
--color-on-surface-variant: #49454F;
--color-inverse-surface: #313033;
--color-inverse-on-surface: #F4EFF4;
--color-inverse-primary: #D0BCFF;
--color-shadow: #000000;
--color-surface-tint: #6750A4;
--color-outline-variant: #CAC4D0;
--color-scrim: #000000;
}To override the variables, just add them to your :root selector after importing lotus.css
@import url(lotus.css)
:root {
--color-primary: #6750A4;
--color-on-primary: #FFFFFF;
--grid-maxWidth: 108rem;
}
/* Your other styles... */Addtionally, you can add dark mode to your site, to support devices that prefer dark mode.
<style>
.dark {
--color-primary: #D0BCFF;
--color-on-primary: #381E72;
--color-primary-container: #4F378B;
--color-on-primary-container: #EADDFF;
--color-secondary: #CCC2DC;
--color-on-secondary: #332D41;
--color-secondary-container: #4A4458;
--color-on-secondary-container: #E8DEF8;
--color-tertiary: #EFB8C8;
--color-on-tertiary: #492532;
--color-tertiary-container: #633B48;
--color-on-tertiary-container: #FFD8E4;
--color-error: #F2B8B5;
--color-on-error: #601410;
--color-error-container: #8C1D18;
--color-on-error-container: #F9DEDC;
--color-outline: #938F99;
--color-background: #1C1B1F;
--color-on-background: #E6E1E5;
--color-surface: #1C1B1F;
--color-on-surface: #E6E1E5;
--color-surface-variant: #49454F;
--color-on-surface-variant: #CAC4D0;
--color-inverse-surface: #E6E1E5;
--color-inverse-on-surface: #313033;
--color-inverse-primary: #6750A4;
--color-shadow: #000000;
--color-surface-tint: #D0BCFF;
--color-outline-variant: #49454F;
--color-scrim: #000000;
}
</style>
<script>
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.body.classList.add('dark');
}
</script>[WIP] Coming soon I'll add the components here, but you can see the components and elements demo here.
While you're free to use any icon library you like, I'd just like to leave a link to Google Icons here. It's the fastest way to add icons to your website.
While you're free to use any font you like, I'd just like to leave a link to Google Fonts here. It's the fastest way to add fonts to your website.