What Happens in the Browser...
In 2sxc most things just work. These docs give you a deep understanding of how they work so you can figure out really cool stuff. But don't be intimidated - by default things just magically work.
This is what web-systems do from a bird's-eyes perspective. On the top you see what happens in the browser (the purple boxes).
- Show: Output using HTML and a little CSS + JS. This is the simplest way to work with 2sxc.
- Interact: Content or SPAs where the UI does some hard work like reorganizing data and getting data from JSON endpoints. This requires additional skills.
- Edit: Editing is built into everything by default and you can customized it as much as you need, up to creating custom WebAPIs, forms and input fields.
This document will go into more detail what happens at that level. To understand the server level go to 2sxc Basics Overview.
Tip
Everything that's green in the image can be customized.
Standard CSS and JS Libraries and Frameworks
A key goal of 2sxc is to stay out of the way and let you do things using your favorite CSS and JS Frameworks. So the frameworks-section is simply here for you to see that you can use any standard framework or library you want.
Basically you can simply add these frameworks to your Razor-template files as <script> or <link> tags, and everything will just work. You may want to learn more about
- Bundling / Optimizing assets
- Use Koi to detect if the Skin/Theme already has some frameworks (like Bootstrap) to not load them
Custom App HTML is created by the Server-Templates
The HTML you need is 100% customizable and comes from the server using your templates. Usually you'll use Razor templates to generate this.
👉 HTML in the Browser
Custom CSS and JS Assets
JS and CSS files are stored in your app folder and included in your output.
👉 CSS in the Browser
👉 JavaScript in the Browser
Create Awesome SPAs (Single-Page-Applications)
2sxc is great and bundling SPA JS Applications built using Angular, React, Vue or whatever.
👉 JavaScript in the Browser
👉 Angular in Dnn
Automatic In-Page Editing Experience
By default 2sxc creates hover toolbars to add modules and on most items which only a Content Editor can see. These let them edit the content or data. It's made possible thanks to the server helper @Edit.TagToolbar in your templates.
👉 Edit Content or Data in Dnn / 2sxc
Custom In-Page Editing Experience
The edit experience can be customized to a very large extent:
👉 Edit Content or Data in Dnn / 2sxc
Edit Form
The edit form is generated automatically from the Content-Type information (Schema) and the template configuration.