nternetinspired

The crux of this proposal is the removal of the initimate connection between Joomla's core and third-party libraries on which it relies, in order to provide independence and robustness to each, enabling greater flexibility and strength in Joomla. Hopefully the benefits are largely self-evident.

There are really only a couple of key components to this proposal which, while they may proving challenging to implemnent, should conceptually be easy to grasp;

1. PROTECT THE INTEGRITY OF THIRD-PARTY ASSETS
2. CONFINE VENDOR-SPECIFIC CODE TO VENDOR-SPECIFIC IMPLEMENTATIONS
______________________________________________

1. PROTECT THE INTEGRITY OF THIRD-PARTY ASSETS
There's little point in adopting a popular library, like Bootstrap or jQuery, if it is then adapted in-situ. It is, at that point, no longer the popular third-party library that was adopted, it is a derivative. The burden of maintaining, supporting and developing such derivatives then falls the to Joomla project and this is a burden that can ill be affor

nternetinspired

.main-row 	{
	// Offset the content container as we're padding the grid items
	.content {
		@extend .grid-container;
		padding-bottom: 0;
	}
}

[role="main"] {
	@extend .grid-item-padded;

nternetinspired

<div class="media">
  <img class="media-image" src="http://placehold.it/250x150" alt="" />
  <div class="media-content">Drinking vinegar before they sold out Truffaut put a bird on it, Bushwick sustainable leggings organic mustache forage ennui YOLO kogi viral.</div>
</div>

<div class="media">
  <img class="media-image" src="http://placehold.it/250x150" alt="" />
  <div class="media-content">Echo Park forage kale chips beard artisan. Farm-to-table keytar gluten-free ennui, Carles fanny pack mlkshk. Drinking vinegar gentrify normcore lomo wolf yr. Chillwave Helvetica beard iPhone. </div>
</div>

nternetinspired

<div class="center-me"></div>

nternetinspired

<h1>Color swatches generated with Sass</h1>
<p>This demo includes only the styles needed to generate the colours, so you should be able to drop the markup and Sass/CSS into your project without conflict. Please note though, this isn't intended to be used in production environments <em>this is a development tool</em> to help you quickly find colours for your project.</em></p>
<h2>Complement colour</h2>
<p>The exact opposite of your base colour, useful for delivering contrast but needs to be used with care. <em>Never</em> set copy in your complement colour against a background of your base colour, or vice-versa.</em></p>
<div class="swatch swatch-complement">
    <div class="clearfix">
        <div class="color-item color-brand">
            <div class="color-swatch"></div>
            <div class="color-label">
                <div class="color-value"></div>

nternetinspired

<div class="hero">
  <div class="hero-overlay center">Centred Content</div>
  <div class="hero-image">
    <img src="http://placehold.it/600x400">
  </div>
</div>

nternetinspired

<div class="background">

    <img class="center background-image" src="http://placehold.it/600x400">

</div>

nternetinspired

<div class="background">

    <img class="center background-image" src="http://placehold.it/600x400">

</div>

nternetinspired

<div class="background">
 
    <img class="center background-image" src="http://placehold.it/600x400">
 
</div>

nternetinspired

<div class="background">
 
    <img class="center background-image" src="http://placehold.it/600x400">
 
</div>