1.0.6 • Published 2 months ago
bdd-flex v1.0.6
Getting started
run
npm install bdd-flex
to use bdd-flex import
"node_modules/bdd-flex/src/bdd.scss"
in angular.json file in sectionarchitext -> build -> styles
Or import scss file in yout global
style.scss
like this@import 'bdd-flex/src/bdd-flex.scss';
Documentation
FLEX
- .bdd-spacer - is used to create flexible empty space within a flex container. It's typically used to distribute remaining space among flex items.
.bdd-flex
:- Specifies that the element should be displayed as a flex container. This class sets the CSS property
display: flex;
on the element.
- Specifies that the element should be displayed as a flex container. This class sets the CSS property
.bdd-no-flex
:- Specifies that the element should not be flexible. It sets the CSS property
flex: none;
, meaning the element will not grow or shrink in a flex container.
- Specifies that the element should not be flexible. It sets the CSS property
.bdd-flex-row
:- Sets the flex direction to row. It changes the layout of flex items to flow horizontally.
.bdd-flex-row-r
:- Sets the flex direction to row-reverse. This reverses the order of flex items within a row.
.bdd-flex-col
:- Sets the flex direction to column. It changes the layout of flex items to flow vertically.
.bdd-flex-col-r
:- Sets the flex direction to column-reverse. This reverses the order of flex items within a column.
.bdd-flex-wrap
:- Specifies that flex items should wrap if necessary. It sets the CSS property
flex-wrap: wrap;
.
- Specifies that flex items should wrap if necessary. It sets the CSS property
.bdd-flex-nowrap
:- Specifies that flex items should not wrap. It sets the CSS property
flex-wrap: nowrap;
.
- Specifies that flex items should not wrap. It sets the CSS property
.bdd-jc-start
:- Sets the justification of flex items to flex-start.
.bdd-jc-end
:- Sets the justification of flex items to flex-end.
.bdd-jc-center
:- Sets the justification of flex items to center.
.bdd-jc-space-between
:- Sets the justification of flex items to space-between.
.bdd-jc-space-around
:- Sets the justification of flex items to space-around.
.bdd-jc-space-evenly
:- Sets the justification of flex items to space-evenly.
.bdd-ai-stretch
:- Aligns flex items to stretch to fill the container.
.bdd-ai-start
:- Aligns flex items to the start of the container.
.bdd-ai-end
:- Aligns flex items to the end of the container.
.bdd-ai-center
:- Aligns flex items to the center of the container.
.bdd-ai-baseline
:- Aligns flex items to the baseline of the container.
.bdd-as-auto
:- Sets the align-self property to auto.
.bdd-as-stretch
:- Sets the align-self property to stretch.
.bdd-as-center
:- Sets the align-self property to center.
.bdd-as-start
:- Sets the align-self property to flex-start.
.bdd-as-end
:- Sets the align-self property to flex-end.
.bdd-as-baseline
:- Sets the align-self property to baseline.
.bdd-flex-0, .bdd-flex-1, .bdd-flex-2, .bdd-flex-3, .bdd-flex-4, .bdd-flex-5
- .bdd-flex-b-0, .bdd-flex-b-100, .bdd-flex-b-200, .bdd-flex-b-300, .bdd-flex-b-400, .bdd-flex-b-500
FLEX with BREAK POINTS
- The class names are generated based on the breakpoints and sizes provided. They follow a pattern like .bdd-breakpoint:property-size.
Auto margins
- .bdd-ml-a
- .bdd-mr-a
- .bdd-mt-a
- .bdd-mb-a
- .bdd-mx-a
- .bdd-my-a
Margins and paddings
Margin and padding with breakpoints
- Similar to the above, but with breakpoints applied. Follows a pattern like .bdd-breakpoint:property-size.
Show and hide classes
- .bdd-show
- .bdd-hide
- Classes for each breakpoint like .bdd-breakpoint:show and .bdd-breakpoint:hide.