Main CSS
Main CSS is a theme ready stylesheet wireframe designed for browser conformity and core web-vitals.
Developer Features
Main HTML with Main JS is the next killer app for the web, Main CSS 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 Main HTML 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
Main JS 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
Main JS 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
Main JS 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
Main JS 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
Main JS 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
Main JS slideshows allows you to adjust slide durations and transitions timing and effects for multiple containerised sections on all your webpages.