Meta( http-equiv='X-UA-Compatible', content='IE=edge' ) Place any HTML element by just removing the signs, no closing tag required. If you look at the language reference for Jade you might at first feel like it's a little complex, however there are a few fairly simple key principles that its main functionality boils down to: HTML Elements It lets you write a whole lot less code and use things like variables and mixins to add logic, which all comes together to make for a very efficient process. I like to think of Jade as "shorthand" for HTML. Instead of coding raw HTML we're going to be working with Jade. You should now see the following files and folders inside: Click the More Options icon, the right most button at the bottom right of Prepros, then choose Compile All Files. If it does, you're ready to run your first project compilation, which will add files into your currently empty site folder. It's time to check our setup and try compiling. Click your project name in the left sidebar of Prepros. Then click Project Filters and enter content,templates in the Comma Separated Filters To Exclude field. /site/js/ in the Concatenated & JMinified S Path field. /site/css/ in the CSS Path field.Ĭlick HTML Options, then change Output Path Type to "Relative to Source File Directory" and enter. All we need to do is tell it where to put our compiled files, as well as which folders we actually want it to ignore.ĭownload and install Prepros. Run Prepros, then drag your static_site_project folder onto the interface to add it as a new project.Ĭlick the little gear icon, the one second from the left at the bottom right corner of the Prepros interface, to go into the project settings.Ĭlick CSS Options, then change Output Path Type to "Relative to Source File Directory" and enter. Out of the box Prepros will automatically watch and compile all your files for you. When you're done, your project structure should look like this: Install & Configure Prepros In the stylus folder create a file named style.styl In the scripts folder create a file named site.js and another subfolder named js. In the source folder create a file named index.jade and an additional four subfolders content, scripts, stylus and templates. Inside your project folder create two subfolders site and source. By having all your output files in their own folder it's easy to grab the whole thing and upload it to your live site when you're done.Ĭreate a project folder named anything you like, e.g. I always find it's easier to keep the preprocessor source files you work on separate from the actual site files they'll compile into. We'll begin by getting you setup with a project folder organized to best work with Prepros. Check out the live demo to see what you'll be making. Just install and run Prepros, add your project and it will handle all your compiling, combining and minifying for you.Īs part of our site creation we'll also be including some smooth scrolling effects to take visitors from one section of the site to the next, plus some CSS based animation effects for extra punch. With Prepros there's no need to install Node.js, Ruby or any modules and gems, and you never have to touch command line. So as we put together our static site we'll be playing with three preprocessors for these languages Stylus, Jade and (a tiny bit of) CoffeeScript respectively. Prepros is an interface tool which handles preprocessing, and other front-end tasks. Prepros' greatest strength is the incredible ease with which it allows you to use preprocessors of various kinds, be they for CSS, HTML or JavaScript. Today we'll be learning how to create a static one page "About Me" website using the awesome free app Prepros from Alpha Pixels.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |