DEV Community

Cover image for GMX.css: Create a simple layout
LIGMATV
LIGMATV

Posted on

GMX.css: Create a simple layout

Make a simple web page can be difficult, because a lot of ugly and unstyled components built in by browser. But of course, you can customize all of it with CSS. But styling can waste your times, makes you not serious about building applications.

GMX.css, an CSS framework that comnes with a lot of beautiful styled components with Material Design based, you can building your web apps many times easier and faster. This is how you can make an simple layout with GMX.css.

First, you need to import the CSS and Iconify Icon. We recommended to use the JSDelivr CDN.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/LIGMATV/gmx.css@main/gmx.css">
<script src="https://cdn.jsdelivr.net/npm/iconify-icon@2.1.0/dist/iconify-icon.min.js"></script>
Enter fullscreen mode Exit fullscreen mode

Second, we built the simple navigation. And also it was really responsive! In desktop, it will showed in left and vertical, meanwhille in mobile, it will showed in bottom and horizontal.

Third, built some container with typography and button. You can learn from here.

You now can built an simple web app with GMX.css. For more explore, visit the website to see the demos and examples of the elements you want to copy 👇🏻
https://ligmatv.is-a.dev/gmx.css/ (Source code)

Reinvent your career. Join DEV.

It takes one minute and is worth it for your career.

Get started

Top comments (0)

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay