Electron can be used to build Desktop Apps with HTML, CSS and Javascript. Also these apps work for multiple platforms like Windows, Mac, Linux and so on. Electron Combines Chromium and NodeJS into a single Runtime. This enables Us to run the HTML, CSS and Javascript Code as a desktop application. For the Love of Physics - Walter Lewin - May 16, 2011 - Duration: 1:01:26. Lectures by Walter Lewin. They will make you ♥ Physics. Recommended for you. Simple CSS allows you to create cascading style sheets from scratch, and/or modify existing ones, using a familiar point-and-click interface. Version 2.0 includes faster WYSIWYG previews.
Our recent roundup of HTML and CSS editing apps for Mac users proved to be really popular, but the Windows-based designers were feeling a little left out. This week’s roundup pulls together the most popular editing application choices for PC users.
The most recent revisions of the HTML standard are returning to the 'old days' of separating the structure of web content (HTML) from the presentation of the content (using a technology called Cascading Style Sheets, or CSS). You can learn more about creating effective web content style in the CSS. Top HTML & CSS Editing Apps For Mac Designers When it comes to web design, every designer tends to have their own favorite coding application. Luckily for Mac users, there are plenty of options to choose from, this roundup of HTML and CSS editors pulls together the most popular editing apps with a brief overview of their features.
These HTML & CSS editing apps for Windows users will help designers build standards-compliant websites with the help of powerful tools features such as live preview, validation, live editing, HTL5 support, drag and drop systems, FTP editing, troubleshooting, browser support, auto-completion features, and more.
Html Css App Mac Pro
Choose your favorite editing app from the list below.
TopStyle
TopStyle for Windows contains powerful tools for building standards-compliant web sites. It includes useful features such as live preview, built in validation, live editing, and HTML5 support.
Screenshot
Notepad2 (FREE)
Notepad2 is one of the most popular utilities for Windows users. It’s a fast, lightweight and simple application. Notepad2 doesn’t include fancy features of more robust editing apps, but if it’s just a program to manually write your code that you’re after, Notepad2 may be for you. This tool can be run out of the box without installation and does modify your system’s registry.
Screenshot
Stylizer
Stylizer is a web page building app with a range of unique features such as drop-and-drop functionality and ‘Bullseye’ on-page editing. Stylizer is described as a great tool to help designers learning the basics of CSS to learn better through its real time visual tool that lets you see how the pieces fit together. It comes with a live preview function, which means that your style sheets open automatically and your changes appear instantly. It also lets you switch between major browsers using side-by-side preview panes. This helps you construct responsive website designs easily.
Screenshot
Brackets
Brackets is a lightweight modern editor focused on visual tools. It’s was specially made for web designers and front-end developer that makes it much more easier to design directly in your browser. This modern text editor is an open-source project with great features, such as live preview, preprocessor support, inline editors, and more. With Brackets you can use Quick Edit and Live Highlight with your LESS and SCSS files.
Style Master
Style Master is a CSS editing app that’s available for both Windows and Mac users. It features live editing of websites vis FTP, has both design & code views and built in browser support for easy troubleshooting. Among this tool’s best features are creating style sheets based on your HTML, live CSS editing of PHP, ASP.NET, Ruby and other dynamically generated sites and editing CSS via ftp.
Screenshot
PSPad (FREE)
PSPad is a freeware editor with support for a number of file types and languages. Features such as syntax highlighting, macros, clips and templates make it a complete application for the designer confident with their coding skills. This tool helps you create web pages and supports many file types and languages, with syntax highlighting. It has an integrated HEX Editor, FTP Client, Macro Recorder, File Search/Replace, Code Explorer, and other great features.
Screenshot
Rapid CSS
Rapid CSS features both manual editing capabilities and the option of having a stylesheet automatically created. Other features such as auto-completion, code inspection and validation make it a good competitor. This comes with CSS checker and instant built-in multi-browser preview. It also loads much faster than any other CSS editors, supports HTML, CSS, LESS, SASS, JavaScript, PHP, XML, ASP, Perl and more, lets you edit directly on your web server or publish local development copy updates with a single click and even has a built-in multi-browser preview.
Screenshot
Html Css App Mac Download
Responsive Site Designer
RSD has a lot of new features that can come in really handy, such as a width slider, custom breakpoints and also comes with a large library of pre-built items and symbols.
EngInSite CSS Editor
The EngInSite CSS Editor is a complete CSS editing application with all the features you could wish for. Live preview and validation, visual editing, wizards and auto-completion features make it a great app for both beginners and veterans.
Screenshot
Komodo Edit
Komodo Edit can be used for editing HTML, XML, and other text files and comes with a lot of features. You can also add some extensions available for languages and special characters.
Dreamweaver
Dreamweaver is one of the most well-known page building apps. It includes a range of unique features and is a robust app allowing websites to be built via the Design or Code views. If you already have access to Dreamweaver as part of the Adobe Creative Suite, it definitely has every tool you’ll ever need, as well as some you probably never will need!
Screenshot
Notepad++
Notepad++ is another free lightweight application for Windows and is a popular choice for veteran programmers who only need a basic app to manually write their code. It has quite a few useful features such as ability to bulk edit files, syntax highlighting and much more.
Screenshot
You may also like:
Can HTML, CSS and Javascript really be used to build Desktop Applications?
The Answer is Yes ?
In this Article we will be focussing mainly on how Electron can be used to create desktop applications with Web Technologies like HTML, CSS and Javascript
Electron can be used to build Desktop Apps with HTML, CSS and Javascript. Also these apps work for multiple platforms like Windows, Mac, Linux and so on.
Electron Combines Chromium and NodeJS into a single Runtime. This enables Us to run the HTML, CSS and Javascript Code as a desktop application.
If Electron is used directly, then some manual setup is needed before building your application. Also if you want to use angular, react, vue or any other framework or library, you will need to manually configure for that.
Electron Forge makes the above things much easier.
It provides template applications with angular, react, vue and other frameworks. This avoids the extra manual setups needed.
Also it provides an easy way to build and package the application. It also provides many other features which can be found in their documenation.
Ensure you have NodeJS installed. It can be installed from here
Install Electron Forge Globally using the following command
Use the following command to create your application
simple-desktop-app-electronjs is the name of the application
The above command will take some time to run.
Once it finishes running, Start the application using the following commands
This should open up a window like the one shown below
The application created has a folder structure. Here I will be mentioning some of the important things in this folder structure
package.json
It has information about the application you are creating, it has all the dependencies needed for the app and also it has some scripts. Some of the scripts are already pre configured and you can add new scripts as well.
The config.forge path has all the configurations which are specific to ElectronJS. For example make-targets is used specify the target make files for various platforms like Windows, Mac or Linux.
Also package.json has
'main': 'src/index.js'
which indicates that src/index.js is the starting point of the applicationsrc/index.js
According to package.json, index.js is the main script. The process which runs the main script is known as the Main Process. So Main Process runs the index.js script.
The main process is used to display GUI elements. It does this by creating Web Pages.
Each Web page created runs in a process called as renderer process
Main Process and Renderer process
The purpose of the Main Process is to create web pages using a
BrowserWindow
Instance.The
BrowserWindow
Instance uses a renderer process to run each Web page.Each App can have only one Main Process but can have many renderer processes
It is possible to communicate between the main and the renderer process as well. This will not be covered in this article.
Electron Architecture showing main and renderer process. The file names can vary
abcd.html is shown as a second webpage in the above architecture. But in our code we won’t be having a second web page.
src/index.html
index.js loads the index.html file into a new BrowerWindow Instance.
What this basically means is that, index.js creates a new GUI Window, and loads it with index.html web page. The index.html web page runs in its own renderer process.
Code in index.js explained
Most of the code created in index.js has good comments explaining what it does. Here I will mention a few key points to note in index.js
The above code snippet basically creates a BrowserWindow Instance and loads index.html into the BrowserWindow.
You would see app used often in the code. For example take the below code snippet.
app is used to control the applications’s event life cycle.
The above code snippet says that when the application is ready, load the first window.
Similarily app can be used to perform other actions on various events. For example it can be used to perform some action right before the application closes and so on.
Writing the Code
Let us use the same application we used before and modify it slightly to create a temperature converter application.
First Let us install Bootstrap. Install bootstrap using the following command
Copy the following code into src/index.html
The above code does the following
- Creates a text box with id celcius. whenever anything is typed in this textbox, celciusToFahrenheit() function is called.
- Creates a text box with id fahrenheit. whenever anything is typed in this textbox, fahrenheitToCelcius() function is called.
- Whenever a new value is typed in celcius text box, the value in the fahrenheit text box displays the same temperature in fahrenheit
- Whenever a new value is typed in fahrenheit text box, the value in the celcius text box displays the same temperature in celcius
The 2 functions which do the temperature conversion are present in renderer.js
Create a file called renderer.js inside src. Copy the following code into it.
celciusToFahrenheit() function reads the value in celcius text box, converts it to fahrenheit and writes the new temperature into fahrenheit text box.
fahrenheitToCelcius() function does the exact opposite of this.
Running the application
Run the application using the following command
This should display the following window. Try it out with different values.
Packaging the application
The command to package the application is
This command will take some time to run. Once it finishes check the out folder within the project folder.
I tested this in a windows machine. This creates a folder called simple-desktop-app-electronjs-win32-x64 inside out folder
So in the out/simple-desktop-app-electronjs-win32-x64 folder, the command creates an .exe file for this application. Clicking on the exe file automatically starts the desktop application.
The folder name simple-desktop-app-electronjs-win32-x64 can be broken down as appname-platform-architecture where
- appname = simple-desktop-app-electronjs
- platform = win32
- architecture = x64
When you run this command without any parameters, by default it packages for the platform which you are using for development
Let’s say you want to package for a different platform and architecture. Then you can use the following syntax
For example, in order to package for linux you can use the following command
This will create a folder called as simple-desktop-app-electronjs-linux-x64 inside out folder.
Creating a make File
In order to create a make file or an installer for the application, use the following command
This command will take some time to run. Once it finishes check the out folder within the project folder.
Html Use Css
The out/make folder will have a windows installer for the desktop application.
When you run this command without any parameters, by default it creates the installer for the platform which you are using for development
Code
Html Set Css File
The code for this desktop application is available in my github repo
You now know how to create desktop applications using HTML, CSS and Javascript.
This article covered very basic concepts of electron and electron-forge.
To know more about them, you can checkout their documentation.