Hey Guys,
wile developing huge Frontend Frameworks in my agency for diverent cms systems like magento, firstSpirit, OpenCMS etc. Now i am asking myself how to bring Front End components to the modx cms.
What do you mean, Frontend Components
Instead of a classic page template development, where the user can select a page template and fill in his content, the user should be get the posibillity to build his page out of a set of components by himself.
Component A - Stage
- Could contain 1 to n images
- Some text
- Link to a page
- can be used only at top of a page
- can only be used in full width of page (12 columns)
Component B - Text/Image
- contains paragraphs, headline, image
- can be used everywhere on the page
- can be used in 12 columns, 6 columns, 4 columns, 3 columns
Component C - Teaser
- contains 1 to 4 teasers
- can be used in 12 columns, 6 columns, 4 columns, 3 columns
[]and so on and so on
Now the editor should be select out of these components with different options, based on the template he selects.
How to get this working
What i am missing, is a starting point to do this in modx.
MIGX may be used for that.
But how to implement each of these components to be set in a grid system
The markup should be look like this
<div class="row">
<div class="medium-6 columns">
<div class="component copy">
<h2>H2 headline in copy element</h2>
<figure class="figure figure--50">
</figure>
<p></p>
<p></p>
</div>
</div>
<div class="medium-6 columns">
<div class="component copy">
<h2>H2 headline in copy element</h2>
<p></p>
<p>
</p>
</div>
</div>
</div>
<div class="row">
<div class="medium-4 columns">
<div class="component teaser teaser--1col">
<div class="teaser__item">
<figure class="figure teaser__image" >
<span class="picture " data-class="img-responsive" data-source-prefix="_assets/responsive/" data-alt="Alt Text" data-container="figure"><img alt="Alt Text" class="img-responsive" src="_assets/responsive/320/image.jpg"></span>
</figure>
<div class="teaser__content">
<h2 class="teaser__headline">Teaser Headline</h2>
<p class="teaser__text" >Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore</p>
<p class="teaser__link">
<a href="#" class="button">Mehr erfahren</a>
</p>
</div>
</div>
</div>
</div>
<div class="medium-4 columns">
<div class="component teaser teaser--1col">
<div class="teaser__item">
<figure class="figure teaser__image" >
<span class="picture " data-class="img-responsive" data-source-prefix="_assets/responsive/" data-alt="Alt Text" data-container="figure"><img alt="Alt Text" class="img-responsive" src="_assets/responsive/320/image.jpg"></span>
</figure>
<div class="teaser__content">
<h2 class="teaser__headline">Teaser Headline</h2>
<p class="teaser__text" >Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod </p>
<p class="teaser__link">
<a href="#" class="button">Mehr erfahren</a>
</p>
</div>
</div>
</div>
</div>
<div class="medium-4 columns">
<div class="component copy">
<h2>H2 headline in copy element</h2>
<figure class="figure figure--50">
</figure>
<p></p>
<p></p>
</div>
</div>
</div>
