Code Lobster

is a free multi-platform PHP IDE.

CodeLobster IDE. Codelobster IDE free editor for PHP, HTML, CSS, and Javascript. There is a professional version also available. The professional version gives you access to the framework like Angular JS, Backbone JS, Bootstrap, CakePHP, CodeIgniter, Drupal, Jquery, Ember JS, Joomla, Laravel, Magneto, WordPress, etc. CodeLobster is featureful IDE. The CodeLobster IDE makes it easy to maintain project source code through integration with Git. It is possible to work with both local and remote repositories, create new branches for safe testing and save changes using commits. CodeLobster PHP Edition has an internal PHP debugging UI that is available even to free version users, along with a wide array of related tools. Users even have the option to specify configurations before running the debugging tools, so they can make sure all their codes are valid before they upload them to a web server.

Also it is a comprehensive HTML, CSS, JavaScript and PHP editor, that gives learners and professional developers smart tools to coding faster.
The main advantage of our product are plug-ins to work with popular CMS and Frameworks: CakePHP, CodeIgniter, Drupal, Joomla, Symfony, Twig, WordPress, Yii, Node.js, JQuery, AngularJS, BackboneJS.

is a full-featured PHP IDE.

Our customers especially like CodeLobster IDE for a complete set of basic features of Code Editor such Syntax Highlighting, Code Completion, Advanced Search and Built-in developer tools: powerful PHP Debugger, Version Control Systems integration, Database(SQL) manager and so on.

is a smart, fast and high-performance PHP IDE.

Codelobster is very simple and highly effective editor for web developers. It's very convenient interface saves you time on getting familiar with the Editor.
Customizable windows, panels, toolbars, shortkeys, menues allows to adjust it to serve rapid web development.

is a light-weight IDE.

It requires smaller space on a disk than any other similar editor. Codelobster combines speed of a simple code editor and power of a full-size IDE allowing you to work much faster and easer.
Codelobster works on Windows, MacOS and Unix/Linux/Ubuntu/Mint/Debian operation systems.

CMS

JavaScript

version: 1.10.2

released: September 15, 2020

Versions historySeptember 15, 2020 CodeLobster IDE multi-platform free version 1.10.2 released!
New version has the following new features:

Bugs fixed:

XDebug crash on latest PHP version 7.4.

September 07, 2020 CodeLobster IDE multi-platform free version 1.10.0 released!
New version has the following new features:

Improved TypeScript autocomplete
Improved CSS autocomplete
Drupal plug-in:
CakePHP plug-in:
Ember plug-in:
Bugs fixed:

Live View synchronization

Autocomplete inside commented blocks

July 06, 2020 CodeLobster IDE multi-platform free version 1.9.0 released!
New version has the following new features:

Online Help
Improved TypeScript autocomplete
Support of 'import' and 'export' syntax in JavaScript code
All plug-ins are updated to support latest framework versions
Bugs fixed:

Scrolling speed adjustment

Arrays in the Watch Window and Tooltips

Default settings for used fonts

February 11, 2020 CodeLobster IDE multi-platform free version 1.8.0 released!
New version has the following new features:

All plug-ins are updated to support latest versions
Updated CSS help
Improved JavaScript autocomplete
Bugs fixed:

crash while editing files in 'Second View'

November 18, 2019 CodeLobster IDE multi-platform free version 1.7.1 released!
New version has the following new features:

JavaScript debugger
Node.js debugger
Search for tree controls
Ability to select language for PHP help
Bugs fixed:

incorrect autoformat for double braces

default button for format options

minor problems in dark color schemes

storing breakpoints positions

hotkey for tooltips

July 30, 2019 CodeLobster IDE multi-platform free version 1.6.2 released!
New version has the following new features:

Ability to work with JavaScript projects (including JS autocomplete)
PHP autocomplete for 'self::' syntax
Auto-format option
Bugs fixed:

correct FTP/SFTP reconnect

crash on search with some specific parameters

correct display of arrays while debugging process

problem with F5 on Lunix OS

February 28, 2019 CodeLobster IDE multi-platform free version 1.5.1 released!

Codelobster Review

New version has the following new features:

Improved visual styles and icons
Speed up of text typing
JSDoc support
'Open folder' ability
'Level up' navigation in SFTP connections
Support of 'use' and 'class extended' syntax in PHP code
WordPress plug-in:
Emmet plug-in:
Bugs fixed:

Bug with appling values from color dialog

Ctrl+TAB hotkey on Mac OS

'Upload on save' on Mac OS

Сomplete translations for all languages

December 4, 2018 CodeLobster IDE multi-platform free version 1.4.0 released!
New version has the following new features:

Bootstrap plug-in:
jQuery plug-in:
SQL manager
Improved GIT integration
Highlighting for 'Go' language
PHP autocomplete for nested objects
Bugs fixed:

Incorrect URL address generated for the preview tab on Windows OS

Processing several new syntax in PHPDoc

Crash after adding PRE tag

Problem with trial period on Linux OS

Extensions assignment on Mac OS

October 3, 2018 CodeLobster IDE multi-platform free version 1.3.0 released!
New version has the following new features:

Live View using Chrome Web Browser
Improved PHP autocomplete
Improved PHP validator
Added new color schemes: Eclipse and Netbeans
New icon set
Laravel plug-in:
Angular plug-in:
Ember plug-in:
Added 'Use spaces instead of tabs' option
Bugs fixed:

Cursor position on Mac OS

EOL chars on changing encoding

'Include Files' and 'Ignore Folders' options

Typing some special characters

Problems with '/' in FTP/SFTP connections

July 18, 2018
CodeLobster IDE multi-platform free version 1.2.1 released!
New version has the following new features:

Git integration
VueJS plug-in:
Symfony plug-in:
Node.js autocomplete for 'require' syntax
Added new color schemes: Brackets Light, Brackets Dark.
TODO option
Bugs fixed:

Crash on remote debugging

Rectangular selection

Crash on opening projects on MacOS

Ctrl+Tab hotkey

Tooltips in Synfony projects

May 28, 2018
CodeLobster IDE multi-platform free version 1.1.0 released!
New version has the following new features:

Added new color schemes: Sublime, Storm, Atom.
Ability to edit CodeLobster IDE color schemes (including IDE interface)
Added support for .qss files
Tooltips for JavaScript Document Object Model
Tooltips for JavaScript Standard built-in objects
Bugs fixed:

Crash after editing some values in the Prefences

April 10, 2018
CodeLobster IDE multi-platform free version 1.0.0 released!
New version has the following new features:

All plugins are included:
Drupal, Joomla, WordPress, Phalcon, CodeIgniter, CakePHP, Laravel, Magento, Symfony, Yii, AngularJS, BackboneJS, MeteorJS, jQuery and Twig
Document Object Model (DOM) autocomlete and help
JavaScript Web API autocomplete and help
Autocomlete and help for JavaScript Standard built-in objects
Password-protected FTP/SFTP key files
Bugs fixed:

Hot keys on MacOS

February 12, 2018
CodeLobster IDE multi-platform free version 0.3 (beta) released!
It doesn't include plug-ins yet.
New version has the following new abilities:

JSDoc support
Bugs fixed:

Crash in Preview Window on Linux Mint

February 4, 2018
CodeLobster IDE multi-platform free version 0.2 (beta) released!
It doesn't include plug-ins yet.
New version has the following new abilities:

Special symbols in Mac and *nix versions
Improved looking on UHD monitors
Improved FTP/SFTP support

December 15, 2017
CodeLobster IDE multi-platform free version 0.1 (alfa) released!
It doesn't include plug-ins yet.

- Supported OS: Windows 7, Windows 8, Windows 10, MacOS, *nux

- Supported interface languages: English, German, French, Italian, Spanish, Russian, Chinese, Japanese, Portuguese, Hungarian, Czech, Slovak, Turkish, Persian

Download (Windows, .exe)
Download (*nux, .deb)
Download (Debian, .deb)
Download (*nux, .rpm)
Download (MacOS, .dmg)

HOT OFFER: get 25% discount now!

Professiоnal version costs ~~$79.95~~ $59.95 / 3 activations on different devices +1 year free updates.

Future updates cost $19.95 / 1 year

It includes:

If You ordered Windows version (Codelobster PHP Edition) earlier than, please, enter serial number for Pro or Lite version to get 50% discount:

50% discount applied

serial number not found

~~$79.95~~ $59.95 / 3 activations on different devices +1 year free updates.

Buycopy(s) withadditional year(s) of updates Buy

Bootstrap with built-in integration of HTML, CSS, and JavaScript provides an easy to use all-in-one framework for front-end developers.

Bootstrap provides powerful designing features for developers in order to effectively complete their projects in minimal time frames, providing a convenient way to use readymade webpage designs and themes, that are easy to run and accessible on vast cross-browser code environment.

With its remarkably elegant user experience, you can build interactive webpages and forms in no time with all the modern features.

Even if you are just getting started with Bootstrap you’ll most likely be fascinated by the rich, powerful features of bootstrap in implementing your day to day frontend web development tasks.

CodeLobster IDE by default supports the bootstrap framework and provides many built-in plugins and tools for easy incorporation of Bootstrap into your projects.

In this tutorial, we’ll go through all the steps required to build a page using bootstrap in the CodeLobster IDE.

Let’s have a detailed look on how to set up and work with bootstrap in Codelobster IDE.

Installing Bootstrap with CodeLobster IDE

Bootstrap not only brings convenience for the beginners but it also provides endless opportunities to the professionals for further enhancement of their work efficiency.

Following section gives an overview of integrating bootstrap into CodeLobster PHP IDE for conveniently initiating and maintaining projects:

In IDE, go to the main menu drop-down and select Project >> “Create Project” and create a regular project.

Run the bootstrap installation wizard. Go to “Plugin menu” >> “Bootstrap” >> Download Framework.

After selecting the folder for the workspace of the project press the “FINISH” button. The IDE will automatically download all the required framework file and setup the working environment for you.

This tutorial will utilize an empty HTML5 template, for building up the basis for all the subsequent advance projects from scratch.

Start with creating an HTML page “index.html”. The Framework wizard will connect several additional file with our page for bootstrap functionality
Bootstrap.min.css – contains all the necessary CSS styles
Jquery.min.js – this library contains the JS-scripts.
bootstrap.min.js – contains JavaScript for adding interactive features to the page

Add the following code to the “index.html” file

In the end, “index.html” should contain the following code:

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title>Using Bootstrap in CodeLobster IDE</title>
<link rel=”stylesheet” href=”bootstrap-4.2.1-dist/css/bootstrap.min.css”>
<script src=”jquery.min.js”></script>
<script src=”bootstrap-4.2.1-dist/js/bootstrap.min.js”></script>
</head>
<body style=”padding: 20px;”>
</body>
</html>

CSS classes in Bootstrap

Classes in bootstraps provide strong structural functionality to the framework. The selector naming system is very controlling in usage and every aspect of the display of element is taken into account.

Classes provide a convenient method for arranging elements on the page. It also provides a feature of design adaptation for dealing with resolution compatibility issues on different devices such as phone tabs and desktops. All the necessary features, from background coloring to rounding corners or adding borders and text everything is handled through classes.

CodeLobster IDE perfectly understands the code syntax of the Bootstrap framework, and offer complete autocomplete option for all the possible available classes.

For quick hint on classes, start typing and IDE will provide autocomplete options by pressing (Ctrl+ Space) to initiate autocomplete and select desired class from the drop-down.

In the following window and line has been turned into a button and two classes are implemented at the same time. The “btn” class describes common flairs for all buttons, and such classes as, for example, “btn-primary”, “btn-success”, “btn-danger” and others, describe colors.

Contextual dynamic help option is also available in the IDE that updates you about the usage and functionality of different classes so you do not forget the purpose of different classes in different implementations.

IDE automatically selects a link to the relevant document when you are working in some code.

You can check the dynamic help option by going to the “Dynamic Help” tab on the right panel, in this particular case clink on the link that will take you to the comprehensive description of “btn-primary” class.

JavaScript in Bootstrap

Even if the main functionalities of the Bootstrap framework are implemented in CSS, it is represented by a set of jQuery plug-ins and they serve the accessory purpose.

All the modern browsers of the date use productive CSS engines at maximum, so the bootstrap framework works very elegantly without overloading the page.

In order to use JavaScript functions, some special attributes and classes are required to be added to the HTML page.

For instance, let’s create a collapsible element, you can easily do it by including the class “collapse” and the unique attribute “id” to the block tag, as follows:

<div class=”collapse show” id=”collapsible”>
<div class=”card card-body”>
Content of collapsible element.
</div>
</div>

“Show” class is also added to the div block in order to display elements in expanded form by default.

To control the vicinity of the block, a button will be added, as follows:

<p>
<a class=”btn btn-primary” data-toggle=”collapse” href=”#collapsible” role=”button”>
Link button
</a>
</p>

Afterward, we add our data attributes. Add a “data-toggle” attribute to the button with the “collapse” value and to specify the ID of target tag use “href”.

So we can add interactive elements to the pages of our site by using simple HTML markup without probing into JavaScript programming. By pressing the button, we can show and hide all the content within the block.

The “#collapsible” element can be controlled by using customary JavaScript API, for example, by calling the following functions in the event handler on the page:

$(‘#collapsible’).collapse(‘show’); //Expand item
$(‘#collapsible’).collapse(‘hide’); //Hide item
$(‘#collapsible’).collapse(‘toggle’); //Change element visibility to opposite

To process the button press in our document, just type in the editor:

CodeLobster provides a very easy and interactive way to work with JavaScript. Autocomplete can be utilized for all the classes in the framework using CodeLobster IDE.

As demonstrated, all tasks are solved using five lines of code. Including this snippet to code, makes the button to change its color with each click. It will always be red when the “#collapsible” element is in the closed state.

Framework customization suiting your needs

Some developers feel like Bootstrap makes all the sites look similar. However, such issues arise only when the developers are only familiar with HTML and CSS. Bootstrap provides users with the means to adjust according to their needs. Not only does it assist in performing the task at hand, it enhances the functionality for executing the current project.

You have the option to either create your own style or redefine one of theirs. You just need the working code on your pages and Bootstrap’s real source code would cite with the extension “scss” in the files.

The source is available at the official website. And even though SASS technology is not required for routine operations, it is mandatory for better control.

Codelobster Tutorial

SASS serves as a brilliant pre-processor for the SCSS files. Its syntax resembles JS and CSS, whereas operation feels like a template engine.

If you wish to customize the style, simply select a variable and assign it a value. The variable can be utilized later to create custom styles.

This feature comes in handy when the purpose is to brand a website or to have a corporate color theme. It enables a solid style for various UI elements within the website.

It has sufficient options for the addition of mathematical operations for generating the CSS code. It facilitates brisk computation of the prearranged base values such as conversion of pixel values to percentage.

You can begin your SASS journey on Bootstrap using two of the most exciting file: “scss/bootstrap.scss” – the file with access to all components of the framework. The components can be selected either by copying the compulsory commands to personal basis file or by simply jotting down a few files within the file.

Therefore, minimizing the load of codes on the web pages.

The below mentioned @ import directive may be sufficient for importing the entire Bootstrap in the user scss-file.

@import “scss/bootstrap”;

The filename “scss/_variables.scss” contains variables, by changing their values, you could easily adjust various global styles: colors, indents, shadows, gradients and others.

For example, an expression facilitates is use of gradients:
For instance, such appearance assists the use of gradients:
$enable-gradients: true;

In Bootstrap, mixins are used for complex generation of all code for custom UI elements.

Labster Code

This Mixins generate an auto code for button in CSS with your custom choice of color.

.my-custom-button {
@include button-variant(#20cece, #000000, #3127be);
}

In CodeLobster you can easily edit scss files- the syntax of SASS provide full support and also help the system to work efficiently.

A simple command is generated with aid of final file and implemented in the terminal:

sass myCustom.scss myCustom.css

In this technique you do not redefine the styles the style over and over again, you only need the essential constituents and a little CSS file devoid of pointless elements.

If you are new to SASS or haven’t used it but are practical programmer, move to the Bootsrap official website. There are so many options to select or merge in tone files and codes for the components that are needed for your HTML template.

Let’s summarize

Bootstrap was first created by the Twitter team but after finding huge potential recognition they turned it into an open-source project. Bootstrap was developed, keeping in mind the core concepts of web such as content, compliance, and compatibility of different platforms and browsers.

CodeLobster IDE has already great support for HTML, CSS, and javascript programming but embedding the support for Bootstrap framework all into it makes a CodeLobster IDE a versatile platform to fulfill all your frontend needs from creating UI, from layout design to interface testing. It provides all the additional debugging and testing features so it must be 100 % assure of your design and its display compatibility to any size of device because it will allow you to create a markup for all possible screen sizes.

Bootstrap has solved the problem of all those business community who want to start the project within no time.

Bootstrap framework deals with core concepts of professional HTML, CSS, and JS programming under the hood, for that very reason, it is very much recommended to get down with documentation for properly working with the framework in order to decipher the endless possibilities that Bootstrap has to offer.