/**
* Init s. This will import a reset css and print the
* needed variables used across the toolkit classes.
*/
@s.init ($variant: 'dark');
/**
* Generate some utility classes like "s-tc:accent, s-mb:30", etc...
* that depends on your theme configuration.
* You can as well import only the classes you need.
* See the API section for more details...
*/
@s.classes();
@s.flex.classes(); /* import only the flex helper classes */
/**
* Generate media scoped classes to use like "@mobile s-pbe:100", etc...
* that depends on your theme configuration
*/
@s.media.classes ('mobile,tablet,wide') {
@s.margin.classes();
@s.padding.classes();
}
/*
* ____
* / ____|Coffeekraken __ _ _ __
* \___ \| | | |/ _` |/ _` | `__|
* ___) | |_| | (_| | (_| | |
* |____/ \__,_|\__, |\__,_|_|
* |___/
*/
/* importing sugar toolkit */
@s.import ('./sugar.css');
/* importing other css */
@s.import ('../views/**/*.css');
@s.import ('./generic/**/*.css');
/* make use of the sugar power */
body {
background: s.color(main, background);
}
/*
* |------|------|------|
* | 1 | 2 | 4 |
* |-------------| |
* | 3 3 | |
* |-------------|------|
*/
.my-layout {
@s.layout("1 2 4 _ 3 3 4");
/* or */
@s.layout("
1 2 4
3 3 4
");
}
/**
* The @s.media mixin allows you to apply media queries with ease.
* Available breakpoints are "mobile", "tablet", "desktop" and "wide"
* but can be cusotmize through the .sugar/themeMedia.config.ts file.
* By default, the default action is "<=" (desktop first) but you can override
* this as well in the same file.
*/
.my-element {
background: s.color(complementary);
/* apply another color for <= mobile */
@s.media mobile {
background: s.color(main);
}
/* apply another color only on wide */
@s.media >=wide {
background: s.color(accent);
}
}
.my-component {
background: s.color(main, surface);
border: 1px solid s.color(main, border);
padding: s.padding(30);
@s.border.radius();
@s.depth(100);
&:hover {
border-color: s.color(accent, --alpha 0.3);
}
}
/**
* Colors in a design toolkit is a central part.
* Sugar let you define your own colors through
* the .sugar/themeColor.config.ts
* and using them with the convinient s.color function.
* Default colors available are: "main", "accent",
* "complementary", "success", "warning",
* "error", "info" and "current" (more on this one) bellow.
*/
.my-element {
background: s.color(main);
}
/**
* You can use modifiers like "lighten", "darken", "saturate", "desaturate",
* "spin" and "alpha" to tweak your color
*/
.my-element {
color: s.color(main, --alpha 0.3 --lighten 10);
}
/**
* For more convinience, some modifier "presets" are available like "text",
* "placeholder", "foreground", "background", "surface" and "border".
* These presets are defined and can be customized in the
* .sugar/themeColorSchema(Light|Dark).config.ts
*/
.my-element {
color: s.color(accent, text);
}
/**
* The "current" color act like the "currentColor" css native value, but
* difference that it will have the value of the color defined with the
* @s.color mixin.
* It uses variables under the hood so the value will be propagated down
* just like any any other variables.
*/
.my-element {
@s.color(accent);
color: s.color(current);
}
/**
* Define some icons to be used with classes like "s-icon:github", etc...
* Can be fontawesome icons using the "fa", "fab", "fas" and "far" protocol
* Or can be some filesystem svg using the "fs" protocol (accept glob)
* With glob: fs:src/icons/*
* Without glob: fs:src/icon/my-cool-icon.svg:my-icon
*/
@s.icon.classes (
fab:github
fab:discord
fab:twitter
fab:facebook
fab:patreon
fab:instagram
fs:src/icons/*
fs:src/icons/kraken.svg
);
Hello world
sunt cillum irure...
