Stacks Image 296

About

Are you comfortable with HTML but like the ease of RapidWeaver Stacks' drag and drop setup? Know a little about CSS but prefer RapidWeaver Stacks' intuitive settings panel for styling? The Frontend stack gives you all of the limitless design possibilities of HTML/CSS combined with the quick, easy, and intuitive setup of RapidWeaver Stacks.

No messing around with typing out long lines of code. Frontend will even handle all the browser prefixes for you with compatibility in all major browsers (IE9+). The only requirement is RapidWeaver Stacks version 3+.

HTML Elements

Create any HTML element you need simply by typing it's tag name (div, button, article, etc). You can drag and drop those sections anywhere you like, nesting them in other stacks or other elements, making it simple create and modify complete HTML frameworks. Assign custom classes and attributes to each element. All HTML elements will not be wrapped generic ID/Classed div elements and will display as raw HTML on inspection, keeping it professional looking when inspecting the source code.
Stacks Image 207584

CSS Rules

Stacks Image 207656
Not only can you define any CSS property on the HTML elements you create, you can also create custom rules without actually typing out all of the code. All of the CSS is declared within the RapidWeaver Stacks settings panel. Control the style of multiple elements from a single panel, linking and unlinking elements quickly and easily through class names.

HTML & CSS Without Limits

Sometimes there just isn’t a stack for that specific thing you need to do in your projects, whether it be styling or functionality. But if it can be done in HTML and CSS, then it can be done with the Frontend stack only faster.

Though designed for more advanced users who have at least a basic understanding of HTML and CSS, the Frontend stack can still be great tool for those who are learning HTML and CSS. Use this stack to apply any new knowledge to your RapidWeaver projects.
Stacks Image 207740

HTML Settings

CSS Settings

Stacks Image 207962
Create any HTML element by typing in its name into the element tag field. The element tag is the only required field. Optionally assign classes, add an ID, and add custom attributes. Any field left blank will remove the attribute from the HTML all together.

By default the Frontend Stack will allow you to drag and drop other elements into a “drop stacks here” section. Alternatively you can set the content type to text for when you are creating paragraphs, headers, and links.
Stacks Image 207968
Stacks Image 208105
Any option that is set to “default” will not add code to the CSS file so that it does not become needlessly bloated. Additionally, if the element selector field is left blank, no code will be added the CSS file at all (even if some options have been changed).

If the element selector field is set to “[this]”, a random unique class name will be generated, added to the HTML element, and all non-default settings will only apply to the same element.

The element selector field accepts class names, IDs, and HTML. The selector can be as simple as single class name (.myClass) or as specific as you need it to be (html body div#pagewrap ul#myList li.myClass).
Stacks Image 208108
Stacks Image 208157
Stacks Image 208111
Stacks Image 208114
Note: Due to the complex nature of web developing and the variety of things that can be done with the Frontend Stack, we will be unable to provide any specific troubleshooting support for the HTML or CSS code you are trying to add to your projects. However, if you do run into any trouble there are many resources available online for learning and troubleshooting. Code Academy is a wonderful free resource for learning that we recommend highly.

This stack requires Stacks version 3+.
© 2016 1LD