Responsive and modularity rules

Modularity rules

In general terms, float, margins, positions, top, bottom (...etc) properties are context based. In order to be as reusable and modular as possible, blocks entities should not set those properties. That responsibility should fall to layout and utilities classes or to the containing element entity of another components.

Sizes rules :

/* DON'T */
.gm-block {
    width: 25%;
    /* 
    * 25% of what ? we should not be aware
    * of our context in order to be reusable
    */
}
/* DO, when it make sense */
.ga-icon {
    width: 16px;
    /* some blocks require fixed sizes */
}
/* DO */
.ga-button {
    display: inline-block /* or inline, or inline-flex */;
    /* natural content's size */
    
    &--full {
        /* a modifier to set it to 100% */
        width: 100%;
    }
}
/* DO */
.ga-block {
   display: block;
   /* or */
   width: 100%;
   /* the context size will define the size of this element */
}

.gm-search-bar {
    /* own search bar styles */
    padding: /*...*/;
    background: /*...*/;
    
    &__column {
        /* 
        * this will be used as emplacement 
        * for a lower level component
        */
        width: 33%;
        float: left;
        margin: 5px 8px;
    }
}
.ga-input-search {
    display: block; /* or width: 100% if required */
}
<form class="gm-search-bar">
    <div class="gm-search-bar__column">
        <!-- the container constrain the input size -->
        <input type="search" class="ga-input-search" ...>
    </div>
    <div class="gm-search-bar__column">
        <!-- the container constrain the input size -->
        <select options="..." class="ga-input-select" ...>
    </div>
    <button 
        type="submit" 
        class="gm-search-bar__column ga-button ga-button--green">
        <!-- 
            you can use the gm-search-bar__column 
            element class directly on the block
            if you don't want to use a container div
        -->
        text
    </button>
</form>

Positioning rules :

For the same reason as above. Relative positions are allowed since they are used to set a context for children elements that may have absolute or fixed position.

Last updated

Was this helpful?