Documentation

If you have added styles that has broken your site, skip to the end.

(While reading this, you may want to havce a second window open to view the screenshots from the main Style Quickie page)

Getting Started

Edit a page and put a block with some sample content on it. Maybe a level 3 heading and a couple of paragraphs of text.

You could do this with a standard content block, or with an HTML block. All we want is something we can use as a target while exploring the possibilities of Style Quickie.

Now add a Style Quickie block to the page. When you add a Style Quickie block, it starts with some default styles to turn headings red.

/*
Welcome to Style Quickie. Replace this trivial default style with your own styles.
*/
h1,h2,h3{
  color:red!important;
}

Rather than save this straight away, we can do a quick experiment. Delete something important in the styles like a colon “:” in a rule or a closing brace “}”. Then click the “Compile Styles” tab and see it complain with an error message.

/*
Welcome to Style Quickie. Replace this trivial default style with your own styles.
*/
h1,h2,h3{
  colorred!important;
}

Now click back to the “Edit Styles” tab and correct the error you just deliberately inserted. You can correct it directly, or you can simply click the “Undo” button towards the top right of the page.

Now click “Compile Styles” again and you will get a success message and a box showing what will actually be added to your page. 

Save the Style Quickie block, publish the page and watch your headings turn red!

Something more complicated

You could have done the above trick easily enough with the regular Concrete5 block design. So lets do something a bit more impressive.

The following example is based on the LESS shipped with Concrete5.5. In Concrete5.6 the LESS is derived from Bootstrap2.0, so there will be some minor changes.

Edit the Style Quickie block again and click to the “Select Resources” tab. You can explore all these wonderful LESS and CSS styling resources at your leisure, they come with “view source” links and links to online documentation. But for now, just find the “Bootstrap Mixins” and select it.

Sometimes we want a resource to be logically before our Style Quickie styles in the compilation sequence. Sometimes we want it to be after. Where there are two checkboxes, these are for before or after inclusion of LESS resources. In this example we want the “Bootstrap Mixins” to be before our Style Quickie styles in the compilation sequence.

Now click back to the “Edit Styles” tab and start editing. What we want is as below:

/*
Welcome to Style Quickie. Here we are using some Bootstrap Mixins.
*/
@medium-blue: #5B83AD;
@darker: @medium-blue - #444;
@lighter: @medium-blue + #444;

#demonstration-area{
    padding:10px;
    .border-radius(10px);
    .gradientBar(@lighter, @darker);
    
    h1,h2,h3{
        color:green!important;
    }
}

In these styles we have defined a single colour, @medium-blue, then done some maths to create lighter and darker shades.

We have put a name round a set of rules “#demonstration-area” with some standard CSS padding, then used some mixins from Bootstrap to round the corners and add a gradient fill.

Finally, we have nested a rule for headings purely within our demonstration area.

Click to “Compile Styles” again to check this compiles and then save it.

Before publishing the page, we need to add the wrapper “demonstration-area” to the content we are playing with. If you used an HTML block for the sample content earlier, you can just edit it again and add a div element with an id=“demonstration-area” to the HTML.  If you used a regular content block, you need to select “Design” for the block and then in “Set Block Styles” and then on the “CSS” tab insert “demonstration-area” as the CSS ID for the block before saving the dialog.

Now publish the page and watch the whole demonstration block get a sexy gradient background.

Taking it further

For simple colours and typography we can use the Concrete5 dashboard to “Customise” a theme. But we have already added a more complex effect than is achievable through the standard theme customisation.

Experts in CSS could do the same by hand and add CSS to the “Set Block Styles”. Experts in LESS and CSS could compile from LESS offline before copying and pasting styles. Expert theme developers regularly build this sort of thing into themes.

But we have added this nifty effect in just a few minutes without having to get down and dirty inside themes, Concrete5 or CSS. Style Quickie has helped us create comilable styles and cut down on the amount of debugging needed. When debugging is needed, the whole edit/test/debug cycle is faster.

A few lines of LESS in Style Quickie and a checkbox for resources have done all the hard work for us.

Do you have a styling effect you want to add to selected blocks throughout your site? Rather than making “#demonstration-area” an id, you could have declared styles such as “.my-blue-grad” as a class:

/*
Welcome to Style Quickie. Here we are going global.
*/
…
…
.my-blue-grad {
    padding:10px;
    .border-radius(10px);
    …
    …
}

Rather than add this style quickie block to the body of a page, add it to any Global Area on the page, so it is now included on every page of your site.

Now you can go into “Set Block Styles” for any block on your site and assign the block a “CSS Class Name(s):” of  “my-blue-grad” and it will be displayed with this style.

If you ever get tired of the gradient colour, you can go back to edit the Style Quickie block and change one basic declaration and see the effect change throughout your site.

Set Options

  • Crop Before / Crop After - Some LESS resources introduce style rules that will show in the Style Quickie output in addition to the rules you are actually editing in Style Quickie. Maybe you want such rules added to your site. If you don’t, these options can be used to make sure you only get the rules you are editing and no more.
  • Clean up - removes comments and extraneous white space from the compiled styles, but tries to keep everything readable.
  • Compress - compresses the compiled styles to a correct but unreadable mess that takes minimal download space.
  • Disable the styles - useful if you are developing more complex styles and want to save the block before they are ready or correct.
  • Enable in Edit Mode - Style Quickie styles will not be added to a page in Edit Mode unless you select this option.

Dashboard

The Style Quickie dashboard contains 2 pages and most of the time you can just leave these alone with their default values.

Configure Style Quickie

At the top are three checkboxes.

If the syntax editor does not get on with your browser, you can turn it off and just edit styles in plain text areas. Irrespective of this setting, Style Quickie detects Internet Explorer and only provides a text area for users of IE.

You can also adjust the number of history levels the editor maintains to achieve a good balance for your development environment.

If you want to live dangerously, you can also turn off LESS compilation/validation,

Finally, and most importantly. You can turn off Style Quickie globally. If you write a block that breaks a page or the entire front end of your site, you can come to the dashboard and un-tick this box while you sort out what went wrong.

Manage Style Quickie Assets

This page lists all the resources currently known to Style Quickie. You can shuffle them up and down to modify the loading order or disable them completely if you just don't want to see them in the Style Quickie block edit dialog.

When new packages of Style Quickie resources are installed, you may want to 'Scan for Assets' if they do not add automatically to this list.

Coping with Serious Problems

The biggest problem with style development is when you publish a style and it messes up your whole site.

The two most likely reasons is that you have created a style or loaded an asset that fundamentally disagrees with your theme.

You can usually get into the dashboard bypassing the front end of your site by typing yoursite.com/index.php/dashboard/ into the browser address bar.

Once there, the first option is to get into the dashboard site map and move the offending page back one version.

Another option is to get into the Configure Style Quickie dashboard page and disable Style Quickie.

If you can't even get into the dashboard, you can disable Style Quickie using phpMyAdmin to delete the item STYLE_QUICKIE_ENABLE from the Concrete5 Config table.

With Style Quickie disabled, you can now navigate to the offending page and revert its version or edit the Style Quickie block to remove the problem that broke your site before going back to the dashboard and enabling Style Quickie again.

Remember, you can always use the Developer Console to see which style rules are taking effect and why.