Preview Bootstrap in BBEdit
I have used BBEdit off and on for the past 10+ years. Every single Macintosh that I have own has had a copy of BBEdit on it. I don't remember exactly when I purchased my first version of BBEDit, but I did find a "BBEdit 3.0 Prefs." file on a ZipDisk from 1994.
I still have my BBEdit 6.0 and BBEdit 4.02 CDs, probably got them at MacWorld Boston.
What is BBEdit?
Here's a description of what BBEdit is from the BBEdit 4.0.2 documentation (May 8, 1996):
BBEdit is a high-performance text editor for the Macintosh. Unlike a word processor, whose main purpose it to make it easy to write prose that will eventually find its way to a printed page, a text editor is primarily concerned with manipulating large amounts of text.
BBEdit offers pattern searching and replacing, multi-file searching, sophisticated text transformations, and other features not usually found in word processors.
BBEdit has commands that make it easier to edit specific kinds of text such as source files for programming languages and HTML (Hypertext Markup Language) files for the World Wide Web.
Top Uses of BBEdit
Here's the list of task that I do in BBEdit:
- Zap Gremlins - BBEdit Zep Gremlin feature is pure awesome. It removed all Non-ASCII characters, Control characters and replaces with code. Essential when you have to deal with removing smart quotes.
- Process Lines Containing - This is a quick and easy way to clean up a large file. I can quickly parse out certain phrases into a separate file.
- Sort Lines - I use this when I have a list of items that needs sorting, such as customer name or accounts.
- HTML Markup - BBEdit is my go to editor for all my HTML work.
- Editing Text Files - Anytime that I have a non-word or rich text file, I'll open it in BBEdit. I have the ability to use any of the text tools if needed.
Preview your Bootstrap pages right in BBEdit
Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. Developers like it because it makes it simple to create websites that look great across various platforms. BBEdit's Preview commands allow you to view your pages in one or more web browsers. With some simple configurations, you can get BBEdit to display HTML using BootStrap CSS.
Via Preview Template
- Using BBEdit reate a Bootstrap template document with external CSS and Javascript references
- This document may can contain anything you like but should define the basic structure and appearance of your desired page.
- Within the document, place a single placeholder: #DOCUMENT_CONTENT#. When you preview a document, the text content will go where #DOCUMENT_CONTENT# appears.
- Quit BBEdit
- Go to "~/Library/Application Support/ BBEdit/" and create a new folder called "Preview Templates"
- Place your Bootstrap template to the folder.
- Launch BBEdit
Via Preview CSS
- Quit BBEdit
- Go to "~/Library/Application Support/ BBEdit/" and create a new folder called "Preview CSS"
- Copy over your Bootstrap CSS file to the new folder, or simply get the CSS from the bootstrapcdn.com.
- Launch BBEdit
Now when you want to preview some HTML text, including BootStrap specific CSS, you simply select 'Preview in BBEdit'. Then select the template, or the CSS file.
Getting BBEdit
Download the latest version of BBEdit from their website. There is a 30-Day trial. BBEdit is $49.99 for an Individual license.