About
Launch a site or application with minimal time spent on configuration
Rapid
Modern
Simplistic
Creative
Next.js plays the most critical role in this partnership. It provides the means to quickly put together a react application that is light, and much lighter than other react boilers. Next.js also allows for almost pure CSS writing inside the same file as react which is not available in the create react app.
Bootstrap has long since been on the lips of every developer when talking about style libraries, its classes helped developers save much time on styling pure HTML by just adding pre existing classes. You will not find the entire bootstrap library in this framework but only the helper classes that you can find in the utilities section of the Bootstrap 4 site. Bootstrap styles have since become legacy but these these classes are so useful due to saving time for creating classes for text-alignment, applying flex-box, margin and padding, you can do it on the fly without needing to add dirty inline style nor create new classes. And using these classes also bring consistency to you app.
The final piece of the puzzle is brought in by the materialize-css library, A simple yet extremely modern material design style library which is reminiscent of the Bootstrap style library in the fact that it is a pure CSS style library which means you still have full control over how the html will behave and this is a aspect the component based style libraries take away from the developer, although these pre-built components are in-fact also extremely useful and provide much functionality out of the box, it also brings rigidity.
In this quick launch application you will find all you need to code in your favorite framework, control the structure completely, you will be able to scaffold great apps in the least amount of time while still being able to express yourself creatively.
Important Notice:
The aim for this part of the document is to paint a picture of why we chose to bring these meshed up these libraries together. This section does not go into detail about what exactly is in and what is out. Please find the details of this in the features section.
The Platform
| Why Next.js | The world’s leading companies use and love Next.js | |
|---|---|---|
| Server Rendering | With Next.js, server rendering React applications has never been easier, no matter where your data is coming from. | |
| Static Exporting | No need to learn a new framework. Exporting a static site with Next.js is as easy as a single command. | |
| CSS in JS | Next.js comes with styled-jsx included, but it also works with every CSS-in-JS solution you know and love. | |
| Zero Setup | Automatic code splitting, filesystem based routing, hot code reloading and universal rendering. | |
| Fully Extendable | Complete control over Babel and Webpack. Customizable server, routing and next-plugins. | |
| Ready for production | Optimized for a smaller build size, faster dev compilation and dozens of other improvements. |
The Building Blocks
-
React
-
Declarative
React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.
Declarative views make your code more predictable and easier to debug.
-
Component-Based
Build encapsulated components that manage their own state, then compose them to make complex UIs.
Declarative views make your code more predictable and easier to debug.
-
Learn Once, Write Anywhere
We don’t make assumptions about the rest of your technology stack, so you can develop new features in React without rewriting existing code.
React can also render on the server using Node and power mobile apps using React Native.
The Style
-
-
Materialize is a simple CSS style library that makes creating ultra custom components material components using good old native HTML as JSX.
Speeds up development
We did most of the heavy lifting for you to provide a default stylings that incorporate our custom components. Additionally, we refined animations and transitions to provide a smoother experience for developers.
User Experience Focused
By utilizing elements and principles of Material Design, we were able to create a framework that incorporates components and animations that provide more feedback to users. Additionally, a single underlying responsive system across all platforms allow for a more unified user experience.
Easy to work with
We have provided detailed documentation as well as specific code examples to help new users get started. We are also always open to feedback and can answer any questions a user may have about Materialize.
Material Design
Created and designed by Google, Material Design is a design language that combines the classic principles of successful design along with innovation and technology. Google's goal is to develop a system of design that allows for a unified user experience across all their products on any platform.
Goals
-
Create
Create a visual language that synthesizes the classic principles of good design with the innovation and possibility of technology and science.
-
Unify
Develop a single underlying system that unifies the user experience across platforms, devices, and input methods.
-
Customize
Expand Material’s visual language and provide a flexible foundation for innovation and brand expression.
For more on material design please visit
The Legend Lives On
Why Bootstrap?
Bootstrap was really one of the greatest front end libraries that was made, before the days of material design and the rise of literally thousands of style libraries to help you make your site looked like it was made by google itself. There was bootstrap
By the time bootstrap 4 came out it was already a legacy library and material design slowly pushed it's way out of the spotlight.
Why include it then?
What had made Bootstrap 4 so special was its utilities classes, those classes that you would normally have to go and create from scratch to set the non visible aspects of your website/ application. Like for instance, instead setting your margins with a new css class you could simply use m-{1-5} or mr-{1-5} for right margin or ml-{1-5} and the same classes exist for padding, to do flexion has been provided for. The details of what has been included can be found by following [this link].
The best part
All parts of the library that gave it it's signature looked has been stripped away and what we sowed in here are all the parts that can never go out of fashion. Aside from the great utilities this library provided the most oustanding feature is the fact that all of these tools this great library provides makes the this app almost completely mobile responsive right out of ht box. This is where the legend lives on.
Markdown
Markdown is a lightweight markup language that you can use to add formatting elements to plaintext text documents. Created by John Gruber in 2004, Markdown is now one of the world’s most popular markup languages.
Using Markdown is different than using a WYSIWYG editor. In an application like Microsoft Word, you click buttons to format words and phrases, and the changes are visible immediately. Markdown isn’t like that. When you create a Markdown-formatted file, you add Markdown syntax to the text to indicate which words and phrases should look different.
For instance, to denote a heading, you add a number sign before it (e.g., # Heading One). Or to make a phrase bold, you add two asterisks before and after it (e.g., this text is bold). It may take a while to get used to seeing Markdown syntax in your text, especially if you’re accustomed to WYSIWYG applications.