Width and Container Classes

WIP

Notes
HTML
SCSS
View

Flex Classes

Original source from https://utsa-asc.github.io/college-dls/college-dls/reference/style-component.html

Implementation Notes

The web vendor that completed this section included several redundant (due to bootstrap) classes and extra class names that may not be consistent with the rest of the project. These utility classes are not necessarily designed to be used in new designs moving forward.


        
        <div class="css-box">
    <p>Flex : <span class="css-class">.d-flex</span></p>
    <p>Flex Row : <span class="css-class">.flex-row</span></p>
    <p>Flex Wrap : <span class="css-class">.flex-wrap</span></p>
    <p>Flex Column : <span class="css-class">.flex-column</span></p>
    <p>Flex Spacebetween : <span class="css-class">.justify-content-between</span></p>
    <p>Flex Center: <span class="css-class">.justify-content-center </span></p>
    <p>Flex Start: <span class="css-class">.justify-content-start</span></p>
    <p>Flex End : <span class="css-class">.justify-content-end</span></p>
    <p>Flex Spacebetween : <span class="css-class">.justify-content-between</span></p>
    <p>Align Start: <span class="css-class">.align-items-start </span></p>
    <p>Flex End: <span class="css-class">.align-items-end</span></p>
    <p>Flex Center : <span class="css-class">.align-items-center</span></p>
</div>

<div class="css-box">
    <p>Container 1354px : <span class="css-class">.container-1354px</span></p>
    <p>Container 1300px : <span class="css-class">.container-1300px</span></p>
    <p>Container 1070px : <span class="css-class">.container-1070px</span></p>
    <p>Container (Bootstrap) : <span class="css-class">.container</span></p>
</div>

<div class="css-box">
    <p>Width 100% : <span class="css-class">.w-100</span></p>
    <p>Width 75% : <span class="css-class">.w-75</span></p>
    <p>Width 50% : <span class="css-class">.w-50</span></p>
    <p>Width 25% : <span class="css-class">.w-25</span></p>
</div>

File:

Content:


                                /* components/01-visual-styling/06-utility/05-width/width.scss */
/* BEGIN width.scss */
/* Custom Containers */
.css-box {
	background-color: #f4f4f4;
	padding: 15px 30px;
	border-radius: 15px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
}
.css-box p {
	font-size: 14px;
	font-weight: 600;
	padding: 0px 15px;
	margin-bottom: 15px;
}
.css-box p .css-class {
	color: #ee5a35;
}
.css-box p .css-class {
	color: #8d1c00;
	padding: 4px 15px;
	background-color: #e8e8e8;
	display: inline-block;
	border-radius: 4px;
	margin-left: 15px;
}

.container-1300px {
	width: 100%;
	max-width: 1300px;
	margin-left: auto;
	margin-right: auto;
	padding: 0px 15px;
}
.container-1070px {
	width: 100%;
	max-width: 1070px;
	margin: 0 auto;
	padding: 0px 15px;
}
.container {
	max-width: 1170px;
}

 /* Dark Mode */
@include color-mode(dark) {
	.css-box p {
		color: $blue;
	}
}
/* Dark Mode END */

/* Custom Containers */
/* END width.scss */

URL: /components/raw/width-and-container/width.scss
Filesystem Path: components/01-visual-styling/03-utility/05-width/width.scss
Size: 988 Bytes


        <div class="css-box">
    <p>Flex : <span class="css-class">.d-flex</span></p>
    <p>Flex Row : <span class="css-class">.flex-row</span></p>
    <p>Flex Wrap : <span class="css-class">.flex-wrap</span></p>
    <p>Flex Column : <span class="css-class">.flex-column</span></p>
    <p>Flex Spacebetween : <span class="css-class">.justify-content-between</span></p>
    <p>Flex Center: <span class="css-class">.justify-content-center </span></p>
    <p>Flex Start: <span class="css-class">.justify-content-start</span></p>
    <p>Flex End : <span class="css-class">.justify-content-end</span></p>
    <p>Flex Spacebetween : <span class="css-class">.justify-content-between</span></p>
    <p>Align Start: <span class="css-class">.align-items-start </span></p>
    <p>Flex End: <span class="css-class">.align-items-end</span></p>
    <p>Flex Center : <span class="css-class">.align-items-center</span></p>
</div>


<div class="css-box">
    <p>Container 1354px : <span class="css-class">.container-1354px</span></p>
    <p>Container 1300px : <span class="css-class">.container-1300px</span></p>
    <p>Container 1070px : <span class="css-class">.container-1070px</span></p>
    <p>Container (Bootstrap) : <span class="css-class">.container</span></p>
</div>

<div class="css-box">
    <p>Width 100% : <span class="css-class">.w-100</span></p>
    <p>Width 75% : <span class="css-class">.w-75</span></p>
    <p>Width 50% : <span class="css-class">.w-50</span></p>
    <p>Width 25% : <span class="css-class">.w-25</span></p>
</div>