DPCalendar uses BEM as strategy to define it's markup and classes. This is a well known and widely accepted approach. BEM knows only blocks, elements and modifiers, this means you do arrange your markup and classes within this borders. If you want to know more about it, there is a very good documentation at bem.info.
An important part is the class naming concept which comes hand in hand with the markup. The block element gets a simple name like dp-flatcalendar which defines it's purpose. This block can have multiple elements. The name of such an element is prefixed from the block name with two underscores like dp-flatcalendar__day or dp-flatcalendar__month. The last piece are the modifiers which do define the state or behavior like dp-flatcalendar__month_disabled. So basically, a class name is defined by block-name__elem-name_mod-name.
In a nutshell you would create a block with elements like:
<div class="dp-flatcalendar"> <span class="dp-flatcalendar__day"><?php echo $displayData['date']->format('j', true); ?></span> <span class="dp-flatcalendar__month dp-flatcalendar__month_disabled"> <?php echo $displayData['date']->format('M', true); ?> </span> </div>
Comments (0)