![]() With columns in place, we made our content set into modules. That meant that the padding would come out of our set width rather than add to it, immediately fixing the problem. Initially, this broke the grid, until we added box-sizing border-box universally. Gutters were handled by adding left padding to the grid itself and then right padding to each of the columns. We used the clearfix class so the grid didn’t collapse to zero height. ![]() These we set by classnames like grid-2-3 or grid-1-4. For instance 66.66% wide next to 33.33% wide. Our grid “framework” is as simple as floating elements to the left in percentage proportions. That’s a naming convention signifying that this file will be included in other files and is not to be compiled directly. Right away we broke off grid stuff into a file we called _grid.scss in our scss folder. ![]() Instead of using a fancy framework, we don’t overthink it and create our own. Even something like a layout that has a sidebar is essentially a grid. We started building a grid for the project. We made a “scss” folder in addition to the “css” folder, and CodeKit knew to compile our “style.scss” into “style.css” when we saved the file. scss variety of Sass, which looks pretty much like regular CSS with the curly braces and all. A refresh would close those things, but with style injection you can style them without that worry. Imagine a web app where it takes a few clicks to get it into a particular state (open dialog box, open dropdown menu). We talked about how in a stated application this is particularly useful. When we edited CSS, we watched the style changes “inject” themselves without a page refresh. We plopped down some texture from Subtle Patterns. The browser in our case was regular ol’ Chrome (works in Safari too) and the text editor was Sublime Text 2 (could be any text editor). This is CodeKit doing that, and doesn’t require anything else special. We added this project folder to CodeKit and demonstrated that when you change content in the HTML, the browser will automatically refresh to show that change. We made a simple structure inside the folder: index.html and folders for css, js, and images. No framework, no starter code, just totally from scratch. We started out with a completely empty folder. Some of the stuff might not make much sense if you weren’t there, but hey, that’s the huge advantage of going to these events! And I also thought it might be useful to post publicly so everyone could benefit. I thought I’d round up the notes from it to give to the attendees. You can download and try it for free for Mac, Linux, and Windows.Just a few days ago I gave a four hour workshop at BD Conf in Dallas, Texas. I think Prepros is a great tool! Of course, it is not the best for the advanced tasks, but you can cover every aspect of a basic front-end development workflow. You can also set upload on file change which also can be useful. The app comes with an inbuilt FTP (or SFTP) client which makes comfortable your deploy process. Of course, you can also turn on the Source Map checkbox which makes easier the debugging of the catenated files. In Prepros you have two keywords named and which are works like the classic import. When you work with Sass or Less, it is not a problem to catenate your files with but in the case of JS, it is not so easy. You can also run a dev server with live-reload or debug your mobile pages from your desktop. Nice to know that in the case of CSS you can set the correct auto-prefix parameters and in JS you can also config UglifyJS in detail. Prepros understand a lot of preprocessor like Less, Sass, Stylus in CSS Haml, Pug, Markdown in HTML Livescript, Typescript, Coffescript, Babel in JavaScript. ![]() On the specific file types, you can set different settings like prefix, compress volume or compile destination. config file which stores its settings.Īfter you open your project folder, you can navigate it through like you are in your file explorer. In Prepros all of your projects are separately handled after you dropped into the GUI. For a more comprehensive list check out the official page! Project Handling The application has a lot of features, and in this article, we check the ones that I use almost daily. ![]() Need a WordPress website? Or you prefer the more performant headless and static solutions? We can help! The Functions of the Application ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |