If you've ever had to go back to an old project or take over an existing code base, you have probably experienced the frustrating feeling of not remembering or understanding how things are put together. We did something about it.
By standardizing how to structure code into components from the front-end down to the backend, based on the reliable and well tested styling solution Suit, we achieve code that is modular, maintainable, and in some cases even reusable in other projects.
Regardless how the code is being generated, whether it be Sass, Less, inline styling, Babel, CoffeeScript, Twig, JSX or any other source, you always know where to look for that specific component code.
HTML
<section class="SalesPitch">
<p class="SalesPitch-paragraph">
Components based solution for front-end maintainability
</p>
<button class="Button js-SalesPitch-like">Like</button>
</section>CSS
.SalesPitch {
margin-left: 10px;
margin-right: 10px;
}
.SalesPitch-paragraph {
background-color: #eee;
padding: 25px 35px;
text-align: center;
}JS
$(".js-SalesPitch-like").on('click', like);Tree structure
.
└── kostym_components
├── Button
└── SalesPitch <-- Here is all the SalesPitch component code
The whole Suit documentation is quite large.
This is the essential parts that you should be familiar with:
###Drupal 7
Resources to get the Kostym components to operate and easy to work with in Drupal 7
- Kostym module required
- gulpfile.js highly recommended
- yeoman generator highly recommended
- Kostym component examples