Responsoive Design Editor For Mac

Web Development Tools

Apple has brought its expertise in macOS and iOS development tools to the web. Safari includes Web Inspector, a powerful tool that makes it easy to modify, debug, and optimize a website for peak performance and compatibility on both platforms. And with Responsive Design Mode, you can even preview your webpages for various screen sizes, orientations, and resolutions. To access these tools, enable the Develop menu in Safari’s Advanced preferences.

Web Inspector

• Responsive web design is recommended by Google, it allows one website to provide a great user-experience across many devices and screen sizes. As the tech industry continues to develop new devices, with new capabilities and limitations, the challenges we face as web designers will inevitably change.
• The web editor for Mac is back. For people who make delightful, innovative and fast websites — in an app to match. Espresso helps you write, code, design, build and publish with flair and efficiency.

Web Inspector is your command center, giving you quick and easy access to the richest set of development tools ever included in a web browser. It helps you inspect all of the resources and activity on a webpage, making development more efficient across macOS, iOS and tvOS. The clean unified design puts each core function in a separate tab, which you can rearrange to fit your workflow. In macOS Sierra, you can discover new ways to debug memory using Timelines and tweak styles using widgets for over 150 of the most common CSS properties.

Elements. View and inspect the elements that make up the DOM of a webpage. The rendered HTML is fully editable on the left and details about the webpage’s nodes, styles, and layers are available in the sidebar on the right.

Network. See a detailed list of all network requests made to load every webpage resource, so you can quickly evaluate the response, status, timing, and more.

Resources. Find every resource of a webpage, including documents, images, scripts, stylesheets, XHRs, and more. You can confirm whether everything was successfully delivered in the format and structure you expect.

Responsive Layout Maker lets you prototype responsive designs and generate custom layouts. The adaptable layout is the core, and most challenging aspect, of any responsive website. The adaptable layout is the core, and most challenging aspect, of any responsive website.

Timelines. Understand all the activity that occurs on an open webpage, such as network requests, layout & rendering, JavaScript & events, and memory. Everything is neatly plotted on a timeline or recorded by frame, helping you discover ways to optimize your site.

Debugger. Use the debugger to help you find the cause of any JavaScript errors on your webpage. You can set break points which allow you to pause script execution and easily observe the data type and value of each variable as it’s defined.

Storage. Find details about the data stored by a webpage such as application cache, cookies, databases, indexed databases, local storage, and session storage.

Console. Type JavaScript commands in the console to interactively debug, modify, and get information about your webpage. You can also see logs, errors, and warnings emitted from a webpage, so you can identify issues fast and resolve them right away.

Responsive Design Mode

Safari has a powerful new interface for designing responsive web experiences. The Responsive Design Mode provides a simple interface for quickly previewing your webpage across various screen sizes, orientations, and resolutions, as well as custom viewports and user agents. You can drag the edges of any window to resize it. In addition, you can click on a device to toggle its orientation, taking it from portrait to landscape and even into Split View on an iPad.

BlueGriffon^®

The next-gen Web and EPUB Editor based on the rendering engine of Firefox^®

Version 3.0.1 released 2017-nov-22.

Certainly the most powerful Responsive Design editor
of all Wysiwyg editors!

« My HTML Editor is BlueGriffon, an intuitive, modern and robust application.
I like that what I see is what I get on the Web. »
Jeff Jaffe, CEO of the World Wide Web Consortium (W3C)

« The HTML Editor I'm Using Today? BlueGriffon »
Nick Longo, author of CoffeeCup, the very first HTML Editor

« Dear @BlueGriffonApp , you saved my a$$ once again »
Tristan Nitot, former President of Mozilla Europe

What's inside?

BlueGriffon^® has a long list of famous ancestors and proudly inherits from all of them: Netscape^®, Mozilla^® Composer and Nvu. It is powered by Gecko, the same rendering engine you can find at the heart of Firefox^®, and is filled with tons of powerful features:

	without license	Basic license	EPUB license
Native standalone Windows, MacOS X and Linux app
Black and Light themes
HTML 4
XHTML 1.0
XHTML 1.1
html 5 (html) including audio, video and forms
html 5 (xml) including audio, video and forms
copy/paste between all flavors of html
Responsive Design
CSS 3 including 2D and 3D Transformations, Transitions, Shadows, Columns, Font Features and more
CSS Variables
CSS Grids
SVG
Internationalization Tag Set (ITS) 2.0
WAI-ARIA 1.1
DPUB-ARIA 1.0
Opquast® Accessibility First Step
Wysiwyg Authoring
Editable source view
Editable @media print view
Dual View (Source + Wysiwyg in sync)
User Interface in 20 languages
Modifyable menu and button keyboard shortcuts
Style Properties panel
DOM Explorer panel
Script Editor panel
Stylesheets Manager panel
Table of Contents with one-click update
Markdown support
FontSquirrel font manager
Google Fonts font manager
User's Manual
EPUB 2
EPUB 3.0.1
EPUB 3.1
full metadata editing support for EPUB 2, 3 and 3.1
copy/paste between EPUB and all flavors of html
Fullscreen mode
CSS Editor Pro with Media Queries, CSS Variables and even a visual CSS Selector editor!
Table Layout Manager with 44 predefined layouts, all strictly CSS-based
Toolkit Manager for one-click insertion of multiple JavaScript/CSS files
MathML Editor panel (based on ASCIIMathML)
Code Snippets panel
One-Click Templates Manager with ~2,500 free templates
Mobile Viewer
EyeDropper, a colorpicker allowing to select a color from anywhere on screen(s) (Windows and Linux only)
PUTter, to publish a document and the local resources attached to that document through HTTP PUT
Thumbnail manager
Word count warnings
Project Manager

BlueGriffon® is used by millions of users around the world, including Universities, Governments and even the European Parliament. It is officially recommended by the French Government as the Web Authoring Tool for the French Administration in its effort to rely on and promote Free Software (Socle Interministériel de Logiciels Libres).

Some screenshots from the OS X version.

The current Web page was of course created with BlueGriffon...

BlueGriffon editing one of the Media Queries of a responsive Web site

BlueGriffon® editing an EPUB 3.1 version of Melville's Moby Dick

Editing EPUB 3.1 metadata

Editing EPUB 2 metadata

CSS Selector visual builder

Templates manager with ~2,500 free templates

Our CSS Editor Pro with our own CSS Parser and CSS Serializer.

Download BlueGriffon^® 3.0.1

Some features of BlueGriffon^® 3.0.1 are only available if you buy a license.
A License bought for any v2.x works with this v3.0.1.
A License bought for BlueGriffon EPUB Edition works with this v3.0.1.

Windows 7, 8, 10 (installer, 32bits)	Windows 7, 8, 10 (installer, 64bits)	OS X >= 10.8 (dmg, 64bits)	Ubuntu 16.04 (tar.bz2, 64 bits)
(zip file)	(zip file)		(deb file)
checksums
Starting with v2.4.1, BlueGriffon is, on OS X and Linux, available only for 64bits.
English (USA), Čeština, Deutsch, Español (Castellano), Suomi, Français (France), Galego, עברית, Italiano, 日本語, 한국어, Nederlands, Polski, Русский, Slovenščina, Svenska, 中文 (简化字), 中文 (繁體字), Magyar, српски.

We are sorry but we don't support versions of Windows older than Windows 7, versions of OS X older than 10.8 (Mountain Lion) and the only Linux distribution we officially support is Ubuntu. BlueGriffon^® may run on older and other operating systems but we won't accept any bug report on those systems if it doesn't.

Alternatively, you can build BlueGriffon® directly from our github repository but only our official builds can enable the extra features described above with a license key.

Buy it

Warning: EU VAT fraud control enabled; purchases with
inconsistent EU VAT data will be blocked for review and
potentially cancelled/reimbursed.

To install the software itself, just download it from the current website.

One license of BlueGriffon^® is for a single user on a single computer. You can always de-activate an already activated license to switch user/computer.

If you have a discount code, you'll be able to use it clicking on the 'Get a code?' text in the Shopping Cart panel.

After purchase, you will receive from us a very important message by email so please make sure your antispam allows emails from noreply@sendowl.com before purchase. The message contains a download link to the User's Manual, a Transaction ID and a License Key. You will need both the Transaction ID and the License Key to activate your license of BlueGriffon^® through the Preferences panel of the application. Please make sure to backup the message you received from us!

IMPORTANT: If you buy multiple licenses of the same type (Basic or EPUB) from the same shopping cart, you will receive one single license key and one transaction ID; they are valid for all your users. If you absolutely need multiple license keys, please buy them one by one. Thanks.

Purchases are processed by our partner SendOwl and through Stripe or PayPal. PayPal lets you pay using your PayPal account if you have one or all major credit/debit cards if you don't.

Customers in Turkey: PayPal recently ceased operations in your country, please contact us directly if you hit issues purchasing our product.

Volume (>= 10) and OEM discounts available, please contact us.

To upgrade a Basic License to a EPUB License, please contact us.

Extras

We have some free dictionaries for BlueGriffon 3.0.1's spellchecker.

FireFtp is a free add-on for BlueGriffon 3.x.

Warning: FireFtp was updated for 3.0; please download and install again if you already had FireFtp installed.

Installation Instructions:

1. save the *.xpi file onto your hard disk. If you're using Firefox, it's normal if Firefox can't install it, these add-ons are for BlueGriffon, not for Firefox...
2. launch BlueGriffon 3.x
3. open the Add-ons Manager through the Tools > Add-ons menu entry
4. select the Extensions tab
5. click on the button at the left (or right if you use an hebraic or arabic version of BlueGriffon) of the Search field at the top the window
6. select the 'Install Add-on from File...' entry
7. select the *.xpi file you just downloaded and saved from our web site
8. a dialog appears, click on the Install button at the end of the three seconds delay
9. the newly installed add-on now appears in the list of installed add-on...
10. you must click on the 'Restart Now' link in the window, or quit and relaunch BlueGriffon to activate your new add-on

User's Manual

We sell our User's Manual because selling it allows us to keep improving BlueGriffon, a software that is and will remain Open Source. Please note that buyers of BlueGriffon licenses get the User's Manual for free with their purchase. Please note the manual is not open source or redistributable.

This manual is delivered in PDF format (with hyperlinks), has more than a hundred pages and is in english. Warning, this is the User's Manual for BlueGriffon, not a HTML, CSS or EPUB tutorial. The most complex CSS features of BlueGriffon will be explained in the Manual, but we won't explain there in details how works for instance the font-family CSS property...

Purchasers of this Manual will receive free updates of the Manual for life, all updates, minor or major, following the evolution of the editor BlueGriffon itself.

Contact us

You can contact us by email at info@disruptive-innovations.com or follow us on Twitter.

Support

Please file all bugs, suggestions and requests in our Bugzilla.

Product is 'BlueGriffon', please write in english.

FAQ

1. Can I pay in US$ or another currency than Euros ?
   

   PayPal will automatically convert our prices in Euros to a price in the currency your PayPal account is using.

2. What's SendOwl?
   

   They're our Shopping Basket processor.

   By the way, SendOwnl never sees your Credit Card information when you purchase from us. We don't see them either, of course. The payment is processed by Stripe or Paypal. We only deal with the shopping basket, through SendOwl.

3. What are the 'Taxes' I see when I order the product?
   

   It's VAT and it's only added to purchases made by european individuals and companies. That's absolutely mandatory, since we're also based in Europe. Nothing we can do about it, sorry.

   It does not apply to customers outside of the European Union.

   Since the 1st of January 2015, European VAT is based on the location of the buyer, not the seller's. That's why the VAT rate applied to our products for two customers based in two different european countries can differ. That's a EU Directive and there's nothing we can do about it. That's also why we don't show the price with VAT before you select your country of residence during checkout...

4. I purchased a license and all I got is a link to the User's Manual, a license key and a transaction ID, no software ?
   

   That's totally normal. BlueGriffon^® is a free download. Install it and enter your license information through the Preferences panel to enable the commercial features.

5. What happened to the Add-ons? What happens if I still use a version of BlueGriffon with add-ons?

   Our previous line of add-ons was discontinued and add-ons made for versions of BlueGriffon older than 2.0 will NOT work with this version 3.0.1... It is then HIGHLY recommended to delete your pre-2.0 profile that is in ~/Library/Application Support/BlueGriffon on OSX, AppData/Roaming/Disruptive Innovations SARL on Windows and ~/.disruptive innovations sarl on Linux) OR, even better, create another profile (see the User's Manual).

6. I lost my license key and/or transaction ID or I can't activate my license, can you help ?
   

   Yes. Please contact us by email and be ready to answer some questions before we send you back your credentials. If you could provide us with your Transaction ID, that will save some time and emails.

7. What's the difference between BlueGriffon and BlueGriffon EPUB Edition?

   The Web editor and the EPUB editor used to be two different products. We merged the two products into one starting with version 2.2.

8. How will you notify us about future versions?
   

   BlueGriffon^® makes a very simple call home when you launch it to check if a new version is available. An alert will show up if that's the case. You can tweak this behavior in the Updates section of the Preferences panel.

9. What's your Privacy Policy about that call?

   Let's state it very clearly: the only data we store about BlueGriffon^® and coming from you (besides your purchase order itself) are of two kinds:

   1. When the application activates or verifies a license, it sends us your license information and an application ID. Nothing more. We don't store these calls at all. Never.
   2. When it checks if a new version is available, it sends us the date of the request, the version of BlueGriffon you're currently using and the appID mentioned just above. We store only the date and the version number. Absolutely nothing more. We do not aggregate these data with our license database. And we do that only for global statistics.

   We do not store and will never store your IP address or even the operating system you're using, BlueGriffon does not transmit and will never transmit your identity, language, information about the documents you're creating/editing, etc..

   Be sure we care as much about privacy as you do.

10. Who are you ?
    

    BlueGriffon^® is a product of Disruptive Innovations SAS, a French software company founded in October 2003. Based in Saint-Germain en Laye, France, Disruptive Innovations SAS delivered in the past premium products like the popular editor Nvu (www.nvu.com) to Linspire Inc., its indirect successor the BlueGriffon Web editor (http://bluegriffon.org) and BlueGriffon EPUB Edition (http://www.bluegriffon-epubedition.com), or the XML editor Etna to the Connexions Project (www.cnx.rice.edu).

    You can contact us at european business hours by email at info@disruptive-innovations.com.

Responsive Design Tutorial