Core Concepts

Responsive

Craft an adaptive user interface with responsive utility variants.

Every utility class in Yogurt can be configured instantly with different breakpoints without leaving your HTML and without even using the @media in your CSS.

Inherit

Any of the breakpoints that prefixed with an utility, the utility value can be inherit from the smaller width to the maximum width. Which is mean, the smaller-breakpoint-first, the rest follows it. Take an example below.

<!-- Example -->
<y class="(xs)text-lg (2k)text-4xl">
  ...
</y>

We have text size is lg at sm breakpoint, and text size is 4xl at 2k breakpoint. The rest of the breakpoints that not defined are sm, md, lg and xl will inherit the xs's utility value, at the same time 4k, 8k will inherit the 2k's utility value.

Common Breakpoints

These are the default breakpoints covering for almost all common device and HAT module (embedded platform) resolutions.

/* Extra Small (xs) */
@media (min-width: 320px) { ... }

/* Small (sm) */
@media (min-width: 640px) { ... }

/* Medium (md) */
@media (min-width: 768px) { ... }

/* Large (lg) */
@media (min-width: 1024px) { ... }

/* Extra Large (xl) */
@media (min-width: 1280px) { ... }

Modern Breakpoints

Some breakpoints for new modern ultra-largescreen and ultra-widescreen sizes are not enabled by default. It will come in handy when designing a user interface specifically for uncommon bigger screens.

/* 3k */
@media (min-width: 2560px) { ... }

/* 4k (default) */
@media (min-width: 3840px) { ... }

/* 5k */
@media (min-width: 5120px) { ... }

/* 6k */
@media (min-width: 5760px) { ... }

/* 7k */
@media (min-width: 7000px) { ... }

/* 8k (default) v1.1.3 */
@media (min-width: 7680px) { ... }

To add breakpoint to an utility is by follow the Utility Class Design.

{(prefix)}{class}-{modifier}

To prefix the breakpoint name (e.g. xs, sm, md, lg and so on) before the {class} or class name wrapped with the (, ) parenthesis characters.

<!-- Examples -->

<!-- font size is xl on small screen, md on large screen -->
<y class="(sm)text-xl (lg)text-md">
  ...
</y>

<!-- background color is charcoal on small screen, red on large screen -->
<y class="(sm)bg-charcoal-100 (lg)bg-red-400">
  ...
</y>

Customizing

To completely customize breakpoints is in the _config.scss file,

// @file `_config.scss`
$screens:
  (xs, 320px),
  (sm, 640px),
  (md, 768px),
  (lg, 1024px),
  (xl, 1280px),
  (\32k, 1920px), // 2k
  (\33k, 2560px), // 3k (optional)
  (\34k, 3840px), // 4k
  (\35k, 5120px), // 5k (optional)
  (\36k, 5760px), // 6k (optional)
  (\37k, 7000px), // 7k (optional)
  (\38k, 7680px); // 8k

Create Custom Responsive

Responsive Without Variants

To create responsive to a utility is to adding the @include() directive following by the utility name (e.g. padding) and then the arguments into responsive/default/_default.scss module file.

This is a @include() directive look like in Yogurt:

@include utilityName(prefix[variants|false], pseudo[variants|false], class[true|false], negative[true|false]);

For example, to enable responsive for padding utility without adding the pseudo-class variants:

// @file: `src/_plugins.scss`
// @file `responsive/default/_default.scss`
@include padding($prefix-responsive, $pseudo-false, $class-false);

Note: Some utility has negative value and require to add negative[true|false] argument into @include() directive.

Responsive With Variants

Not all responsive utilities are having all sorts of pseudo-class variants enabled by default, this is to control the default package file size from getting larger. But, you can create your own responsive variants for pseudo-classes.

To create responsive with variants, there are separate files for each pseudo-classes.

// @file `responsive/pseudo/_hover.scss`
@include opacity($prefix-responsive-hover, $pseudo-hover, $class-false);

// @file `responsive/pseudo/_focus.scss`
@include opacity($prefix-responsive-focus, $pseudo-focus, $class-false);

// @file `responsive/pseudo/_active.scss`
@include opacity($prefix-responsive-active, $pseudo-active, $class-false);

// @file `responsive/pseudo/_visited.scss`
@include opacity($prefix-responsive-visited, $pseudo-visited, $class-false);

// @file `responsive/pseudo/_checked.scss`
@include opacity($prefix-responsive-checked, $pseudo-checked, $class-false);

// @file `responsive/pseudo/_disabled.scss`
@include opacity($prefix-responsive-disabled, $pseudo-disabled, $class-false);