Skip to content

Instantly share code, notes, and snippets.

@mooror

mooror/_link.scss

Created November 20, 2018 00:29
Show Gist options
  • Save mooror/bb32882fcd09151b0c6f866e04f6118d to your computer and use it in GitHub Desktop.
Save mooror/bb32882fcd09151b0c6f866e04f6118d to your computer and use it in GitHub Desktop.
Download ZIP
Iota Css Example Code - Link component file for those who are following along with the "Link Component" iota CSS Tutorial
Raw
_link.scss
.c-link{
text-decoration: none;
color:inherit;
}
.c-link:hover{
opacity: 0.8;
}
Raw
_weight.scss
// Change this
$iota-utils-weight-sizes: ();
// To this
$iota-utils-weight-sizes: (
"bold": 700
);
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Getting started with iotaCSS</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<!-- Header Section -->
<header class="u-bgcolor-purple u-color-white u-p-x3 u-weight-bold">
<div class="o-container o-container--size-small">
<div class="o-media o-media--middle o-media--res">
<div class="o-media__fixed u-text-left u-text-center@sm">
<img src="svg/logo.svg" alt="Logo" class="logo">
</div>
<div class="o-media__fluid u-text-center u-text-right@sm">
<nav>
<ul class="o-list o-list--inline o-list--gutter-x4">
<li class="o-list__item">
<a class="c-link" href="#">Dashboard</a>
</li>
<li class="o-list__item">
<a class="c-link" href="#">My Account</a>
</li>
<li class="o-list__item">
<a class="c-link" href="#">Sign Out</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</header>
</body>
</html>
Raw
main.scss
//..
@import 'components/link';
//..
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment