Container

A container is like the trusty sidekick of web development, providing a reliable and flexible environment for your web components to thrive. It's the digital equivalent of a trusty toolbox, offering a range of features and functionalities that make it easier to manage and organize your web components. With a container, you can create a more efficient and organized website, without having to worry about the nitty-gritty details of web development.

Examples

  • Container 1
<div class="container xxl"
     style="background: oklch(0.5 0.07 142.54); color: white; padding: 10px;border-radius: .5rem;text-align: center;">
  XXL
</div>
@use '~/styles/app.scss' as app;

// โ†“ Container
@use '@nulllogic/scssleon/scss/components/container' with (
  $config: app.$config,
  $theme: app.$theme
);
  • Container 2
<div class="container sm"
     style="background: oklch(0.5 0.07 142.54); color: white; padding: 10px;border-radius: .5rem;text-align: center;">
  SM
</div>
@use '~/styles/app.scss' as app;

// โ†“ Container
@use "@nulllogic/scssleon/scss/components/container" with (
  $config: app.$config,
  $theme: app.$theme
);