mirror of
https://code.equilibrium.co.ao/ITO/doneit-web.git
synced 2026-04-18 20:47:54 +00:00
Add agile methodology
This commit is contained in:
Peter Maquiran
@@ -0,0 +1,159 @@
|
||||
.v-application .overflow-auto {
|
||||
overflow: auto !important;
|
||||
}
|
||||
.overflow-hidden {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
.overflow-visible {
|
||||
overflow: visible !important;
|
||||
}
|
||||
.overflow-x-auto {
|
||||
overflow-x: auto !important;
|
||||
}
|
||||
.overflow-x-hidden {
|
||||
overflow-x: hidden !important;
|
||||
}
|
||||
.overflow-y-auto {
|
||||
overflow-y: auto !important;
|
||||
}
|
||||
.overflow-y-hidden {
|
||||
overflow-y: hidden !important;
|
||||
}
|
||||
.d-none {
|
||||
display: none !important;
|
||||
}
|
||||
.d-inline {
|
||||
display: inline !important;
|
||||
}
|
||||
.d-inline-block {
|
||||
display: inline-block !important;
|
||||
}
|
||||
.d-block {
|
||||
display: block !important;
|
||||
}
|
||||
.d-table {
|
||||
display: table !important;
|
||||
}
|
||||
.d-table-row {
|
||||
display: table-row !important;
|
||||
}
|
||||
.d-table-cell {
|
||||
display: table-cell !important;
|
||||
}
|
||||
.d-flex {
|
||||
display: flex !important;
|
||||
}
|
||||
.d-inline-flex {
|
||||
display: inline-flex !important;
|
||||
}
|
||||
.float-none {
|
||||
float: none !important;
|
||||
}
|
||||
.float-left {
|
||||
float: left !important;
|
||||
}
|
||||
.float-right {
|
||||
float: right !important;
|
||||
}
|
||||
.flex-fill {
|
||||
flex: 1 1 auto !important;
|
||||
}
|
||||
.flex-row {
|
||||
flex-direction: row !important;
|
||||
}
|
||||
.flex-column {
|
||||
flex-direction: column !important;
|
||||
}
|
||||
.flex-row-reverse {
|
||||
flex-direction: row-reverse !important;
|
||||
}
|
||||
.flex-column-reverse {
|
||||
flex-direction: column-reverse !important;
|
||||
}
|
||||
.flex-grow-0 {
|
||||
flex-grow: 0 !important;
|
||||
}
|
||||
.flex-grow-1 {
|
||||
flex-grow: 1 !important;
|
||||
}
|
||||
.flex-shrink-0 {
|
||||
flex-shrink: 0 !important;
|
||||
}
|
||||
.flex-shrink-1 {
|
||||
flex-shrink: 1 !important;
|
||||
}
|
||||
.flex-wrap {
|
||||
flex-wrap: wrap !important;
|
||||
}
|
||||
.flex-nowrap {
|
||||
flex-wrap: nowrap !important;
|
||||
}
|
||||
.flex-wrap-reverse {
|
||||
flex-wrap: wrap-reverse !important;
|
||||
}
|
||||
.justify-start {
|
||||
justify-content: flex-start !important;
|
||||
}
|
||||
.justify-end {
|
||||
justify-content: flex-end !important;
|
||||
}
|
||||
.justify-center {
|
||||
justify-content: center !important;
|
||||
}
|
||||
.justify-space-between {
|
||||
justify-content: space-between !important;
|
||||
}
|
||||
.justify-space-around {
|
||||
justify-content: space-around !important;
|
||||
}
|
||||
.align-start {
|
||||
align-items: flex-start !important;
|
||||
}
|
||||
.align-end {
|
||||
align-items: flex-end !important;
|
||||
}
|
||||
.align-center {
|
||||
align-items: center !important;
|
||||
}
|
||||
.align-baseline {
|
||||
align-items: baseline !important;
|
||||
}
|
||||
.align-stretch {
|
||||
align-items: stretch !important;
|
||||
}
|
||||
.align-content-start {
|
||||
align-content: flex-start !important;
|
||||
}
|
||||
.align-content-end {
|
||||
align-content: flex-end !important;
|
||||
}
|
||||
.align-content-center {
|
||||
align-content: center !important;
|
||||
}
|
||||
.align-content-space-between {
|
||||
align-content: space-between !important;
|
||||
}
|
||||
.align-content-space-around {
|
||||
align-content: space-around !important;
|
||||
}
|
||||
.align-content-stretch {
|
||||
align-content: stretch !important;
|
||||
}
|
||||
.align-self-auto {
|
||||
align-self: auto !important;
|
||||
}
|
||||
.align-self-start {
|
||||
align-self: flex-start !important;
|
||||
}
|
||||
.align-self-end {
|
||||
align-self: flex-end !important;
|
||||
}
|
||||
.align-self-center {
|
||||
align-self: center !important;
|
||||
}
|
||||
.align-self-baseline {
|
||||
align-self: baseline !important;
|
||||
}
|
||||
.align-self-stretch {
|
||||
align-self: stretch !important;
|
||||
}
|
||||
@@ -0,0 +1,137 @@
|
||||
# System design
|
||||
|
||||
<p>First solve the problem then write the code<p>
|
||||
|
||||
<br>
|
||||
|
||||
## Table of content
|
||||
<br>
|
||||
<ul>
|
||||
<li><a href="#Diplay">Diplay</a></li>
|
||||
<li><a href="#Flex">Flex</a></li>
|
||||
<ul>
|
||||
<li><a href="#Enabling-flexbox">Enabling flexbox</a></li>
|
||||
<li><a href="#Flex-direction">Flex direction</a></li>
|
||||
<li><a href="#Flex-justify">Flex justify</a></li>
|
||||
<li><a href="#Flex-align">Flex align</a></li>
|
||||
<li><a href="#Flex-align-self">Flex align self</a></li>
|
||||
<li><a href="#Flex-wrap">Flex wrap</a></li>
|
||||
</ul>
|
||||
<li><a href="#Float">Float</a></li>
|
||||
<ul>
|
||||
<li><a href="#Float-direction">Float direction</a></li>
|
||||
</ul>
|
||||
<br>
|
||||
|
||||
|
||||
<hr>
|
||||
<br>
|
||||
<br>
|
||||
|
||||
|
||||
## <span id="Diplay">Diplay</span>
|
||||
<br>
|
||||
<section>
|
||||
|
||||
<div >
|
||||
<p>Specify the elements <code>display</code> property. These classes can be applied using the following format <code>d-{display}</code>.
|
||||
</p>
|
||||
</div>
|
||||
<div >
|
||||
<ul>
|
||||
<li><code>d-inline-flex</code> - sets the element display property to <code>inline-flex</code></li>
|
||||
<li><code>d-flex</code> - sets the element display property to <code>flex</code></li>
|
||||
<li><code>d-inline-block</code> - sets the element display property to <code>inline-block</code></li>
|
||||
<li><code>d-block</code> - sets the element display property to <code>block</code></li>
|
||||
<li><code>d-inline</code> - sets the element display property to <code>inline</code></li>
|
||||
<li><code>d-none</code> - sets the element display property to <code>none</code></li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<hr>
|
||||
<br>
|
||||
<br>
|
||||
|
||||
## <span id="Flex">Flex</span>
|
||||
<br>
|
||||
<p>Control the layout of flex containers with alignment, justification and more with responsive flexbox utilities.</p>
|
||||
|
||||
<p>You can also customize flex utilities to apply based upon various breakpoints.</p>
|
||||
|
||||
|
||||
<br>
|
||||
<br>
|
||||
|
||||
### <span id="Enabling-flexbox">Enabling flexbox</span>
|
||||
<ul>
|
||||
<li><strong>.d-flex</strong></li>
|
||||
<li><strong>.d-inline-flex</strong></li>
|
||||
</ul>
|
||||
|
||||
|
||||
<br>
|
||||
<br>
|
||||
|
||||
### <span id="Flex-direction">Flex direction</span>
|
||||
<br>
|
||||
<ul>
|
||||
<li><strong>.flex-row</strong></li>
|
||||
<li><strong>.flex-row-reverse</strong></li>
|
||||
<li><strong>.flex-column</strong></li>
|
||||
<li><strong>.flex-column-reverse</strong></li>
|
||||
</ul>
|
||||
|
||||
<br>
|
||||
<br>
|
||||
|
||||
### <span id="Flex-justify">Flex-justify</span>
|
||||
<br>
|
||||
|
||||
<ul><li><strong>.justify-start</strong></li> <li><strong>.justify-end</strong></li> <li><strong>.justify-center</strong></li> <li><strong>.justify-space-between</strong></li> <li><strong>.justify-space-around</strong></li></ul>
|
||||
|
||||
|
||||
<br>
|
||||
<br>
|
||||
|
||||
### <span id="Flex-align">Flex align</span>
|
||||
<br>
|
||||
<ul><li><strong>.align-start</strong></li> <li><strong>.align-end</strong></li> <li><strong>.align-center</strong></li> <li><strong>.align-baseline</strong></li> <li><strong>.align-stretch</strong></li></ul>
|
||||
|
||||
|
||||
<br>
|
||||
<br>
|
||||
|
||||
### <span id="Flex-align-self">Flex align self</span>
|
||||
<br>
|
||||
|
||||
<ul><li><strong>.align-start</strong></li> <li><strong>.align-end</strong></li> <li><strong>.align-center</strong></li> <li><strong>.align-baseline</strong></li> <li><strong>.align-stretch</strong></li></ul>
|
||||
|
||||
<br>
|
||||
<br>
|
||||
|
||||
### <span id="Flex-wrap">Flex wrap</span>
|
||||
<br>
|
||||
<ul>
|
||||
<li><strong>.flex-nowrap</strong></li> <li><strong>.flex-wrap</strong></li> <li><strong>.flex-wrap-reverse</strong></li>
|
||||
</ul>
|
||||
|
||||
<hr>
|
||||
<br>
|
||||
<br>
|
||||
|
||||
## <span id="Float">Float</span>
|
||||
<br>
|
||||
<p>Float utility classes.</p>
|
||||
|
||||
<p>You can also customize flex utilities to apply based upon</p>
|
||||
|
||||
<br>
|
||||
<br>
|
||||
|
||||
### <span id="Float-direction">Float direction</span>
|
||||
<br>
|
||||
<ul>
|
||||
<li><strong>.float-left</strong></li> <li><strong>.float-right</strong></li>
|
||||
</ul>
|
||||
Reference in New Issue
Block a user