Do you like Aguia and want to Tweet it, share it, or star it?
Well, I appreciate that
INTRODUCTION
that offers a starting point in which you won't need to fight with the unnecessary default styles of other frameworks. With this tool you will be able to organize your code using the ABEM methodology that you can customize as never before.
or npm i @devler/aguia-css
Only ~ 75 kb built with Mobile First Design in mind.
Styles designed for flexibility and quality, not a user interface framework.
Quick start with no need of compiling and installing. No JS, no Third party libraries.
THE LAYOUT
The default grid is a twelve column fluid grid.
You can use a o-container or -contianer css class which add a with of 1366px that shrinks with the browser or device at smaller sizes. The max width can be changed with the variable CSS --container-size and all columns will resize according to it.
-col-12
-col-1
-col-11
-col-2
-col-10
-col-3
-col-9
-col-4
-col-8
-col-5
-col-7
-col-6
-col-6
To use the -col- modifier it is not necessary to have a parent modifier of -display-row type
but you can use the modifier -display-row to display the columns as a Flex-box row.
<div class="-display-row">
<div class="-col-1">
<p>-col-1</p>
</div>
<div class="-col-11">
<p>-col-11</p>
</div>
</div>
THE RESPONSIVE
Aguia uses media queries to serve its scalable layout.
In the same way as other frameworks it have a different prefix by media query which could be used as prefix of any modifier class.
Go ahead, resize the browser.
-xl-col-1
-lg-col-2
-ip-col-3
-md-col-4
-sm-col-5
-xsm-col-6
-col-7
-xl-col-11
-lg-col-10
-ip-col-9
-md-col-8
-sm-col-7
-xsm-col-6
-col-5
-col-12
The media queries prefixes can be used as a prefix of any Aguia modifiers class.
In this block of code we use the prefixes to change the display and column size.
<div class="-display-row">
<div class="-col-7 -xsm-col-6 -sm-col-5 -md-col-4 -ip-col-3 -lg-col-2 -xl-col-1">
<p class="-display-none -xl-display-block"> -xl-col-1 </p>
<p class="-display-none -lg-display-block -xl-display-none"> -lg-col-2 </p>
...
</div>
<div class="-col-5 -xsm-col-6 -sm-col-7 -md-col-8 -ip-col-9 -lg-col-10 -xl-col-11">
<p class="-display-none -xl-display-block"> -xl-col-11 </p>
<p class="-display-none -lg-display-block -xl-display-none"> -lg-col-10 </p>
...
</div>
</div>
List of media queries:
-xsm- prefix-sm- prefix-md- prefix-ip- prefix-lg- prefix-xl- prefix
/** Mobile first queries **/
/* Large than mobile */
@media (min-width: 375px) {}
/* Large than phablet */
@media (min-width: 480px) {}
/* Large than tablet */
@media (min-width: 640px) {}
/* Large than iPad or Desktop */
@media (min-width: 1023px) {}
/* Large than Desktop HD */
@media (min-width: 1366px) {}
/* Large than Desktop Full HD */
@media (min-width: 1920px) {}
THE MODIFIERS
Aguia has a lot of simple classes ready to use. This classes work as helpers to make the responsive a lite easier.
Sometimes it's better to use a utility class rather than create a whole new class just to float an element.
The -wrap modifier breaks the row when it gets the maximum number of columns.
Resize the browser to see the effect.
-lg-col-4
-ip-col-6
-col-12
-lg-col-4
-ip-col-6
-col-12
-lg-col-4
-col-12
<div class="-display-row -wrap">
<div class="-col-12 -ip-col-6 -lg-col-4">
<!-- -->
</div>
<div class="-col-12 -ip-col-6 -lg-col-4">
<!-- -->
</div>
<div class="-col-12 -lg-col-4">
<!-- -->
</div>
</div>
By default the grid doesn't have a gutter but to space the columns Aguia has the modifier -gap which adds a gap o .75rem between columns.
-col-12
-col-1
-col-11
-col-2
-col-10
-col-3
-col-9
-col-4
-col-8
-col-5
-col-7
-col-6
-col-6
It must be used at the same level of -display-row or -display-row-reverse
<div class="-display-row -gap">
<div class="-col-1">
<p>-col-1</p>
</div>
<div class="-col-11">
<p>-col-11</p>
</div>
</div>
-gap and -wrap modifiers-lg-col-4
-ip-col-6
-col-12
-lg-col-4
-ip-col-6
-col-12
-lg-col-4
-col-12
<div class="-display-row -gap -wrap">
<div class="-col-12 -ip-col-6 -lg-col-4">
<!-- -->
</div>
<div class="-col-12 -ip-col-6 -lg-col-4">
<!-- -->
</div>
<div class="-col-12 -lg-col-4">
<!-- -->
</div>
</div>
Easily realign text to components with text alignment classes.
-text-left
-text-center
-text-right
Quickly manage the layout direction and alignment with a full suite of responsive flexbox utilities.
Use align-items utilities on flexbox containers to change the alignment of flex items on the cross axis (the y-axis to start, x-axis if flex-direction: column).
Choose from start, end, center, baseline, or stretch (browser default).
-align-start
-align-start
-align-center
-align-center
-align-end
-align-end
Use justify-content utilities on flexbox containers to change the alignment of flex items on the main axis (the x-axis to start, y-axis if flex-direction: column).
Choose from start, end, center, etc.
-justify-start
-justify-start
-justify-center
-justify-center
-justify-end
-justify-end
-justify-around
-justify-around
-justify-around
-justify-between
-justify-between
-justify-between
Other flex-box modifiers are:
In addition to the modifiers displayed, you can also use other basic modifiers that make responsive easier.
Float modifiers:
Position modifiers:
Padding:
Margin:
Padding and margin modifiers modify their property with a default size of .75rem * n.
Where n is a number from 0 to twice the grid columns.