improving state of m2 front-end - magento 2 community project
Post on 06-Jan-2017
176 Views
Preview:
TRANSCRIPT
C O M M E R C E & M O B I L E S O LU T I O N S
Magento 2 Community Project Improving state of M2 front-end
BARTEK IGIELSKILEAD FRONT-END DEVELOPER
• How to simplify code and refactoring? • How to get self-documenting code? • How to start reusing code without letting
components influence each other?
What is BEM? Component-based approach to web
development. The idea behind it is to divide the user interface into independent blocks.
BEM naming convention .block-name
.block-name__element-name .block-name--block-modifier
.block-name__element-name--element-modifier
<ul> <li> <a> <span></span> </a> </li></ul>
.ul {}
.ul > li {}
.ul > li > a {}
.ul > li > a > span {}
<ul class="menu"> <li class="menu__item"> <a class="menu__link"> <span class="menu__text"></span> </a> </li></ul>
.menu {}
.menu__item {}
.menu__link {}
.menu__text {}
Typical code BEMed code
<form class="form contact" action="<?php echo $block->escapeUrl($block->getFormAction()); ?>" id="contact-form" method="post" data-hasrequired="<?php echo $block->escapeHtmlAttr(__('* Required Fields')) ?>" data-mage-init='{"validation":{}}'> <fieldset class="fieldset"> <legend class="legend"><span><?php echo $block->escapeHtml(__('Write Us')) ?></span></legend><br /> <div class="field note no-label"><?php echo $block->escapeHtml(__('Jot us a note and we’ll get back to you as quickly as possible.')) ?></div> <div class="field name required"> <label class="label" for="name"><span><?php echo $block->escapeHtml(__('Name')) ?></span></label> <div class="control"> <input name="name" id="name" title="<?php echo $block->escapeHtmlAttr(__('Name')) ?>" value="<?php echo $block->escapeHtmlAttr($this->helper('Magento\Contact\Helper\Data')->getPostValue('name') ?: $this->helper('Magento\Contact\Helper\Data')->getUserName()) ?>" class="input-text" type="text" data-validate="{required:true}"/> </div> </div> <div class="field email required"> <label class="label" for="email"><span><?php echo $block->escapeHtml(__('Email')) ?></span></label> <div class="control"> <input name="email" id="email" title="<?php echo $block->escapeHtmlAttr(__('Email')) ?>" value="<?php echo $block->escapeHtmlAttr($this->helper('Magento\Contact\Helper\Data')->getPostValue('email') ?: $this->helper('Magento\Contact\Helper\Data')->getUserEmail()) ?>" class="input-text" type="email" data-validate="{required:true, 'validate-email':true}"/> </div> </div> <div class="field telephone"> <label class="label" for="telephone"><span><?php echo $block->escapeHtml(__('Phone Number')) ?></span></label> <div class="control"> <input name="telephone" id="telephone" title="<?php echo $block->escapeHtmlAttr(__('Phone Number')) ?>" value="<?php echo $block->escapeHtmlAttr($this->helper('Magento\Contact\Helper\Data')->getPostValue('telephone')) ?>" class="input-text" type="text" /> </div> </div> <div class="field comment required"> <label class="label" for="comment"><span><?php echo $block->escapeHtml(__('What’s on your mind?')) ?></span></label> <div class="control"> <textarea name="comment" id="comment" title="<?php echo $block->escapeHtmlAttr(__('What’s on your mind?')) ?>" class="input-text" cols="5" rows="3" data-validate="{required:true}"><?php echo $block->escapeHtml($this->helper('Magento\Contact\Helper\Data')->getPostValue('comment')) ?></textarea> </div> </div> <?php echo $block->getChildHtml('form.additional.info'); ?> </fieldset> <div class="actions-toolbar"> <div class="primary"> <input type="hidden" name="hideit" id="hideit" value="" /> <button type="submit" title="<?php echo $block->escapeHtmlAttr(__('Submit')) ?>" class="action submit primary"> <span><?php echo $block->escapeHtml(__('Submit')) ?></span> </button> </div> </div></form>
Source
<?php $_helper = $this->helper('Magento\Contact\Helper\Data');?>
<form class="form" id="contact-form" action="<?= $block->escapeUrl($block->getFormAction()); ?>" method="post" data-hasrequired="<?= $block->escapeHtmlAttr(__('* Required Fields')) ?>" data-mage-init='{ "validation":{} }'> <h2 class="form__header"> <?= $block->escapeHtml(__('Write Us')) ?> </h2> <p class="form__description"> <?= $block->escapeHtml(__('Jot us a note and we’ll get back to you as quickly as possible.')) ?> </p> <div class="form__field field"> <label class="field__label" for="name"> <?= $block->escapeHtml(__('Name')) ?> </label> <input class="field__input" name="name" id="name" title="<?= $block->escapeHtmlAttr(__('Name')) ?>" value="<?= $block->escapeHtmlAttr($_helper->getPostValue('name') ?: $_helper->getUserName()) ?>" type="text" data-validate="{ required:true }" > </div> <div class="form__field field"> <label class="field__label" for="email"> <?= $block->escapeHtml(__('Email')) ?> </label> <input class="field__input" id="email" type="email" name="email" title="<?= $block->escapeHtmlAttr(__('Email')) ?>" value="<?= $block->escapeHtmlAttr($_helper->getPostValue('email') ?: $_helper->getUserEmail()) ?>" data-validate="{ required:true, 'validate-email':true }" > </div>
Refactored + formatted + BEM <div class="form__field field"> <label class="field__label" for="telephone"> <?= $block->escapeHtml(__('Phone Number')) ?> </label> <input class="field__input" name="telephone" id="telephone" title="<?= $block->escapeHtmlAttr(__('Phone Number')) ?>" value="<?= $block->escapeHtmlAttr($_helper->getPostValue('telephone')) ?>" type="text" > </div> <div class="form__field field"> <label class="field__label" for="comment"> <?= $block->escapeHtml(__('What’s on your mind?')) ?> </label> <textarea class="field__input field__input--textarea" id="comment" name="comment" title="<?= $block->escapeHtmlAttr(__('What’s on your mind?')) ?>" cols="5" rows="3" data-validate="{ required:true }" ><?= $block->escapeHtml($_helper->getPostValue('comment')) ?></textarea> </div> <?= $block->getChildHtml('form.additional.info'); ?>
<div class="form__actions actions-toolbar"> <div class="actions-toolbar__primary"> <input class="form__hidden" type="hidden" name="hideit" value="" > <button class="actions-toolbar__button button" title="<?= $block->escapeHtmlAttr(__('Submit')) ?>" type="submit" > <?= $block->escapeHtml(__('Submit')) ?> </button> </div> </div></form>
<form class="form contact"> <fieldset class="fieldset"> <legend class="legend"> <span></span> </legend> <br /> <div class="field note no-label"></div> <div class="field name required"> <label class="label"> <span></span> </label> <div class="control"> <input class="input-text"/> </div> </div> <div class="field email required"> <label class="label"> <span></span> </label> <div class="control"> <input class="input-text"/> </div> </div> <div class="field telephone"> <label class="label"> <span></span> </label> <div class="control"> <input class="input-text" /> </div> </div> <div class="field comment required"> <label class="label" for="comment"> <span></span> </label> <div class="control"> <textarea class="input-text"></textarea> </div> </div> </fieldset> <div class="actions-toolbar"> <div class="primary"> <input /> <button class="action submit primary"> <span></span> </button> </div> </div></form>
<form class="form"> <h2 class="form__header"></h2> <p class="form__description"></p> <div class="form__field field"> <label class="field__label"></label> <input class="field__input"> </div> <div class="form__field field"> <label class="field__label"></label> <input class="field__input"> </div> <div class="form__field field"> <label class="field__label"></label> <input class="field__input"> </div> <div class="form__field field"> <label class="field__label"></label> <textarea class="field__input field__input--textarea"></textarea> </div>
<div class="form__actions actions-toolbar"> <div class="actions-toolbar__primary"> <input class="form__hidden"> <button class="actions-toolbar__button button"></button> </div> </div></form>
<form class="form contact"> <fieldset class="fieldset"> <legend class="legend"> <span></span> </legend> <br /> <div class="field note no-label"></div> <div class="field name required"> <label class="label"> <span></span> </label> <div class="control"> <input class="input-text"/> </div> </div> <div class="field email required"> <label class="label"> <span></span> </label> <div class="control"> <input class="input-text"/> </div> </div>
<div class="field telephone"> <label class="label"> <span></span> </label> <div class="control"> <input class="input-text" /> </div> </div> <div class="field comment required"> <label class="label" for="comment"> <span></span> </label> <div class="control"> <textarea class="input-text"></textarea> </div> </div> </fieldset> <div class="actions-toolbar"> <div class="primary"> <input /> <button class="action submit primary"> <span></span> </button> </div> </div></form>
<form class="form"> <h2 class="form__header"></h2> <p class="form__description"></p> <div class="form__field field"> <label class="field__label"></label> <input class="field__input"> </div> <div class="form__field field"> <label class="field__label"></label> <input class="field__input"> </div> <div class="form__field field"> <label class="field__label"></label> <input class="field__input"> </div> <div class="form__field field"> <label class="field__label"></label> <textarea class="field__input field__input--textarea"></textarea> </div>
<div class="form__actions actions-toolbar"> <div class="actions-toolbar__primary"> <input class="form__hidden"> <button class="actions-toolbar__button button"></button> </div> </div></form>
Magento UIIt should to provide ready to use
components, not only set of (little bit overcomplicated) mixins.
We need some help!Specify 3 points of pain in M2
and send them at bartek.igielski@snow.dog
Plase be specifyc! I.e. saying just „lack of documentation” sucks. Specify what part of app need
(better) docs.
How to stay updated?Twitter @Igloczek <- it’s me :) @SnowdogApps <- Snowdog (you don’t say!)
GitHub https://github.com/SnowdogApps/magento2-theme-blank-sass https://github.com/SnowdogApps/magento2-frontools
Magento Forums https://community.magento.com/t5/Less-to-Sass-Community-Project/bd-p/less-to-sass
top related