Along with the development of the world of technology, especially websites, many tools have been born that make it easier for developers to create projects according to what they want, the website is composed of many aspects from the back end or front end that make our website powerful, this time I will discuss front-end end about CSS frameworks.
CSS or Cascading Style Sheet is a collection of program code that functions to arrange elements in a markup language, CSS itself is used to design our Frontend appearance to make it attractive from creating sections, forms, columns, buttons, etc. In basic website introduction, of course we will be dealing directly with this CSS, when we want to make the front view of our website attractive, we ourselves make the markup code as desired, but sometimes by making our own CSS code, more and more time is taken up, where is the time? we can use it for other purposes such as making a back-end for example.
As this industry grows, CSS Frameworks are needed to save developer time, the admin has summarized several CSS Frameworks that you can try to make your website look attractive and modern. But are there other alternatives besides Bootstrap that I can use, you can use other CSS Frameworks such as Tailwind CSS, Pure CSS, Materialize CSS and others, let's discuss one by one.
1. Materialize CSS
In the midst of the many CSS Frameworks that have emerged, one of which has caught the attention of developers is the release of Materialize CSS in 2014 by Google, initially Materialize was only intended for Android, but over time, many other developers are using this CSS Framework because of its modern and modern appearance. its easy to use.
With this Materialize Framework, you can create responsive webs or create parallax, on their official website materializecss.com, complete documentation has been prepared and downloaded for offline use, there are features or code contained in Materialize Design, you just copy Paste the code to use it on your website. There is also a showcase of websites that use this Framework, you can use it as a reference, and the documentation explains how to use materialize step by step.
Materialize itself already includes the SASS mixin, in the case of using animation, for example in the SASS syntax
-webkit-animation: 0.5s;
-moz-animation: 0.5s;
-o-animation: 0.5s;
-ms-animation: 0.5s;
animaton: 0.5s; In SASS Mixin which can be called with one line only.
@include animation(.5s); To use Materialize you can use SASS as well.
2. Tailwind CSS
On the official website, Tailwind CSS is a CSS framework that is utility-first to create website designs quickly, Tailwind CSS offers simple but powerful features, sometimes there are other CSS Frameworks that provide redundant components such as cards, alerts, forms, etc. Initially, in making the design of these components, it was very helpful at the beginning. In this case, the problem arises when we want to make a special design according to our wishes, of course by making major changes to the components that have a lot of impact on high effort and time consuming.
Tailwind is very different, tailwind provides pre-designed components and also provides a low-level utility which we can use for overall design. Tailwind provides small classes that are very flexible to create the appearance you want without the need to override styles like most frameworks.
What are the advantages of the Tailwind framework? when compared to other CSS frameworks, tailwind is a simple framework, most other frameworks already provide pre-designed components, in using tailwind you only focus on one HTML without the need to move to another file, what distinguishes tailwind from other frameworks is the use of classes.
Other frameworks:
<button class="button">button</button> Tailwind Framework:
<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded">button</button> Tailwind classes have their own properties, where bg-blue-500 is the value of the background color used, text-white is the text color that has a value of color: white; font-bold which contains the font-weight property value, py-2 and px-4 is the vertical and horizontal padding and rounded is the border-radius property.
In addition, the Tailwind feature is responsive and customable, the utility contained in Tailwind has a responsive type that makes it easy for developers to create a responsive front-end without the need for special CSS code and also Tailwind can be customized, can adjust various colors, sizes, font sizes. and others. To avoid conflicts on class names, tailwind provides a configuration file that can specify the utility class to use.
3. Pure CSS
Some of you may or may not know about this CSS framework, namely Pure CSS, Pure CSS is a responsive yahoo framework that offers a minimalist look, flexible alternatives and good documentation. This framework offers features in its framework.
- Customizable, responsive
- Flexible forms
- Built-in menus (vertical, horizontal)
- Clean, minimalist
- Have advanced SEO Optimization
- Free
In its use into your website, you can use it via the Yahoo CDN.
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css"> The advantage of this Pure CSS framework is that the file size is very small, only less than 4.5kb for the minified version, Pure CSS has been tested in various browsers such as IE 8+, Firefox, Chrome, Safari, IOS, Android, pure is made in normalize.css which supports standard frameworks in browsers.
4. Semantic UI
Semantic UI is a CSS Framework that focuses on using a modern front-end design, complete Semantic features and is also responsive to many UI components and themes, which you can use and develop into your website.
The features provided include easy use of classes where developers can remember the classes used easily and are also rich in the themes and components needed, by default the semantic components look very neat compared to other css frameworks. The framework created by Jack Lukic has become very popular because of the customization and abundant themes in it.
Semantic UI creates customizable class code and its writing can also be made in the language you usually use so that when it will be customized it will be easier. To connect it to your website, download the required files at https://semantic-ui.com/introduction/getting-started.html and add the jQuery support code.
<link rel="stylesheet" type="text/css" href="semantic/semantic.min.css">
<script src="semantic/semantic.min.js"></script>
5. Zurb Foundation
Zurb Foundation can be your other choices, released around 1998 under the auspices of the MIT license, Zurb Foundation is an open source based on SASS, the features offered by the Foundation present components or elements that are modern, responsive design and easy to use for you to customize.
This framework provides various templates with slick designs, some big companies like Adobe, Amazon use CSS foundation in some of their digital products.
1. Compatible in various browsers
Zurb Foundation is very good if run in a variety of browsers, developers who use the Framework do not need to worry when the user accesses with an older version of the browser because it can work well.
2. Excellent performance
In performance, this CSS Framework has good performance, problems that occur can be minimized with regular updates.
3. Responsive design and e-mail design
Zurb Foundation already supports responsiveness in their designs for websites, emails, etc. with good optimization on each device. Zurb Foundation also offers an Email Framework which is quite slick, can create email designs with a modern and classy look. There are 2 ways to use the this framework, you can use the offline method and CDN, for offline you can download on their website: https://get.foundation extract then call it into your HTML by entering the code:
<link rel="stylesheet" href="css/foundation.css" />
<script src="foundation.min.js"></script> Or by using the CDN method, you can add the following code:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css" integrity="sha256-itWEYdFWzZPBG78bJOOiQIn06QCgN/F0wMDcC4nOhxY=" crossorigin= "anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/js/foundation.min.js" integrity="sha256-Nd2xznOkrE9HkrAMi4xWy/hXkQraXioBg9iYsBrcFrs=" crossorigin="anonymous">< /script>
Conclusion
Many other CSS frameworks besides Bootstrap offer many features or modern designs and are easy to use for the convenience of front-end developers that you can try and learn.
