doneit-web/src/style

System design

First solve the problem then write the code

Table of content

• Diplay
• Flex
• Enabling flexbox
• Flex direction
• Flex justify
• Flex align
• Flex align self
• Flex wrap
• Float
• Float direction



---





Diplay




Specify the elements display property. These classes can be applied using the following format d-{display}.

• d-inline-flex - sets the element display property to inline-flex
• d-flex - sets the element display property to flex
• d-inline-block - sets the element display property to inline-block
• d-block - sets the element display property to block
• d-inline - sets the element display property to inline
• d-none - sets the element display property to none

---





Flex




Control the layout of flex containers with alignment, justification and more with responsive flexbox utilities.

You can also customize flex utilities to apply based upon various breakpoints.





Enabling flexbox

• .d-flex
• .d-inline-flex


• .d-md-flex
• .d-lg-flex




Flex direction



• .flex-row
• .flex-row-reverse
• .flex-column
• .flex-column-reverse


• .flex-md-row
• .flex-lg-row




Flex-justify



• .justify-start
• .justify-end
• .justify-center
• .justify-space-between
• .justify-space-around


• .justify-md-start
• .justify-lg-start




Flex align



• .align-start
• .align-end
• .align-center
• .align-baseline
• .align-stretch


• .align-md-start
• .justialignfy-lg-start




Flex align self



• .align-start
• .align-end
• .align-center
• .align-baseline
• .align-stretch


• .align-md-start
• .align-lg-start




Flex wrap



• .flex-nowrap
• .flex-wrap
• .flex-wrap-reverse


• .flex-md-nowrap
• .flex-lg-nowrap

---





Float




Float utility classes.

You can also customize flex utilities to apply based upon





Float direction



• .float-left
• .float-right


• .float-md-left
• .float-lg-left

Spacing




The helper classes apply margin or padding to an element ranging from 0 to 5. Each size increment was designed to align with common Material Design spacings. These classes can be applied using the following format {property}{direction}-{size}.

The property applies the type of spacing:

• m - applies margin
• p - applies padding

The direction designates the side the property applies to:

• t - applies the spacing for *-top
• b - applies the spacing for *-bottom
• l - applies the spacing for *-left
• r - applies the spacing for *-right
• x - applies the spacing for both *-left and *-right
• y - applies the spacing for both *-top and *-bottom
• a - applies the spacing for the property in all directions

The size controls the increment of the property:

Example:

<template>
  <div>
    <span class="pl-3">Test</span><br>
    <span  class="ml-5 "
    >Test</span>
  <div>
</template>