This website is not optimized for mobile view yet...
// Layout

.display-flex {
    display: flex;
}

.display-grid {
    display: grid;
}
// Typography

.font-size-16 {
    font-size: 1.6rem;
}

.font-size-20 {
    font-size: 2.0rem;
}
// Whitespace

.margin-24 {
    margin: 2.4rem;
}

.margin-center {
    margin: 0 auto;
}

Amigo CSS

// Shortcuts

.display-flex-center-both {
    display: flex;
    align-items: center;
    justify-content: center;
}



// Extras

.scroll-smooth {
    scroll-behaviour: smooth;
}
.cursor-pointer {
    cursor: pointer;
}

  
 

 

Philosophy

If there is one thing special about Amigo CSS is its philosophy. Amigo CSS philosophy is based on primarily two things:

1. Using a custom class (and hence custom-first). It can be any class name you prefer

2. Using a maximum of seven utility classes per element (You can use less or even none, but a maximum is seven)

1 Custom Class
7 Utility Classes

Before diving deep into the philosophy, let's see exactly what we mean when we say Amigo CSS is a simple, custom-first and intuitive framework for CSS lovers


Simple — Amigo CSS is simple in the way that it's super easy to get started just like you will see soon. It uses plain vanilla CSS and it has absolutely no single line of JavaScript code.


Custom-first — Based on its philosophy, Amigo CSS is "custom-first". I believe I may have coined this term in response to utility-first. Amigo CSS uses utility classes but according to its philosophy it's not utility-first, it's custom-first. It's neither component-first too, it's custom-first. Whatever a developer decides to do with that custom class, that is their choice.

What's custom first? Custom-first is a custom css class made by a developer. In Amigo CSS a first class in any element 'has' to be a custom class. It's actually not a must...but it's recommended if you have a custom class that class has to be first then followed by the utility classes. Do you really need to have a custom class? No! You don't ...Again it's a philosophy.


Intuitive — Amigo CSS took an easier and intuitive approach in naming its classes. Can you take a guess what these classes do: .display-flex, .display-grid, .font-size-16, How about .margin-center? You get the point.


CSS Lovers — Amigo CSS is for those people who love CSS and love to write CSS code. As you will come to see you need to have some knowledge...whatever little it may be of CSS to be able to enjoy Amigo CSS. This framework is for all the CSS lovers out there!

Method to the Madness

There are very good reasons behind the philosophy of Amigo CSS. In this section hopefully I will be able to justify some by giving examples:


Just like we saw above, Amigo CSS takes a custom-first approach. So, you may ask, why custom-first?


Great question. Amigo CSS being a simple CSS framework doesn't come parked with all the CSS properties out there. There is a select few properties that are included in the core of Amigo CSS. And this is mainly to make things simple just as Amigo CSS prides itself to be. The use of a custom-first class is so as to allow developers to add their own CSS code that may be missing from Amigo CSS.


Even more important, Amigo CSS doesn't come built in with mobile responsiveness. That was also done in purpose. If Amigo CSS included utility classes that cover mobile responsiveness, the HTML mockup would be so busy...something I intentionally wanted to avoid. So yes, you have to make your own styling when it comes to responsive web design and it's in here that our custom-first class will come handy.


In line with that, Amigo CSS doesn't come parked with pseudo classes like hover, active, etc. You have to write those yourself too. Again, that was also done intentionally.


You will see when you start using Amigo CSS that all classes are intuitive. You can easily see what a class does by just looking at it, you don't have to dig deep. It makes the CSS framework so much easier especially for beginners, they can fast memories all the class names without having to visit the documentation every time. But with that came the trade off of having long class names like .flex-basis-20-percent


This page is becoming too long. Without the risky of being too philosophical here, please go to the section of examples to see Amigo CSS in action and to understand more of its philosophical underpinnings. (I will make that section very soon)