There are some really good scripts and plugins available from a wide number of sources; which can be used to add excellent styling or functionality to your RapidWeaver-built website. New technologies like HTML5, CSS3 and jQuery have really advanced what you can build now. However it’s not always an easy process to know where each part of the script needs to go; or including libraries like Bootstrap or jQuery. Even the experts can have a tough time of it sometimes! Builder aims to make things slightly simpler, by clearly marking-out on a page where each component of a script needs to go.

Once the code is in place and you’ve confirmed it working in RapidWeaver preview, then your Builder stack can be allocated a name and saved, for use at any time in other projects. This certainly beats the tedious process of needing to open and insert lines of code in the RapidWeaver Page Inspector (or elsewhere), every time you want to use your plugin. And these saved Builder stacks are easily backed-up or shared with others. Things like jQuery calls are taken care of. Builder is a truly useful tool if you’re starting to take your web design skills further and do more with RapidWeaver.
A video explaining the setup and usage of the Builder stack. This video can be viewed fullscreen and in HD on the YouTube website.
 

Walk-through

Working on the assumption that you wanted to incorporate a very simple image slider in your website, you can search a website like JS-Fiddle for suitable code. Here is a very good simple example of an image slider you could use in RapidWeaver. Fortunately, websites like JS-Fiddle do a good job already of separating the code into HTML, CSS, Javascript and a working preview. In the lefthand sidebar, it also says what dependencies the code has, like jQuery in this example.
JS-Fiddle Website
At this point, you can start copying and pasting the code shown on a website like JS-Fiddle, into the relevant boxes of your Builder stack. Because this particular slider script needs jQuery, this can be turned on in the Builder stack settings.
Builder stack
After only a few seconds of copying and pasting the code in, a quick preview in RapidWeaver reveals that the slider is displayed and working perfectly, as per the original example on the JS-Fiddle website. Of course, you can certainly go-ahead and apply your own modifications.
Builder stack preview
At this point you can save your new Builder stack as a 'user stack'. This stack element can be accessed and reused from any page of any RapidWeaver project you're working on. Just drag and drop it into the page and double-click the HTML region to edit any of the content (like images).
Select stack for use

Setup:

Follow these instruction to get Builder setup in your website:

  1. Drag and drop a builder stack into your page
  2. In the stack settings on the right, change the content type, if you want to setup something other than HTML code
  3. Configure the content regions, with the code or content you want to include in your stack
  4. Double click the CSS and Javascript boxes to edit this code. If CSS and / or Javascript is not needed, just delete the contents of these boxes
  5. If your script needs a library like jQuery, you can choose a library to include from the drop-down menu, in the stack settings
  6. Preview your script in RapidWeaver preview, to check it’s working. Make any other changes or fixes if necessary
  7. Optional - save your completed Builder stack as a ‘user stack’, for use elsewhere on other pages or in other projects

HTML and content placeholders are coloured blue. The CSS box is coloured green. The Javascript box is coloured red. In the stack settings, you can toggle between different Javascript liberties (which your stack may be dependant on) and also toggle between an HTML, Text, Slice or Image placeholder. Sample code for a simple jQuery toggle effect is loaded the first time you drag a Builder stack into your page. This simple system of coloured placeholders should help you to build your own stack elements. For example, websites like JS-Fiddle already split code examples into HTML, Javascript and CSS boxes. So often you can just copy and paste the code straight from the original website.

Compatibility

Builder is only as good as the code you put in it! Code which is outdated, unsupported, buggy or non-standardised will ultimately cause problems. If you’re wary of the quality of the code being used in your Builder stack, it’s always wise to build your Builder stack on a new page. That way if your code corrupts the page layout, you can safely cull that page from your project. Not all scripts work in RapidWeaver and there are certainly lots out there that may not function properly. As always, “simple is best” and it’s wise to just stick with the more simplified scripts and use ones which are well-documented, demo'ed or recommended by others for achieving particular things.
 

Contribute

If you find this stack element useful in your personal or commercial web projects; please consider making a small contribution towards ongoing support and updates. There are many different ways you can contribute to the Stacks4Stacks project, and benefits for doing so.
Bookmark or share this page
Baidu 百度
Blogger
Delicious
Digg
Facebook
Google+
LinkedIn
LiveJournal
MySpace
Одноклассники
Reddit
Renren 人人网
StumbleUpon
Tumblr
Twitter
ВКонтакте
Weibo 微博
XING
Contact Us
Email This Page
Print This Page
PS: This bookmarking and sharing popup is powered using our brilliant SocialPopup stack!

Cookies

Like a lot of websites, Stacks4Stacks uses cookies to help enhance your browsing experience and handle things like purchases. We take your privacy seriously, and welcome you to freely opt-out of nonessential cookies at any time by reviewing your preferences on this page.