precss.ewwii is an ewwii plugin for predefined css components that work nicely with your styles.
It can:
Work nicely with your styles
Make styling components easier and faster
Precss requires a slight setup before it gets working. But its to match your color scheme and unlock the full features of the plugin.
Want to skip to the classes directly? Here you go: /classes
Before you get started with using precss, make sure to store your color scheme in variables like so:
/*
You should use the exact name
otherwise precss wont work.
*/
:root {
--bg-surface: #1e1e2e;
--bg-card: #252538;
--border-color: rgba(255, 255, 255, 0.08);
--fg-bright: #cdd6f4;
--fg-default: #a6adc8;
--fg-muted: #bac2de;
--accent: #cba6f7;
--critical: #f38ba8;
--success: #a6e3a1;
}
This is what enables precss to access your colorscheme and work according to it.
Installation using eiipm :
# if you prefer prebuilt
eiipm add "byson94/precss.ewwii" --prebuilt --ref <version>
# if you prefer building yourself
eiipm add "byson94/precss.ewwii" # Up to date with "main" branch
eiipm add "byson94/precss.ewwii" --ref <version> # Locked to a specific version
Or download from GitHub Releases manually. When downloading manually, make sure to put it in plugins/ directory for ewwii to load it.
Class Behavior
rounded-smSlightly rounded corners (4px) roundedNormal rounded corners (10px) rounded-lgHighly rounded corners for large boxes (16px) fully-roundedTurns elements into circles or pill shapes border-thinAdds a thin 1px outline border border-thickAdds a thick 2px outline border
Class Behavior
surface-panelMain background panel for widgets and layouts surface-cardInner card background to group items inside a panel floating-overlayFloating box with shadow for menus and notifications
Class Behavior
btnStandard clickable button style btn-primaryColored button used for main actions btn-destructiveRed button used for delete or exit actions list-row-interactiveClickable menu row that lights up when hovered or pressed
Class Behavior
text-headerLarge, bright text used for titles text-mutedSmall, faded text used for secondary info badgeSmall tag or label with a dark background pill shape badge-successGreen status label indicating success or active states
Class Behavior
progress-bar-fillThe filled portion of a progress tracker or battery level bar slider-troughThe empty background track of volume/brightness sliders
Class Behavior
switch-track-activeBackground track of a toggle switch when flipped to ON list-row-selectedHighlighted background state for currently active menu choices or active workspaces
Class Behavior
separator-hA thin horizontal divider line to break up content inside modules separator-vA thin vertical divider line to separate side-by-side items
Class Behavior
card-headerTop border highlight frame tailored for system graphs or hardware monitors input-fieldStyling for custom user input boxes or terminal command runners
Class Behavior
alert-bannerHigh-visibility danger strip for critically low battery or lost internet text-warningYellow-tinted typography scale for low urgency battery or update alerts
Class Behavior
ease-in-outEasing transition that starts slow, accelerates, then slows down at the end ease-outEasing transition that snaps instantly and slows to a smooth halt ease-inEasing transition that starts slow and hits full speed dramatically at the finish fade-inSmoothly fades an invisible element to completely visible fade-outSmoothly fades an element to completely translucent scale-inPops a widget up into view by blowing it up from a smaller size scale scale-outShrinks a widget down until it collapses out of the presentation layer slide-upGlides a hidden bottom module upwards into its active resting placement slide-downGlides an active top module downwards into its active resting placement pulse-glowContinuous breathing light effect tailored for indicators or low battery warnings duration-fastFast 150ms playback duration-normalStandard 300ms playback duration-slowSlow 500ms playback delay-noneExecutes the animation immediately delay-shortPostpones the animation start by 100ms delay-longPostpones the animation start by 300ms loop-infiniteForces the keyframe loop to repeat forever loop-onceRestricts execution to run exactly once through the timeline sequence freeze-frameDirects GTK to hold the visual elements on the very last keyframe when complete reset-frameInstantly snaps elements back to their initial un-animated look once finished
All the keyframes from the plugin that enable /classes/animation-utilities . Although keyframes cant be used directly as classes, you can use them inside your own .(s)css files if you opt for manual animation instead of /classes/animation-utilities .
fadeInAnimationfadeOutAnimationscaleInAnimationscaleOutAnimationslideUpAnimationslideDownAnimationpulseGlowAnimation