Summer sale discount off 50%! Shop Now
My Cart 0

Mini Cart

A little bit about the claue

  • Claue 2.0 is built based on Front-End Page Builder & on the magento version 262333396368616e67653bMagento ver. 2.4.1262333396368616e67653b
  • Claue 2.0 uses the font 262333396368616e67653bPoppins262333396368616e67653b and mainly uses 2 icon fonts: Pe-icon-7-stroke and Awesome version 4.7.0.
  • The main colors of the theme are: Color primary: #56cfe126636f6d6d616368616e67653b Color Typography: #878787. You can setting config color primary 26636f6d6d616368616e67653b color typography in admin: MGS-2667746368616e67653b MGS Theme [ Color Setting ] -2667746368616e67653b Main Color

Layout

Breakpoints

Breakpoints are customizable widths that determine how your responsive layout behaves across device or viewport sizes in claue theme.

Available breakpoints
Breakpoint Class infix Dimensions
X-Small mb <576px
Small sm ≥576px
Medium tb ≥768px
Large lg ≥992px
Extra large des ≥1200px

Containers

Containers are the most basic layout element and are required when using our default grid system. Containers are used to contain, pad, and (sometimes) center the content within them. While containers can be nested, most layouts do not require a nested contain


Default container

Our default .frame class is a responsive, fixed-width container, meaning its max-width changes at each breakpoint.

With Claue theme: .frame , which sets a max-width at each responsive breakpoint. The default max-width value is: 1240px. You can change max-width of .frame in admin : MGS-> page Builder Setting -> General -> Width of section container

Grid system

One of three columns
One of three columns
One of three columns

  <div class="line">
    <div class="col-4">
      One of three columns
    </div>
    <div class="col-4">
      One of three columns
    </div>
    <div class="col-4">
      One of three columns
    </div>
  </div>
Grid options

 

Grid system can adapt across all 5 default breakpoints, and any breakpoints you customize. The 5 default grid tiers are as follow:

xs
<576px 		sm
≥576px 		md
≥768px 		lg
≥992px 		xl
≥1200px
Container max-width None (auto) 540px 750px 970px 1170px
Class prefix .col-mb or .col .col-sm- .col-tb- .col-lg- .col-des-
# of columns 12
Gutter width 30px (15px on left and right)
Row columns

 

Use the responsive .row-* classes to quickly set the number of columns that best render your content and layout. Whereas normal .col-* classes apply to the individual columns (e.g., .col-md-4), the row columns classes are set on the parent .row as a shortcut. With .row-cols-auto you can give the columns their natural width.

One of three columns
One of three columns
One of three columns

  <div class="line row-3">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>

Flex Box

Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex implementations, custom CSS may be necessary.

Enable flex behaviors

Apply display utilities to create a flexbox container and transform direct children elements into flex items. Flex containers and items are able to be modified further with additional flex properties.

Flex item 1
Flex item 2
Flex item 3

  <div class="d-flex">
    <div class="p1">
      Flex item 1
    </div>
    <div class="p1">
      Flex item 2
    </div>
    <div class="p1">
      Flex item 3
    </div>
  </div>
Justify content

Use justify-content utilities on flexbox containers to change the alignment of flex items on the main axis (the x-axis to start, y-axis if flex-direction: column). Choose from start (browser default), end, center, between, around, or evenly.

Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>
<div class="d-flex justify-content-evenly">...</div>
Align items

Use align-items utilities on flexbox containers to change the alignment of flex items on the cross axis (the y-axis to start, x-axis if flex-direction: column). Choose from start, end, center, baseline, or stretch (browser default).

Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d-flex align-items-start">...</div>
<div class="d-flex align-items-end">...</div>
<div class="d-flex align-items-center">...</div>
<div class="d-flex align-items-baseline">...</div>
<div class="d-flex align-items-stretch">...</div>
Wrap

Change how flex items wrap in a flex container. Choose from no wrapping at all (the browser default) with .flex-nowrap, wrapping with .flex-wrap..

Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d-flex flex-nowrap">
  ...
</div>
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d-flex flex-wrap">
  ...
</div>