1.0.0 • Published 3 years ago

@teambit/base-ui.layout.align v1.0.0

Weekly downloads
-
License
SEE LICENSE IN LI...
Repository
-
Last release
3 years ago

Align

A set of CSS components to align elements.

text

Same as css property text-align.

import { text } from '@bit/bit.base-ui.layout.align';
function A() {
	return <div className={text.center}>a</div>;
}

Breakpoints

Align elements according to html breakpoints.

import { text } from '@bit/bit.base-ui.layout.align';
function B() {
	return <div className={classNames(text.left, text.md.center text.l.left)}>
			b
	</div>
}

Margin center

Same as margin-left: auto; margin-right: auto.

import { marginCenter } from '@bit/bit.base-ui.layout.align';

function C() {
	return <div className={classNames(marginCenter)}>this is centered</div>;
}

Breakpoints:

  • (default) (all)
  • xs 360px
  • sm 480px
  • md 768px
  • l 920px
  • lg 1080px
  • xl 1440px
@infinitebrahmanuniverse/nolb-_teamb@everything-registry/sub-chunk-899@zalastax/nolb-_teamb@teambit/evangelist.pages.enterprise-offering@teambit/evangelist.sections.build-together@teambit/evangelist.sections.carousel-section@teambit/evangelist.sections.community@teambit/evangelist.sections.component-advantages@teambit/evangelist.sections.cta@teambit/evangelist.sections.develop-components@teambit/evangelist.sections.discover-components@teambit/evangelist.sections.enterprise-offering.advantage-cards@teambit/evangelist.sections.enterprise-offering.component-analytics@teambit/evangelist.sections.enterprise-offering.eco-system@teambit/evangelist.sections.enterprise-offering.enterprise-bullets@teambit/evangelist.sections.enterprise-offering.experts-support@teambit/evangelist.sections.enterprise-offering.hero@teambit/evangelist.sections.enterprise-offering.powering-enterprise@teambit/evangelist.sections.enterprise-offering.reliability@teambit/evangelist.sections.enterprise-offering.sales-cta@teambit/evangelist.sections.enterprise-section@teambit/evangelist.sections.hero@teambit/evangelist.sections.independent-teams@teambit/evangelist.sections.reuse-components@teambit/evangelist.sections.support-page.global-enterprise@teambit/evangelist.sections.support-page.hero@teambit/evangelist.sections.support-page.support-channels@teambit/evangelist.sections.support-page.support-cta@teambit/evangelist.sections.support-page.support-developers@teambit/evangelist.sections.support-page.support-packages@teambit/evangelist.sections.talk-to-experts@watheia/waweb.sections.build-together@watheia/waweb.sections.carousel-section@watheia/waweb.sections.community@watheia/waweb.sections.component-advantages@watheia/waweb.sections.cta@watheia/waweb.sections.develop-components@watheia/waweb.sections.discover-components@watheia/waweb.sections.enterprise-section@watheia/waweb.sections.hero@watheia/waweb.sections.independent-teams@watheia/waweb.sections.reuse-components@watheia/waweb.sections.talk-to-experts
1.0.0

3 years ago

0.6.10

3 years ago

0.6.9

3 years ago

0.6.8

3 years ago

0.6.7

3 years ago

0.6.6

3 years ago

0.6.5

3 years ago

0.6.3

3 years ago

0.6.2

3 years ago

0.6.0

3 years ago

0.5.9

3 years ago

0.5.8

3 years ago

0.5.7

3 years ago

0.5.5

3 years ago

0.5.4

3 years ago

0.5.3

3 years ago

0.5.2

4 years ago

0.5.0

4 years ago

0.5.1

4 years ago

0.4.3

4 years ago

0.4.2

4 years ago

0.4.1

4 years ago

0.4.0

4 years ago

0.2.10

4 years ago

0.2.9

4 years ago

0.1.5

4 years ago

0.1.1

4 years ago

0.0.1

4 years ago

0.0.8

4 years ago

0.0.7

4 years ago

0.0.4

4 years ago