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

Port to PostCSS

parent fa966cef
......@@ -11,4 +11,6 @@ build
.conf
.ftpconfig
.sftpconfig
package-lock.json
\ No newline at end of file
package-lock.json
yarn.lock
.cache
\ No newline at end of file
{
"plugins": {
"autoprefixer": {
"grid": true,
"flexbox": true
},
"precss": true,
"postcss-calc": true,
"stylelint": true
}
}
\ No newline at end of file
......@@ -6,8 +6,6 @@ Aegis CSS library.
## Breakpoints
```css
/** Default Style. Don't change. (320px) **/
@media screen and (max-width: 20em) {}
/** Extra Small Devices, Phones (480px) **/
@media screen and (min-width : 30em) {}
......@@ -37,6 +35,8 @@ Aegis CSS library.
## Examples
* [Grid](examples/grid.html)
* [Hero Header](examples/hero.html)
* [Full Hero Header](examples/hero-full.html)
* [Transparent Hero Header](examples/hero-transparent.html)
## License
Kayros is released under the [MIT License](LICENSE)
\ No newline at end of file
This diff is collapsed.
This diff is collapsed.
<!DOCTYPE html>
<html>
<head>
<title>Kayros Circles</title>
<meta charset="UTF-8">
<meta name="viewport" container="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="./../dist/kayros.css">
<style>
.hero {
background: #000;
}
</style>
</head>
<body>
<header class="hero">
<div class="middle">
<div class="circle">
<div class="circle__content padded">
<b>Now, this is a nice circle!</b>
</div>
</div>
</div>
</header>
</body>
</html>
\ No newline at end of file
This diff is collapsed.
<!DOCTYPE html>
<html>
<head>
<title>Kayros Hero Header</title>
<meta charset="UTF-8">
<meta name="viewport" container="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="./../dist/kayros.css">
<style>
.hero {
background: #000;
}
</style>
</head>
<body>
<header class="hero hero--full">
<div class="hero__content">
<h1>This is a full height hero header</h1>
</div>
</header>
<div class="padded">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non euismod turpis. Aenean laoreet non ipsum ac aliquet. Fusce vehicula et tortor sed porta. Vestibulum metus ligula, pharetra et sem in, iaculis semper ex. Nullam accumsan porta augue. Maecenas leo lorem, feugiat ut pellentesque nec, mattis molestie ligula. Nunc metus lacus, fermentum non congue ut, dapibus pretium quam. Sed eu ultrices enim. Cras auctor turpis magna, ut sodales ex lacinia at. Donec mattis dapibus aliquet. Donec eget dui laoreet, congue diam sit amet, sollicitudin orci. Phasellus quis lobortis tortor. Sed sollicitudin, felis at rhoncus porta, sem augue hendrerit orci, et finibus nulla nulla nec ligula.
Sed varius tristique odio, non scelerisque elit pellentesque scelerisque. Duis nec luctus est, et malesuada massa. Maecenas volutpat suscipit nisl in tristique. Integer lectus sapien, vestibulum ac tempus a, fermentum a sapien. Nullam efficitur, purus et gravida blandit, eros nunc scelerisque magna, non condimentum lorem lectus vel eros. Fusce scelerisque, magna in sagittis varius, justo leo pretium neque, sit amet condimentum mauris sapien id urna. Ut pellentesque gravida justo nec euismod. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent volutpat eu dui sed bibendum. Donec quis ex nec nulla varius ullamcorper vel a elit. Mauris facilisis faucibus faucibus. Proin eros nibh, sollicitudin sit amet diam sed, dignissim porttitor justo. Vestibulum venenatis facilisis quam, ut scelerisque metus auctor et. Sed dapibus pellentesque lacus id iaculis. Morbi placerat maximus efficitur.
Nam condimentum posuere lectus. Etiam quis nibh a lacus condimentum mollis in vitae nibh. Quisque vitae hendrerit dolor, gravida rhoncus lacus. Quisque sit amet efficitur quam, et posuere libero. Aliquam tincidunt dui imperdiet faucibus egestas. Mauris vulputate dolor consectetur congue vulputate. Pellentesque aliquet eleifend tempor. Nulla facilisi. Ut tempus augue convallis varius consectetur. Sed turpis eros, efficitur vitae ipsum consectetur, finibus mollis tortor. Fusce lobortis tortor neque, quis interdum nulla pharetra id. Aliquam efficitur ultricies massa, vitae vulputate sapien consectetur et. Etiam neque lacus, sodales at elit vehicula, euismod pellentesque sapien. Pellentesque tincidunt congue auctor. Morbi faucibus elit tellus. Ut aliquam nunc sed congue efficitur.
Ut quis porttitor augue. Sed maximus pellentesque nulla ac ultrices. Sed est ipsum, volutpat vitae justo non, laoreet pellentesque neque. Maecenas ornare orci non elit hendrerit gravida. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras auctor feugiat laoreet. Vestibulum mattis gravida interdum. Nunc in vulputate purus. Etiam placerat lectus sit amet quam finibus faucibus. Sed nec euismod ipsum.
Sed consectetur nisi eget feugiat condimentum. Aliquam in imperdiet neque, vulputate mattis magna. Donec vehicula magna ut convallis pretium. Etiam nec massa nibh. Nulla facilisi. Aliquam at dignissim eros, non tempor mi. Mauris aliquam feugiat eros, vel varius enim mattis et. Aenean ut aliquam purus. Vestibulum sed egestas nibh, fringilla rhoncus eros. Quisque ullamcorper dui sapien, et vehicula ipsum vulputate a. Proin in convallis dui, sed convallis lorem.
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<title>Kayros Hero Header</title>
<meta charset="UTF-8">
<meta name="viewport" container="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="./../dist/kayros.css">
</head>
<body>
<header class="hero hero--transparent">
<div class="hero__content">
<h1>This is a hero header</h1>
</div>
</header>
<div class="padded">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non euismod turpis. Aenean laoreet non ipsum ac aliquet. Fusce vehicula et tortor sed porta. Vestibulum metus ligula, pharetra et sem in, iaculis semper ex. Nullam accumsan porta augue. Maecenas leo lorem, feugiat ut pellentesque nec, mattis molestie ligula. Nunc metus lacus, fermentum non congue ut, dapibus pretium quam. Sed eu ultrices enim. Cras auctor turpis magna, ut sodales ex lacinia at. Donec mattis dapibus aliquet. Donec eget dui laoreet, congue diam sit amet, sollicitudin orci. Phasellus quis lobortis tortor. Sed sollicitudin, felis at rhoncus porta, sem augue hendrerit orci, et finibus nulla nulla nec ligula.
Sed varius tristique odio, non scelerisque elit pellentesque scelerisque. Duis nec luctus est, et malesuada massa. Maecenas volutpat suscipit nisl in tristique. Integer lectus sapien, vestibulum ac tempus a, fermentum a sapien. Nullam efficitur, purus et gravida blandit, eros nunc scelerisque magna, non condimentum lorem lectus vel eros. Fusce scelerisque, magna in sagittis varius, justo leo pretium neque, sit amet condimentum mauris sapien id urna. Ut pellentesque gravida justo nec euismod. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent volutpat eu dui sed bibendum. Donec quis ex nec nulla varius ullamcorper vel a elit. Mauris facilisis faucibus faucibus. Proin eros nibh, sollicitudin sit amet diam sed, dignissim porttitor justo. Vestibulum venenatis facilisis quam, ut scelerisque metus auctor et. Sed dapibus pellentesque lacus id iaculis. Morbi placerat maximus efficitur.
Nam condimentum posuere lectus. Etiam quis nibh a lacus condimentum mollis in vitae nibh. Quisque vitae hendrerit dolor, gravida rhoncus lacus. Quisque sit amet efficitur quam, et posuere libero. Aliquam tincidunt dui imperdiet faucibus egestas. Mauris vulputate dolor consectetur congue vulputate. Pellentesque aliquet eleifend tempor. Nulla facilisi. Ut tempus augue convallis varius consectetur. Sed turpis eros, efficitur vitae ipsum consectetur, finibus mollis tortor. Fusce lobortis tortor neque, quis interdum nulla pharetra id. Aliquam efficitur ultricies massa, vitae vulputate sapien consectetur et. Etiam neque lacus, sodales at elit vehicula, euismod pellentesque sapien. Pellentesque tincidunt congue auctor. Morbi faucibus elit tellus. Ut aliquam nunc sed congue efficitur.
Ut quis porttitor augue. Sed maximus pellentesque nulla ac ultrices. Sed est ipsum, volutpat vitae justo non, laoreet pellentesque neque. Maecenas ornare orci non elit hendrerit gravida. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras auctor feugiat laoreet. Vestibulum mattis gravida interdum. Nunc in vulputate purus. Etiam placerat lectus sit amet quam finibus faucibus. Sed nec euismod ipsum.
Sed consectetur nisi eget feugiat condimentum. Aliquam in imperdiet neque, vulputate mattis magna. Donec vehicula magna ut convallis pretium. Etiam nec massa nibh. Nulla facilisi. Aliquam at dignissim eros, non tempor mi. Mauris aliquam feugiat eros, vel varius enim mattis et. Aenean ut aliquam purus. Vestibulum sed egestas nibh, fringilla rhoncus eros. Quisque ullamcorper dui sapien, et vehicula ipsum vulputate a. Proin in convallis dui, sed convallis lorem.
</div>
</body>
</html>
\ No newline at end of file
......@@ -8,7 +8,7 @@
<meta charset="UTF-8">
<meta name="viewport" container="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="../dist/kayros.css">
<link rel="stylesheet" href="./../dist/kayros.css">
<style>
.hero {
......@@ -20,9 +20,22 @@
<body>
<header class="hero">
<div class="middle">
<div class="hero__content">
<h1>This is a hero header</h1>
</div>
</header>
<div class="padded">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non euismod turpis. Aenean laoreet non ipsum ac aliquet. Fusce vehicula et tortor sed porta. Vestibulum metus ligula, pharetra et sem in, iaculis semper ex. Nullam accumsan porta augue. Maecenas leo lorem, feugiat ut pellentesque nec, mattis molestie ligula. Nunc metus lacus, fermentum non congue ut, dapibus pretium quam. Sed eu ultrices enim. Cras auctor turpis magna, ut sodales ex lacinia at. Donec mattis dapibus aliquet. Donec eget dui laoreet, congue diam sit amet, sollicitudin orci. Phasellus quis lobortis tortor. Sed sollicitudin, felis at rhoncus porta, sem augue hendrerit orci, et finibus nulla nulla nec ligula.
Sed varius tristique odio, non scelerisque elit pellentesque scelerisque. Duis nec luctus est, et malesuada massa. Maecenas volutpat suscipit nisl in tristique. Integer lectus sapien, vestibulum ac tempus a, fermentum a sapien. Nullam efficitur, purus et gravida blandit, eros nunc scelerisque magna, non condimentum lorem lectus vel eros. Fusce scelerisque, magna in sagittis varius, justo leo pretium neque, sit amet condimentum mauris sapien id urna. Ut pellentesque gravida justo nec euismod. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent volutpat eu dui sed bibendum. Donec quis ex nec nulla varius ullamcorper vel a elit. Mauris facilisis faucibus faucibus. Proin eros nibh, sollicitudin sit amet diam sed, dignissim porttitor justo. Vestibulum venenatis facilisis quam, ut scelerisque metus auctor et. Sed dapibus pellentesque lacus id iaculis. Morbi placerat maximus efficitur.
Nam condimentum posuere lectus. Etiam quis nibh a lacus condimentum mollis in vitae nibh. Quisque vitae hendrerit dolor, gravida rhoncus lacus. Quisque sit amet efficitur quam, et posuere libero. Aliquam tincidunt dui imperdiet faucibus egestas. Mauris vulputate dolor consectetur congue vulputate. Pellentesque aliquet eleifend tempor. Nulla facilisi. Ut tempus augue convallis varius consectetur. Sed turpis eros, efficitur vitae ipsum consectetur, finibus mollis tortor. Fusce lobortis tortor neque, quis interdum nulla pharetra id. Aliquam efficitur ultricies massa, vitae vulputate sapien consectetur et. Etiam neque lacus, sodales at elit vehicula, euismod pellentesque sapien. Pellentesque tincidunt congue auctor. Morbi faucibus elit tellus. Ut aliquam nunc sed congue efficitur.
Ut quis porttitor augue. Sed maximus pellentesque nulla ac ultrices. Sed est ipsum, volutpat vitae justo non, laoreet pellentesque neque. Maecenas ornare orci non elit hendrerit gravida. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras auctor feugiat laoreet. Vestibulum mattis gravida interdum. Nunc in vulputate purus. Etiam placerat lectus sit amet quam finibus faucibus. Sed nec euismod ipsum.
Sed consectetur nisi eget feugiat condimentum. Aliquam in imperdiet neque, vulputate mattis magna. Donec vehicula magna ut convallis pretium. Etiam nec massa nibh. Nulla facilisi. Aliquam at dignissim eros, non tempor mi. Mauris aliquam feugiat eros, vel varius enim mattis et. Aenean ut aliquam purus. Vestibulum sed egestas nibh, fringilla rhoncus eros. Quisque ullamcorper dui sapien, et vehicula ipsum vulputate a. Proin in convallis dui, sed convallis lorem.
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<title>Kayros Hero Header</title>
<meta charset="UTF-8">
<meta name="viewport" container="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="./../dist/kayros.css">
</head>
<body>
<div class="modal modal--active">
<div class="modal__content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non euismod turpis. Aenean laoreet non ipsum ac aliquet. Fusce vehicula et tortor sed porta. Vestibulum metus ligula, pharetra et sem in, iaculis semper ex. Nullam accumsan porta augue. Maecenas leo lorem, feugiat ut pellentesque nec, mattis molestie ligula. Nunc metus lacus, fermentum non congue ut, dapibus pretium quam. Sed eu ultrices enim. Cras auctor turpis magna, ut sodales ex lacinia at. Donec mattis dapibus aliquet. Donec eget dui laoreet, congue diam sit amet, sollicitudin orci. Phasellus quis lobortis tortor. Sed sollicitudin, felis at rhoncus porta, sem augue hendrerit orci, et finibus nulla nulla nec ligula.
Sed varius tristique odio, non scelerisque elit pellentesque scelerisque. Duis nec luctus est, et malesuada massa. Maecenas volutpat suscipit nisl in tristique. Integer lectus sapien, vestibulum ac tempus a, fermentum a sapien. Nullam efficitur, purus et gravida blandit, eros nunc scelerisque magna, non condimentum lorem lectus vel eros. Fusce scelerisque, magna in sagittis varius, justo leo pretium neque, sit amet condimentum mauris sapien id urna. Ut pellentesque gravida justo nec euismod. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent volutpat eu dui sed bibendum. Donec quis ex nec nulla varius ullamcorper vel a elit. Mauris facilisis faucibus faucibus. Proin eros nibh, sollicitudin sit amet diam sed, dignissim porttitor justo. Vestibulum venenatis facilisis quam, ut scelerisque metus auctor et. Sed dapibus pellentesque lacus id iaculis. Morbi placerat maximus efficitur.
Nam condimentum posuere lectus. Etiam quis nibh a lacus condimentum mollis in vitae nibh. Quisque vitae hendrerit dolor, gravida rhoncus lacus. Quisque sit amet efficitur quam, et posuere libero. Aliquam tincidunt dui imperdiet faucibus egestas. Mauris vulputate dolor consectetur congue vulputate. Pellentesque aliquet eleifend tempor. Nulla facilisi. Ut tempus augue convallis varius consectetur. Sed turpis eros, efficitur vitae ipsum consectetur, finibus mollis tortor. Fusce lobortis tortor neque, quis interdum nulla pharetra id. Aliquam efficitur ultricies massa, vitae vulputate sapien consectetur et. Etiam neque lacus, sodales at elit vehicula, euismod pellentesque sapien. Pellentesque tincidunt congue auctor. Morbi faucibus elit tellus. Ut aliquam nunc sed congue efficitur.
Ut quis porttitor augue. Sed maximus pellentesque nulla ac ultrices. Sed est ipsum, volutpat vitae justo non, laoreet pellentesque neque. Maecenas ornare orci non elit hendrerit gravida. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras auctor feugiat laoreet. Vestibulum mattis gravida interdum. Nunc in vulputate purus. Etiam placerat lectus sit amet quam finibus faucibus. Sed nec euismod ipsum.
Sed consectetur nisi eget feugiat condimentum. Aliquam in imperdiet neque, vulputate mattis magna. Donec vehicula magna ut convallis pretium. Etiam nec massa nibh. Nulla facilisi. Aliquam at dignissim eros, non tempor mi. Mauris aliquam feugiat eros, vel varius enim mattis et. Aenean ut aliquam purus. Vestibulum sed egestas nibh, fringilla rhoncus eros. Quisque ullamcorper dui sapien, et vehicula ipsum vulputate a. Proin in convallis dui, sed convallis lorem.
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<title>Kayros Hero Header</title>
<meta charset="UTF-8">
<meta name="viewport" container="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="./../dist/kayros.css">
<style>
.hero {
background: #000;
}
</style>
</head>
<body>
<nav class="card card--depth--2 nav nav--fixed nav--side nav-side--tablet nav--side-desktop nav--side--desktop-large">
<header class="nav__header">
<img src="https://aegisframework.com/img/icon.svg" class="nav__header__logo">
<h1 class="nav__header__title">Kayros Side Navigation</h1>
</header>
<ul class="nav__content-list">
<li class="nav__content-list__item"><img src="https://aegisframework.com/img/icon.svg"><a href="#">Some Item</a></li>
<li class="nav__content-list__item"><a href="#">Some Item</a></li>
<li class="nav__content-list__item"><a href="#">Some Item</a></li>
<li class="nav__content-list__item"><a href="#">Some Item</a></li>
<li class="nav__content-list__item"><a href="#">Some Item</a></li>
<li class="nav__content-list__item"><a href="#">Some Item</a></li>
<li class="nav__content-list__item"><a href="#">Some Item</a></li>
<li class="nav__content-list__item"><a href="#">Some Item</a></li>
<li class="nav__content-list__item"><a href="#">Some Item</a></li>
<li class="nav__content-list__item"><a href="#">Some Item</a></li>
<li class="nav__content-list__item"><a href="#">Some Item</a></li>
<li class="nav__content-list__item"><a href="#">Some Item</a></li>
<li class="nav__content-list__item"><a href="#">Some Item</a></li>
<li class="nav__content-list__item"><a href="#">Some Item</a></li>
<li class="nav__content-list__item"><a href="#">Some Item</a></li>
<li class="nav__content-list__item"><a href="#">Some Item</a></li>
<li class="nav__content-list__item"><a href="#">Some Item</a></li>
<li class="nav__content-list__item"><a href="#">Some Item</a></li>
<li class="nav__content-list__item"><a href="#">Some Item</a></li>
</ul>
</nav>
<div class="wrapper offset-sn-m offset-sn-l offset-sn-xl padded-1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non euismod turpis. Aenean laoreet non ipsum ac aliquet. Fusce vehicula et tortor sed porta. Vestibulum metus ligula, pharetra et sem in, iaculis semper ex. Nullam accumsan porta augue. Maecenas leo lorem, feugiat ut pellentesque nec, mattis molestie ligula. Nunc metus lacus, fermentum non congue ut, dapibus pretium quam. Sed eu ultrices enim. Cras auctor turpis magna, ut sodales ex lacinia at. Donec mattis dapibus aliquet. Donec eget dui laoreet, congue diam sit amet, sollicitudin orci. Phasellus quis lobortis tortor. Sed sollicitudin, felis at rhoncus porta, sem augue hendrerit orci, et finibus nulla nulla nec ligula.
Sed varius tristique odio, non scelerisque elit pellentesque scelerisque. Duis nec luctus est, et malesuada massa. Maecenas volutpat suscipit nisl in tristique. Integer lectus sapien, vestibulum ac tempus a, fermentum a sapien. Nullam efficitur, purus et gravida blandit, eros nunc scelerisque magna, non condimentum lorem lectus vel eros. Fusce scelerisque, magna in sagittis varius, justo leo pretium neque, sit amet condimentum mauris sapien id urna. Ut pellentesque gravida justo nec euismod. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent volutpat eu dui sed bibendum. Donec quis ex nec nulla varius ullamcorper vel a elit. Mauris facilisis faucibus faucibus. Proin eros nibh, sollicitudin sit amet diam sed, dignissim porttitor justo. Vestibulum venenatis facilisis quam, ut scelerisque metus auctor et. Sed dapibus pellentesque lacus id iaculis. Morbi placerat maximus efficitur.
Nam condimentum posuere lectus. Etiam quis nibh a lacus condimentum mollis in vitae nibh. Quisque vitae hendrerit dolor, gravida rhoncus lacus. Quisque sit amet efficitur quam, et posuere libero. Aliquam tincidunt dui imperdiet faucibus egestas. Mauris vulputate dolor consectetur congue vulputate. Pellentesque aliquet eleifend tempor. Nulla facilisi. Ut tempus augue convallis varius consectetur. Sed turpis eros, efficitur vitae ipsum consectetur, finibus mollis tortor. Fusce lobortis tortor neque, quis interdum nulla pharetra id. Aliquam efficitur ultricies massa, vitae vulputate sapien consectetur et. Etiam neque lacus, sodales at elit vehicula, euismod pellentesque sapien. Pellentesque tincidunt congue auctor. Morbi faucibus elit tellus. Ut aliquam nunc sed congue efficitur.
Ut quis porttitor augue. Sed maximus pellentesque nulla ac ultrices. Sed est ipsum, volutpat vitae justo non, laoreet pellentesque neque. Maecenas ornare orci non elit hendrerit gravida. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras auctor feugiat laoreet. Vestibulum mattis gravida interdum. Nunc in vulputate purus. Etiam placerat lectus sit amet quam finibus faucibus. Sed nec euismod ipsum.
Sed consectetur nisi eget feugiat condimentum. Aliquam in imperdiet neque, vulputate mattis magna. Donec vehicula magna ut convallis pretium. Etiam nec massa nibh. Nulla facilisi. Aliquam at dignissim eros, non tempor mi. Mauris aliquam feugiat eros, vel varius enim mattis et. Aenean ut aliquam purus. Vestibulum sed egestas nibh, fringilla rhoncus eros. Quisque ullamcorper dui sapien, et vehicula ipsum vulputate a. Proin in convallis dui, sed convallis lorem.
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<title>Kayros Hero Header</title>
<meta charset="UTF-8">
<meta name="viewport" container="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<link rel="stylesheet" href="./../dist/kayros.css">
<style>
.fa, .fas {
font-size: 120%;
}
</style>
</head>
<body>
<nav class="card card--depth--2 nav nav--fixed nav--top">
<header class="nav__header nav--top__header">
<img src="https://aegisframework.com/img/icon.svg" class="nav__header__logo nav--top__header__logo">
<h1 class="nav__header__title nav--top__header__title">Kayros Side Navigation</h1>
</header>
<ul class="nav__content-list">
<li class="nav__content-list__item"><a href="#"><img src="https://aegisframework.com/img/icon.svg" class="nav__content-list__item__icon"> Some Item</a></li>
<li class="nav__content-list__item"><a href="#"><i class="nav__content-list__item__icon fas fa-bell "></i>Some Item</a></li>
<li class="nav__content-list__item"><a href="#">Some Item</a></li>
<li class="nav__content-list__item"><a href="#">Some Item</a></li>
<li class="nav__content-list__item"><a href="#">Some Item</a></li>
<li class="nav__content-list__item"><a href="#">Some Item</a></li>
<li class="nav__content-list__item"><a href="#">Some Item</a></li>
<li class="nav__content-list__item"><a href="#">Some Item</a></li>
<li class="nav__content-list__item"><a href="#">Some Item</a></li>
<li class="nav__content-list__item"><a href="#">Some Item</a></li>
<li class="nav__content-list__item"><a href="#">Some Item</a></li>
<li class="nav__content-list__item"><a href="#">Some Item</a></li>
<li class="nav__content-list__item"><a href="#">Some Item</a></li>
<li class="nav__content-list__item"><a href="#">Some Item</a></li>
<li class="nav__content-list__item"><a href="#">Some Item</a></li>
<li class="nav__content-list__item"><a href="#">Some Item</a></li>
<li class="nav__content-list__item"><a href="#">Some Item</a></li>
<li class="nav__content-list__item"><a href="#">Some Item</a></li>
<li class="nav__content-list__item"><a href="#">Some Item</a></li>
</ul>
<i class="nav__menu-icon fas fa-bars"></i>
</nav>
<div class="wrapper wrapper--nav--top padded">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non euismod turpis. Aenean laoreet non ipsum ac aliquet. Fusce vehicula et tortor sed porta. Vestibulum metus ligula, pharetra et sem in, iaculis semper ex. Nullam accumsan porta augue. Maecenas leo lorem, feugiat ut pellentesque nec, mattis molestie ligula. Nunc metus lacus, fermentum non congue ut, dapibus pretium quam. Sed eu ultrices enim. Cras auctor turpis magna, ut sodales ex lacinia at. Donec mattis dapibus aliquet. Donec eget dui laoreet, congue diam sit amet, sollicitudin orci. Phasellus quis lobortis tortor. Sed sollicitudin, felis at rhoncus porta, sem augue hendrerit orci, et finibus nulla nulla nec ligula.
Sed varius tristique odio, non scelerisque elit pellentesque scelerisque. Duis nec luctus est, et malesuada massa. Maecenas volutpat suscipit nisl in tristique. Integer lectus sapien, vestibulum ac tempus a, fermentum a sapien. Nullam efficitur, purus et gravida blandit, eros nunc scelerisque magna, non condimentum lorem lectus vel eros. Fusce scelerisque, magna in sagittis varius, justo leo pretium neque, sit amet condimentum mauris sapien id urna. Ut pellentesque gravida justo nec euismod. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent volutpat eu dui sed bibendum. Donec quis ex nec nulla varius ullamcorper vel a elit. Mauris facilisis faucibus faucibus. Proin eros nibh, sollicitudin sit amet diam sed, dignissim porttitor justo. Vestibulum venenatis facilisis quam, ut scelerisque metus auctor et. Sed dapibus pellentesque lacus id iaculis. Morbi placerat maximus efficitur.
Nam condimentum posuere lectus. Etiam quis nibh a lacus condimentum mollis in vitae nibh. Quisque vitae hendrerit dolor, gravida rhoncus lacus. Quisque sit amet efficitur quam, et posuere libero. Aliquam tincidunt dui imperdiet faucibus egestas. Mauris vulputate dolor consectetur congue vulputate. Pellentesque aliquet eleifend tempor. Nulla facilisi. Ut tempus augue convallis varius consectetur. Sed turpis eros, efficitur vitae ipsum consectetur, finibus mollis tortor. Fusce lobortis tortor neque, quis interdum nulla pharetra id. Aliquam efficitur ultricies massa, vitae vulputate sapien consectetur et. Etiam neque lacus, sodales at elit vehicula, euismod pellentesque sapien. Pellentesque tincidunt congue auctor. Morbi faucibus elit tellus. Ut aliquam nunc sed congue efficitur.
Ut quis porttitor augue. Sed maximus pellentesque nulla ac ultrices. Sed est ipsum, volutpat vitae justo non, laoreet pellentesque neque. Maecenas ornare orci non elit hendrerit gravida. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras auctor feugiat laoreet. Vestibulum mattis gravida interdum. Nunc in vulputate purus. Etiam placerat lectus sit amet quam finibus faucibus. Sed nec euismod ipsum.
Sed consectetur nisi eget feugiat condimentum. Aliquam in imperdiet neque, vulputate mattis magna. Donec vehicula magna ut convallis pretium. Etiam nec massa nibh. Nulla facilisi. Aliquam at dignissim eros, non tempor mi. Mauris aliquam feugiat eros, vel varius enim mattis et. Aenean ut aliquam purus. Vestibulum sed egestas nibh, fringilla rhoncus eros. Quisque ullamcorper dui sapien, et vehicula ipsum vulputate a. Proin in convallis dui, sed convallis lorem.
</div>
</body>
</html>
\ No newline at end of file
@import './src/normalize.css';
@import './src/fixes.css';
@import './src/grid.css';
@import './src/hero.css';
@import './src/modal.css';
@import './src/alignment.css';
@import './src/spacing.css';
@import './src/navigation.css';
@import './src/form.css';
@import './src/circles.css';
@import './src/code.css';
@import './src/material-design.css';
\ No newline at end of file
{
"name": "kayros",
"version": "0.3.0",
"description": "Aegis CSS Library",
"main": "gulpfile.js",
"repository": {
"type": "git",
"url": "git+https://github.com/AegisFramework/Kayros.git"
},
"name": "@aegis-framework/kayros",
"version": "0.4.0",
"description": "Aegis framework CSS Library",
"homepage": "https://aegisframework.com/",
"author": "Diego Islas Ocampo",
"license": "MIT",
"keywords": [
"aegis",
"css",
"framework",
"kayros"
"kayros",
"library",
"style"
],
"author": "Diego Islas Ocampo",
"license": "MIT",
"repository": {
"type": "git",
"url": "git+https://gitlab.com/AegisFramework/Kayros.git"
},
"bugs": {
"url": "https://github.com/AegisFramework/Kayros/issues"
"url": "https://gitlab.com/AegisFramework/Kayros/issues"
},
"main": "./dist/kayros.min.css",
"files": [
"index.css",
"src/*",
"dist/*"
],
"scripts": {
"build": "parcel build index.css --out-file kayros.min.css --no-source-maps && parcel build index.css --out-file kayros.css --no-source-maps --no-minify && stylelint ./dist/kayros.css --fix"
},
"homepage": "http://aegisframework.com/",
"devDependencies": {
"gulp": "^3.9.1",
"gulp-concat": "^2.6.1",
"gulp-cssnano": "^2.1.2",
"gulp-header": "^1.8.8",
"gulp-rename": "^1.2.2"
"autoprefixer": "^8.6.2",
"parcel": "^1.9.0",
"postcss-calc": "^6.0.1",
"precss": "^3.1.2",
"stylelint": "^9.3.0"
}
}
\ No newline at end of file
}
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
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