nternetinspired

ul.breadcrumbs li :after{
	content:" ";
	display:block;
	width:1.45em;
	height:1.45em;
	border-top:1px solid rgba(0, 0, 0, 0.05);
	border-right:1px solid rgba(0, 0, 0, 0.25);
	-webkit-transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	transform:rotate(45deg);

nternetinspired

/* system messages */
dl#system-message {
	border:1px solid #e5e5e5;
	border:1px solid rgba(0,0,0,.15)
}
dl#system-message dt {
	border-bottom:3px double #ddd;
	border-bottom:3px double rgba(0,0,0,.1);
	font-weight:700;
	text-align:center;

nternetinspired

<!-- Something like this -->
<script>
Modernizr.load({
  test: Modernizr.mq('(min-width:400px)'),
  yep: '<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/not-small-screen-stuff.js">',
});
</script>

<!-- Or -->
<script>

nternetinspired

// Requires jQuery of course.
$(document).ready(function() {
    $('.show-comments').on('click', function(){
          var disqus_shortname = 'YOUR-DISQUS-USERNAME'; // Replace this value with *your* username.

          // ajax request to load the disqus javascript
          $.ajax({
                  type: "GET",
                  url: "http://" + disqus_shortname + ".disqus.com/embed.js",
                  dataType: "script",

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>