Github Repo v1.0.1

CSS Boilerplate


Boilerplatce For new projects that are using the css-framework. Fully customize each component for your project.

Only contains styles for colors, background, container width and font.

/*
  CSS-Framework Boilerplate
  http://css-framework.io
*/

/* Colors */
:root {
  --primary-color: #0667d0;
  --lightGrey-color: #f5f7fa;
  --darkGrey-color: #3f4b58;
}

/* Typography */
body {
  background: #fff;
  color: #3f4b59;
  font-family: "Segoe UI", "Helvetica Neue", sans-serif;
}
a {
  color: #0466d6;
}

/* Grid */
.container {
  max-width: 1140px;
}

/* Default Buttons */
.button {
  background: var(--primary-color);
}
.button.primary {
  color: #fff;
  background: var(--primary-color);
}
.button.secondary {
  background: var(--darkGrey-color);
}

/* Outline Buttons */
.button.outline {
  background-color: transparent;
  border: 1px solid var(--lightGrey-color);
}
.button.outline.primary {
  border-color: var(--primary-color);
  color: var(--primary-color);
}
.button.outline.secondary {
  border-color: var(--darkGrey-color);
  color: var(--darkGrey-color);
}

/* Navbar */
.nav a,
.nav .brand {
  color: #555;
}

/* Tabs */
.tabs > a {
    color: #555;
    border-bottom: 2px solid var(--lightGrey-color);
}
.tabs > a.active,
.tabs > a:hover {
  opacity: 1;
  border-bottom: 2px solid #555;
}
.tabs > a.active {
  border-color: var(--primary-color);
}

/* Card Component */
.card {
  border-radius: 4px;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
}