Module for Base Elements.

sircus-elements | v2.0.0

Headdings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Paragraph

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

<p>...</p>

Links

navigation item #1
<a href="#">...</a>

Unordered list

  • Elements
  • Components
    • Container
    • Grid
      • Column
  • Tools
<ul>
  <li>...</li>
</ul>

Ordered list

  1. Elements
  2. Components
    1. Container
    2. Grid
      1. Column
  3. Tools
<ol>
  <li>...</li>
</ol>

Image

<img src="your-image.png">

Svg

<svg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'><path d='your-path'/></svg>

Install

npm install sircus-elements sircus-variables

CSS import

@import "sircus-elements";
@import "sircus-variables";

CSS

:root {
  --elementBody-fontFamily: var(--fontFamily);
  --elementBody-fontSize: var(--fontSize);
  --elementBody-lineHeight: var(--lineHeight);

  --elementHeading-weight: var(--fontWeight-bold);
  --elementHeading-marginTop: 1em;
  --elementHeading-marginBottom: .5em;
  --elementHeading-lineHeight: 1.2;
  --elementHeading-fontSize-h1: var(--fontSize-hg);
  --elementHeading-fontSize-h2: var(--fontSize-xl);
  --elementHeading-fontSize-h3: var(--fontSize-lg);
  --elementHeading-fontSize-h4: var(--fontSize-md);
  --elementHeading-fontSize-h5: var(--fontSize-sm);
  --elementHeading-fontSize-h6: var(--fontSize-xs);

  --elementLink-color: var(--primary);
  --elementLink-decoration: none;
  --elementLink-decoration-hover: underline;
  --elementLink-color-hover: var(--primary-dark);

  --elementsSpace-marginTop: 0;
  --elementsSpace-marginBottom: var(--space);
}

/*
 * sircus-elements
 ================================================== */
body {
  font-family: var(--elementBody-fontFamily);
  font-size: var(--elementBody-fontSize);
  line-height: var(--elementBody-lineHeight);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: var(--elementHeading-weight);
  line-height: var(--elementHeading-lineHeight);
  margin-top: var(--elementHeading-marginTop);
  margin-bottom: var(--elementHeading-marginBottom);
}

h1 { font-size: var(--elementHeading-fontSize-h1); }
h2 { font-size: var(--elementHeading-fontSize-h2); }
h3 { font-size: var(--elementHeading-fontSize-h3); }
h4 { font-size: var(--elementHeading-fontSize-h4); }
h5 { font-size: var(--elementHeading-fontSize-h5); }
h6 { font-size: var(--elementHeading-fontSize-h6); }

img,
svg {
  vertical-align: middle;
  max-width: 100%;
  height: auto;
}

img {
  display: inline-block;
}

a {
  color: var(--elementLink-color);
  text-decoration: var(--elementLink-decoration);
}

a:hover,
a:focus,
a:active {
  color: var(--elementLink-color-hover);
  text-decoration: var(--elementLink-decoration-hover);
}

p,
ul,
ol,
dl,
hr,
table,
fieldset,
figure,
blockquote,
pre {
  margin-top: var(--elementsSpace-marginTop);
  margin-bottom: var(--elementsSpace-marginBottom);
}