![]() As soon as you save a file, it is preprocessed as needed, and the browser is refreshed. LiveReload monitors changes in the file system. CoeeScript, SASS, LESS and others just work. LiveReload CSS edits and image changes apply live. Koala App is a GUI application for Less, Sass, Compass and CoeeScript compilation, to help web developers to use them more eciently. helps you to organize and re‐use code snippets in dierent projects, share snippets publicly and in with team, available for Mac and Windows.ĩ. Snippets is a free program to manage your code. The installation process is as easy as clicking and dragging. Fire.app works on Mac, Linux, and Windows platform. No more vendor CSS prefixes and hand‐crafting sprite images!. Love Sass/Compass but hate command line interface? Fire.app has first class Sass/Compass support just like our Compass.app. Fire.App: A CodeKit like tool for windows is fire.app (it also runs on linux and mac). Emmet is written in pure JavaScript and works across dierent platforms: web browser, Node.js, Microsoft WSH and Mozilla Rhino. Emmet: A free plugin for dierent code editors to write code quicly and easily. It oers Automatic CSS Prefixing, Automatic Browser Refresh, File Minification, Image Optimization, Built in Server and many others. ![]() It ri available for Windows, Mac OS X and Linux. PrePros ($29): Prepros is a premium tool to compile LESS, Sass, Compass, Stylus, Jade and much more with automatic CSS prefixing, It comes with built in server for cross browser testing. You will get a folder named build_# which contains all the static files generated from your project.Components with a single click including Bootstrap, jQuery, Modernizr, Zurb Foundation, even WordPress. Click the Fire.app icon and choose "Build Project". If you want to learn more about template languages or Fire.app's built-in helpers, please follow these links below.Īfter completing your project, you can use "Build Project" to generate the static files. For example, rename your index.html to then you can use the ERB template language.Īfter renaming the file, you can add a lorem ipsum helper after h1 to generate a paragraph. Using template languages with Fire.app is very easy, simply name the file with a corresponding file extension. Switch to the browser and refresh the page, then you'll see the result. For example:īecause SCSS is a superset of CSS syntax, we can just write normal CSS here. Write some CSS in the corresponding Sass file /sass/screen.scss for a test. Next, add more HTML to import a CSS file which is generated from a Sass file. Then write some content like Hello World!. Do not remove it.Īdd a file to the project folder and name it index.html. Do not touch it.Ĭonfig.rb // Compass setting. sass-cache/ // The hidden sass cache folder. Stylesheets/ // Default CSS output folder. The project folder should look like this: Let's build a compass project as an example. Also, you can use Fire.app's built-in web server to see the project result in your browser. If your project is being watched, after you change a Sass/CoffeeScript file it automatically compiles into a corresponding CSS/JavaScript file. ![]() A dialog window will appear saying your project has been created.Īlso, the icon turns orange, which means Fire.app is "watching" your project. Give your new project a name and save it. ![]() You can read some source code inside this project to learn how to use Fire.app. Note: "Fireapp Example" on the "Create Project" list is not a framework but a Fire.app project example. It will create a compass project which contains sass files and import compass reset by default. If you don't prefer any of the frameworks, we suggest to choose "compass" -> "project". To create a project, click the Fire.app icon and choose "Create Project" then choose the project type you want from any of the frameworks on the list. NOTE: Fire.app is written in Java, so it will take a few seconds to start. Execute run.sh and you'll see a little gray icon appear in the menubar. You can put this folder anywhere you want. You will get a folder containing all the Fire.app files.
0 Comments
Leave a Reply. |