App Pile®

First, some basics

HTML (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content. Html Example
An HTML element is set off from other text in a document by "tags", which consist of the element name surrounded by "<" and ">". The name of an element inside a tag is case insensitive.

Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML. CSS Example
Without CSS, a website would be very boring. CSS is used to style and layout web pages — for example, to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features.

App Pile® works best when a website has been designed using a "mobile-first" approach. As the term suggests, mobile-first design is a technique in which web designers start product design for mobile devices first. This can be done by sketching or prototyping the web app’s design for the smallest screen first and gradually working up to larger screen sizes. Prioritizing design for mobiles makes sense as there are space limitations in devices with smaller screen sizes and teams need to ensure that the key elements of the website are prominently displayed for anyone using those screens.

Now, let's write some code

App Pile® works by converting HTML & CSS into other languages. So open your favorite html editor and start writing some code. There are no limitations or restrictions to follow. App Pile works with all HTML elements and their attributes. This goes for CSS as well.

If you don't know HTML, no problem here is a great resource for learning. www.w3schools.com/html

Navigation Drawer

Adding a Navigation Drawer to your project is as easy as placing some links inside a nav element. That's it! To keep things clean, if you are adding a Bottom Navigation (below) as well, just wrap this nav inside a header tag!

Bottom Navigation

Implementing a bottom navigation bar has never been easier. Just nest a nav tag with some links inside a footer tag!

Links & Intents

The HTML "a" link element is one of the most powerful in terms of how it can be transpiled.

Links and Intents

Using the Transpiler

This is where the magic happens. Click the "LETS DO THIS" button to begin.

The Transpiler

App Name, Icon & Theme

First, give your app some style. Click the "SELECT APP ICON" button and pick an image from your computer to use as the App Icon and we'll set your color theme using the colors from the selected image. Feel free to click on the colors to change them to whatever you'd like.
Then just give your app a name and you're ready to move on.

App Name, Icon & Theme

Platforms & Package Name

Select what platforms you would like us to transpile your code into.
Make sure your package name is correct & when you're ready, click the "NEXT, UPLOAD PROJECT" button.

Select Platforms

Select Project

Click the "SELECT ZIPPED PROJECT" button to pick the zipped web project from your computer.

Select Project

Summary

Verify everything looks good & click the "TRANSPILE" button!

Summary

Transpiling

Sit back and relax as we transpile your web project into the selected platforms.
This usually only takes a few seconds.

Transpiling

Success!

Your download will begin automatically once the Transpiler finishes.
The downloaded zip file will include a folder containing the generated code for each of the selected platforms.

Success

Errors

Well, sometimes things just don't go right. In the event that you receive an error, know that we have received a notification and will work to resolve the issue.

Errors