peter/doneit-web
1
0
Fork 0
mirror of https://code.equilibrium.co.ao/ITO/doneit-web.git synced 2026-04-19 04:57:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add agile methodology

Browse Source
This commit is contained in:
Peter Maquiran
2021-01-28 10:02:27 +01:00
parent f7f13a98c1
commit 4b8f31d04a
2 changed files with 296 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/style/readme.md
+137
View File
@@ -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>