🎨
Theme
Refine the theme settings to establish a strong, consistent design system.
Variables
Define the visual qualities using color palette, typography, and scale in theme.css and watch the magic happen.
John Smith
Chief Executive Officer
MessageThis open-source project is under active development and not yet production-ready. Explore, contribute, and stay tuned for updates on Github.
Designlift CSS Docs
🚀
Designlift-off.
Your guide to simpler web design—in one page.
🛠️
Layout
Start with a semantic HTML structure to improve accessibility and SEO. Structure your content. Wrap related elements with parent elements.
Frames
Your HTML should provide some natural groups of content. Designate the most important groups with the frame class.
I’m the element
Direction
To have elements flow in a particular direction, use the vertical, horizontal, stack, split, or grid class.
Arrange
To arrange elements within an element, use the around, between, start, center, or end class.
Alignment
To set text alignment, use the left, center, or right class.
I am set left.
😎
Style
Now style your content to tell a story. Use composition and color to call attention to important elements and create a visual hierarchy.
Color
Use color to emphasize text or frames with accent, action, or highlight class.
I am a text using highlight.
I am a border using highlight.
I am a background using highlight.
Composition
Use color to emphasize text or frames with accent, action, or highlight class.
I’m an element
I’m a frame
Call to Action
Emphasize primary calls to action with primary or secondary class on button and link elements.
↕️
Scale
Set the size and scale of elements to reinforce the visual heirarchy.
Text
Set the size of text to say something big or small with xxs, xs, sm, class.
Text
Width
Set the element width using w-xxs, w-xs, w-sm, w-md, w-lg, w-xl, w-xxl, or w-xxxl class.
Height
Set an element height using h-xxs, h-xs, h-sm, h-md, h-lg, h-xl, h-xxl, or h-xxxl, class.
🧠
Refine
Take design to the next level.
Fill
Scale to the available screen size with fill class.
Grow
Occupy the available screen space between elements with grow class.
Scroll
Make a frame or element scroll by setting a size and the scroll class.
Overflow scroll is particularly valuable when designing responsive websites, as it allows for a consistent and intuitive user experience across various devices. Whether users are accessing the site on a desktop, tablet, or mobile device, the scroll functionality ensures that content remains accessible and easy to navigate. This adaptability contributes to a more inclusive design, catering to a broad audience with different screen sizes and resolutions. Furthermore, the careful implementation of overflow scroll aligns with modern design principles, promoting a sleek and user-centric interface that prioritizes readability and engagement.
Position
Position elements on the page with stick or fix, and add a position top, left, bottom, right class.
Overflow Scroll
Overflow scroll enhances web user experience by enabling seamless navigation through content that exceeds the available space within a designated container. This feature ensures that users can effortlessly explore lengthy information or images by introducing a scroll bar for convenient access. Its application is vital for maintaining clean and organized web layouts while accommodating diverse content lengths.
Sticky Position
This functionality enhances user interaction by keeping specific content, such as navigation menus or headers, consistently visible. Implementing sticky elements contributes to a more intuitive and accessible browsing experience, allowing users to access crucial information without interruption as they navigate through web content.