![]() Once that has loaded up copy the following code and paste into the command prompt, you can do this by right clicking on the top bar and going to edit > paste. After installation is complete go to programs, then Ruby and click "Start Command Prompt with Ruby". Don't tick/change anything unless you know what you are doing. Once downloaded, run through the install. If you are unsure which, you have to simply right-click "My Computer" and click "Properties" to find out. Now you'll want the latest version (2.0.0 at time of writing) and depending on what architecture you are using, pick either the standard for 32-bit machines or 圆4 for 64-bit machines. Unlike OS X, Windows does not have this installed by default, so we'll need to go get it. Ruby is what will allow us to install this Sass-based version of Foundation. If you're using Windows you can still use the Sass version of Foundation, it just takes a few more steps to get going. This will just save you some time as it adds your output stylesheet and normalize.įrom here you can start actually building your project using Sass. Once you've chosen your compile method by using the "compass compile" or "compass watch" method, you may want to grab the code that you can see at the bottom of the image. ![]() You can see from this that a lot has happened and your Foundation-based project is born. I always use the second choice, which automatically creates CSS files whenever I save my Sass files. This choice dictates whether your Sass files will be converted to CSS files whenever you save them, or manually when you choose to convert them. You'll then see many many lines of information resulting in a choice. Follow this with a command that will actually create your project:Ĭompass create YOUR-PROJECT-NAME -r zurb-foundation -using foundationĮnsure you change the "YOUR-PROJECT-NAME" text for your actual project name and hit return. Make sure there's a space between "cd" and your path, though. Whenever you want to start a new project simply open up terminal and type "cd" (change directory), without the speech marks, then you'll need to either type in a path, or create a folder for your project and drag it in to terminal. Now that we have traversed the twists and turns of installing a ruby gem and keeping it up-to-date, let's setup a project so we can begin to analyse this route of developing with Foundation. ![]() Paste in the following:Īfter installing you should have a Terminal output that looks like this: Again, this may take some time so be patient. There's one final step of setup and that's to install Compass, which will allow us to create builds of Foundation for use in our projects. To do this simply paste one of the following into terminal: What's cool about taking this approach is that with another simple command you can update this core reusable framework to either the latest public build or release candidate. Once you have completed this step, you'll have essentially added the Foundation core to your system, allowing you to reuse it as you please without having to go to the Foundation site. It may take some time to process, but should result in a screen like this: To get going open up Terminal (OS X) and paste in the following: We're going to dive right in here, and we'll need to use terminal/command prompt to do so, but don't be put off as it's easier than it looks. Using Sass allows you to flirt with the idea of functions, variables, and reusable code which really helps in the transition toward more complex languages. HTML and CSS are easy enough to learn and get the job done, but it's a big jump to go from those simplistic languages to jQuery and JavaScript. Sass is great for those of you who, like me, are designers first and coders second. The team behind Foundation have not only used Sass to allow more friendly and dynamic styling, but they also offer greater customisation in the Sass version than in the HTML/CSS version. Foundation has a few different versions, currently we've covered the most common HTML/CSS variants, but now let's talk about a version built on Sass. ![]() Sass (as with all other preprocessors) allows for nested styles, functions and prewritten code in what are called mixins. Sass is a great way to speed up front-end development in general, I use it in every one of my projects.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |