MainCSS
MainCSS is a theme ready stylesheet wireframe designed for browser conformity and core web-vitals.
Developer Features
MainHTML with MainJS is the next killer app for the web, MainCSS comes in, this is a community maintained website section where community themes can be shared and linked too from all over the web. The only rule: no solid images, everything must be CSS and the only embedded content allowed can be in scalar vector graphics (SVG.) This keeps the themes super lightweight, human readable and easy to modify and implement on any MainHTML or Main.JS website. If you're a budding CSS creator and would like to get your name out there, get the street cred and score a few links to your website, read up on our submissions page for more...
The complete package
Main has a HTML element (also known as the <main> tag) and a main ECMAscript library (also known as main.js library,) including head snippet and CSS wireframe.
HTML-less mode
MainJS optional head snippet features a HTMLless mode allowing you to load the library in an environment with less dependencies on themes and CSS wireframes.
Reusable CSS functions
MainJS feature reusable CSS functions using cssRules for dynamically assigned stylesheets deduplication and page-level controls for perfect page rendering and user experience.
Javascript controlled CSS
MainJS manages your font provider (like Google fonts) and handles seamless font resource loading and glyph updating and rendering, and font family rules via JS controlled CSS rules.
Powerful CSS animations
MainJS manages your slideshows automatically using powerful CSS animations and timing controls, enabling almost unlimited number of carousels, slides and galleries to mix images and content interchangeably on the same page.
Reduce layout shifting and more
MainJS includes easy CSS variables for theme design and consistency; scroll travel classes, page heading (top) and gutter (bottom) persistence and scroll bar dimensions, collectively this reduce layout shifting.
Native slideshows
MainJS slideshows allows you to adjust slide durations and transitions timing and effects for multiple containerised sections on all your webpages.