Commit bb5ff0de authored by Diego Islas Ocampo's avatar Diego Islas Ocampo

Simplify grid column selector

parent 07ae1f50
# Kayros
Aegis CSS library.
Kayros is a simple CSS library featuring common utyilities such as CSS normalization, a grid system and common components such as modal windows, hero headers and even global page navigation.
Kayros is built using [PostCSS](https://postcss.org/) and follows [BEM](http://getbem.com/introduction/) conventions.
## Breakpoints
```css
/** Extra Small Devices, Phones (480px) **/
@media screen and (min-width : 30em) {}
/** Medium Screens, Tablets (601px) **/
/** Medium Screens, Phablets (601px) **/
@media screen and (min-width: 37.56255em) {}
/** Medium Devices, Desktops (992px)**/
/** Medium Devices, Tablets (992px)**/
@media screen and (min-width: 62em) {}
/** HD Screen, Large Devices, Wide Screens (1200px) **/
/** HD Screen, Large Devices, Wide Screens, Desktop (1200px) **/
@media screen and (min-width: 75em) {}
/** Full HD Screen, Large Devices, Wide Screens (1920px) **/
/** Full HD Screen, Large Devices, Wide Screens, Large Desktops (1920px) **/
@media screen and (min-width: 120em) {}
/** Retina Screen , Large Devices, Wide Screens(2560px) **/
......@@ -28,8 +29,11 @@ Aegis CSS library.
/** 4k Screens, Large Devices, Wide Screens (3840px) **/
@media screen and (min-width: 240em) {}
/** 5k Screens, Large Devices, Wide Screens (5120px) **/
@media screen and (min-width: 320em) {}
/** 5k Screens, Large Devices, Wide Screens (5000px) **/
@media screen and (min-width: 312.5em) {}
/** 8k Screens, Large Devices, Wide Screens (8000px) **/
@media screen and (min-width: 500em) {}
```
## Examples
......@@ -37,6 +41,14 @@ Aegis CSS library.
* [Hero Header](examples/hero.html)
* [Full Hero Header](examples/hero-full.html)
* [Transparent Hero Header](examples/hero-transparent.html)
* [Side Navigation](examples/side-navigation.html)
* [Top Navigation](examples/top-navigation.html)
* [Modal Windows](examples/modal.html)
* [Circles](examples/circles.html)
## Projects used
Here are some of the other projects used in Kayros:
* [Normalize.css](https://necolas.github.io/normalize.css/)
## License
Kayros is released under the [MIT License](LICENSE)
\ No newline at end of file
This diff is collapsed.
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -255,166 +255,166 @@
</div>
</div>
</div>
<div class="row">
<div class="row--spaced__column row--spaced__column--12">
<div class="row row--spaced">
<div class="row__column row__column--12">
<div class="container">
Column s12
</div>
</div>
<div class="row--spaced__column row--spaced__column--6">
<div class="row__column row__column--6">
<div class="container">
Column s6
</div>
</div>
<div class="row--spaced__column row--spaced__column--6">
<div class="row__column row__column--6">
<div class="container">
Column s6
</div>
</div>
<div class="row--spaced__column row--spaced__column--4">
<div class="row__column row__column--4">
<div class="container">
Column s4
</div>
</div>
<div class="row--spaced__column row--spaced__column--4">
<div class="row__column row__column--4">
<div class="container">
Column s4
</div>
</div>
<div class="row--spaced__column row--spaced__column--4">
<div class="row__column row__column--4">
<div class="container">
Column s4
</div>
</div>
<div class="row--spaced__column row--spaced__column--3">
<div class="row__column row__column--3">
<div class="container">
Column s3
</div>
</div>
<div class="row--spaced__column row--spaced__column--3">
<div class="row__column row__column--3">
<div class="container">
Column s3
</div>
</div>
<div class="row--spaced__column row--spaced__column--3">
<div class="row__column row__column--3">
<div class="container">
Column s3
</div>
</div>
<div class="row--spaced__column row--spaced__column--3">
<div class="row__column row__column--3">
<div class="container">
Column s3
</div>
</div>
<div class="row--spaced__column row--spaced__column--2">
<div class="row__column row__column--2">
<div class="container">
Column s2
</div>
</div>
<div class="row--spaced__column row--spaced__column--2">
<div class="row__column row__column--2">
<div class="container">
Column s2
</div>
</div>
<div class="row--spaced__column row--spaced__column--2">
<div class="row__column row__column--2">
<div class="container">
Column s2
</div>
</div>
<div class="row--spaced__column row--spaced__column--2">
<div class="row__column row__column--2">
<div class="container">
Column s2
</div>
</div>
<div class="row--spaced__column row--spaced__column--2">
<div class="row__column row__column--2">
<div class="container">
Column s2
</div>
</div>
<div class="row--spaced__column row--spaced__column--2">
<div class="row__column row__column--2">
<div class="container">
Column s2
</div>
</div>
<div class="row--spaced__column row--spaced__column--1">
<div class="row__column row__column--1">
<div class="container">
Column s1
</div>
</div>
<div class="row--spaced__column row--spaced__column--1">
<div class="row__column row__column--1">
<div class="container">
Column s1
</div>
</div>
<div class="row--spaced__column row--spaced__column--1">
<div class="row__column row__column--1">
<div class="container">
Column s1
</div>
</div>
<div class="row--spaced__column row--spaced__column--1">
<div class="row__column row__column--1">
<div class="container">
Column s1
</div>
</div>
<div class="row--spaced__column row--spaced__column--1">
<div class="row__column row__column--1">
<div class="container">
Column s1
</div>
</div>
<div class="row--spaced__column row--spaced__column--1">
<div class="row__column row__column--1">
<div class="container">
Column s1
</div>
</div>
<div class="row--spaced__column row--spaced__column--1">
<div class="row__column row__column--1">
<div class="container">
Column s1
</div>
</div>
<div class="row--spaced__column row--spaced__column--1">
<div class="row__column row__column--1">
<div class="container">
Column s1
</div>
</div>
<div class="row--spaced__column row--spaced__column--1">
<div class="row__column row__column--1">
<div class="container">
Column s1
</div>
</div>
<div class="row--spaced__column row--spaced__column--1">
<div class="row__column row__column--1">
<div class="container">
Column s1
</div>
</div>
<div class="row--spaced__column row--spaced__column--1">
<div class="row__column row__column--1">
<div class="container">
Column s1
</div>
</div>
<div class="row--spaced__column row--spaced__column--1">
<div class="row__column row__column--1">
<div class="container">
Column s1
</div>
......
......@@ -13,7 +13,7 @@ $breakpoints: (
desktop: 1200px,
desktop-large: 1900px,
retina: 2500px,
4k: 4000px,
4k: 3840px,
5k: 5000px,
8k: 8000px
);
......@@ -34,7 +34,7 @@ $breakpoints: (
justify-content: center;
}
.row--spaced__column {
.row--spaced > .row__column {
margin: 0.75rem;
}
......@@ -85,11 +85,11 @@ $breakpoints: (
margin-left: calc((100% * $col) / 12);
}
.row--spaced__column--$col {
.row--spaced > .row__column--$col {
width: calc(((100% * $col) / 12) - $grid-glutter);
}
.row--spaced__column--offset--$col {
.row--spaced > .row__column--offset--$col {
width: calc((100% * $col) / 12);
margin-left: calc(((100% * $col) / 12) - $grid-glutter);
}
......@@ -109,11 +109,11 @@ $breakpoints: (
margin-left: calc((100% * $col) / 12);
}
.row--spaced__column--$(key)--$col {
.row--spaced > .row__column--$(key)--$col {
width: calc(((100% * $col) / 12) - $grid-glutter);
}
.row--spaced__column--offset--$(key)--$col {
.row--spaced > .row__column--offset--$(key)--$col {
width: calc((100% * $col) / 12);
margin-left: calc(((100% * $col) / 12) - $grid-glutter);
}
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment