When developing CSS at scale, it is significant to have an assimilated approach to its architecture and naming conventions. Conventions can benefit the team and enhance more reliable, reusable code that can be utilized on diverse projects. This also provides teams with explicit guidelines for syntax and stylistic preferences. It is difficult for a team to comprehend what you have done if you don't follow any guidelines when building a custom stylesheet, thus you must adhere to any methodologies. I've included some of the approaches I use below:
| BEM | - | Block element modifier |
|---|---|---|
| OOCSS | - | Object-orientated CSS |
| SMACSS | - | Scalable Modular Architecture |
| RSCSS | - | Reasonable System for CSS Stylesheet Structure |
| ITCSS | - | Inverted Triangle CSS |
The above principles will be explained in my next blog. but, in this article, we will talk and code about using a couple of the amazing Sass features that enrich and embrace the possibilities of creating a custom bootstrap using SCSS (Sassy Cascading Style Sheets, a more sophisticated and developed version of CSS)
Initializing variables in a map is the first stage in the construction of a dynamic stylesheet preprocessor language.
All of our utilities are included in the $utilities map, which is later combined with any custom $utilities maps you may have created. A keyed list of utility groups that accept the following options is included in the utility map:
Property: The name of the property may be a string or an array of strings (e.g., horizontal paddings or margins).
Values: List of values, or a map if you don't want the value's class name to match it. The map is not compiled if the key is null.
Class: If the class name shouldn't be the same as the property name, use a variable. The class name will be the first entry of the property array if you don't supply the class key and the property key is an array of strings.
Each set of utilities resembles the following:
$utilities:(
opacity: (
property: opacity,
class: o,
values: ( "0": 0, "25": .25, "50": .5, "75": .75, "100": 1 )
),
);
a larger map appears as follows:
$utilities:(
opacity: (
property: opacity,
class: o,
values: ( "0": 0, "25": .25, "50": .5, "75": .75, "100": 1 )
),
self-align: (
property:align-self,
class: align-self,
values: (
"baseline":baseline, "center":center, "flex-end":flex-end,
"flex-start":flex-start, "self-end":self-end, "self-start":self-start,
"unset":unset
)
),
v-align: (
property: vertical-align,
class: v-align,
values: ('middle':middle, 'top':top, 'bottom':bottom)
),
........
........
);
The @mixin allows you to create CSS code that can be reused throughout the website.
For generating custom classes we use @mixin. Any Sass identifier may be used as the name of a mixin, and statements other than top-level statements may be contained within it. You can write CSS that will be used repeatedly on a website using the @mixin directive. They can include style rules of their own that can be nested in other rules or added at the top level of the stylesheet, or they can merely be used to edit variables. Several styles can be encapsulated in a single style rule.
This is how our dynamic class generation method looks.
@mixin css-modifier( $prefix, $separator ) {
@each $key, $util in $utilities { //looping the $utilities map
$values: map-get($util, "values"); // assigining values to $values
$properties:map-get($util, "property"); // assigining property to $properties
&#{$prefix}#{map-get($util, "class")} {
@each $key, $val in $values { //iterating values
&#{$separator}#{$key} {
#{map-get($util, "property")}:$val; // the actual property and value
}
}
}
}
}
If you want the same values for other properties, you must alter the property option as a map in a similar manner.
$utilities:(
........
........
),
attributes: (
property: ("h":height,"w":width),
values: ('full':100%, 'auto':auto, 'max-content':max-content)
),
........
........
);
Now change the @mixin code block in your file as follows:
@mixin css-modifier( $prefix, $separator ) {
@each $key, $util in $utilities {
$values: map-get($util, "values");
$properties:map-get($util, "property");
@if type-of($properties) == 'map' {
@each $class, $prop in $properties {
&#{$prefix}#{$class} {
@each $key, $val in $values {
&#{$separator}#{$key} {
$prop:$val;
}
}
}
}
}
@else {
&#{$prefix}#{map-get($util, "class")} {
@each $key, $val in $values {
&#{$separator}#{$key} {
#{map-get($util, "property")}:$val;
}
}
}
}
}
}
To observe the magic of output, you must finally declare a class in the name of your website and include css-modifier inside of it. Suppose the website's name is sanesquare(SSQ). Then:
.ssq {
@include css-modifier('-', '-')
}
Which outputs the following:
.ssq-align-self-baseline { align-self:baseline; }
.ssq-align-self-center { align-self:center; }
.ssq-align-self-flex-start { align-self:flex-start; }
.ssq-align-self-flex-end{ align-self:flex-end; }
.ssq-align-self-unset { align-self:unset; }
.........
...........
the input was,
self-align: (
property:align-self,
class: align-self,
values: (
"baseline":baseline, "center":center, "flex-end":flex-end,
"flex-start":flex-start, "self-end":self-end, "self-start":self-start,
"unset":unset
)
),
In this blog, I've described the basic aspects of the Bootstrap framework without using any JavaScript to represent the dynamic creation of classes. Numerous capabilities of SCSS enable the development of top-notch web applications. I believe that many front-end developers, especially beginners, will find this blog helpful for making their unique bootstrap.
Does your Project Demand Expert Assistance?
Contact us and let our experts guide you and fulfil your aspirations for making the project successful
