• Stars
    star
    137
  • Rank 266,121 (Top 6 %)
  • Language
    HTML
  • License
    MIT License
  • Created over 5 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A css-based web components.

flamescss 🔥 🔥 🔥

A css-based web components made with Andela in-house project in mind. It's separated into components, just pick what you need and keep tweaking it till you get what you want or till you destroy it and probably have to re-write it yourself. 😆 The flexibility that comes with flames.css is near perfect. You can pick what you need, either the layout styles or the navbar styles or the buttons and use it. You don't need to leave it as flames.css, you can rename it to styles.css, just modify it however you like, it's all about you. And one more thing, there is no file like flames.css, don't make it look like you are using a framework, it's not a framework, it's a UI store. 👦 👧 .

Style Guide

The current style guide. It's currently been worked on. Current Style Guide

Hero

Current Style Guide

what you really need

html {
  box-sizing: border-box;
  background-color: #fff;
  font-size: 16px;
  min-width: 300px;
  overflow-x: hidden;
  overflow-y: scroll;
  text-rendering: optimizeLegibility;
  text-size-adjust: 100%; 
}

*, *::before, *::after { box-sizing: inherit; }

Typography


style your anchor tag with sweet colors to override the default colors

a {
  color: #3273dc;
  cursor: pointer;
  text-decoration: none; 
}
a:hover {
  color: #363636; 
}

override default paddings and margins for header tags like h1,h2,h3,h4,h5,h6

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0.5rem; 
}

The paragraph tag, ordered list(ol), unordered list(ul)

p, ol, ul, dl {
  margin-top: 0;
  margin-bottom: 1rem; 
}

Layout

  .container {
    width: 100%;
    padding: 0 0.9375rem;
    margin: 0 auto;
    position: relative;
  }

  .container-fluid {
    padding: 0 0.9375rem;
  }

  @media (min-width: 75rem) {
    .container {
      width: 71.25rem;
    }
  }

  .columns {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -0.9375rem;
  }

  @media (min-width: 576px) {
    .container {
      max-width: 540px;
    }
  }

  @media (min-width: 768px) {
    .container {
      max-width: 720px;
    }
  }

  @media (min-width: 992px) {
    .container {
      max-width: 960px;
    }
  }

  @media (min-width: 1200px) {
    .container {
      max-width: 1140px;
    }
  }

  .col-1,.col-2, .col-3, .col-4, .col-5, .col-6, .col-7,
  .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-auto
  {
    position: relative;
    width: 100%;
    padding: 0 15px;
  }

  @media (min-width: 768px) {
    .col {
      flex-basis: 0;
      flex-grow: 1;
      max-width: 100%;
    }

    .col-auto {
      flex: 0 0 auto;
      width: auto;
      max-width: 100%;
    }

    .col-1 {
      flex: 0 0 8.333333%;
      max-width: 8.333333%;
    }

    .col-2 {
      flex: 0 0 16.666667%;
      max-width: 16.666667%;
    }

    .col-3 {
      flex: 0 0 25%;
      max-width: 25%;
    }

    .col-4 {
      flex: 0 0 33.333333%;
      max-width: 33.333333%;
    }

    .col-5 {
      flex: 0 0 41.666667%;
      max-width: 41.666667%;
    }

    .col-6 {
      flex: 0 0 50%;
      max-width: 50%;
    }

    .col-7 {
      flex: 0 0 58.333333%;
      max-width: 58.333333%;
    }

    .col-8 {
      flex: 0 0 66.666667%;
      max-width: 66.666667%;
    }

    .col-9 {
      flex: 0 0 75%;
      max-width: 75%;
    }

    .col-10 {
      flex: 0 0 83.333333%;
      max-width: 83.333333%;
    }

    .col-11 {
      flex: 0 0 91.666667%;
      max-width: 91.666667%;
    }

    .col-12 {
      flex: 0 0 100%;
      max-width: 100%;
    }

  }

Buttons

.button {
  display: inline-block;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  user-select: none;
  border: 1px solid transparent;
  padding: 0.625rem 1.25rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: .25rem;
  cursor: pointer;
}

.button:focus {
  outline: none;
}

.button-dark {
  color: $light-grey;
  background-color: $color-black;
}
.button-dark:hover {
  background-color: $mid-black;
}

.button-rectangle {
  border-radius: 0;
}

.button-rounded {
  border-radius: 30px;
}

Forms

.input-field {
  display: block;
  max-width: 100%;
  width: 100%;
  padding: 0.625rem .75rem;
  font-size: 1rem;
  line-height: 1.6;
  color: $mid-black;
  background-color: #fff;
  background-clip: padding-box;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.input-field:focus {
  outline: none;
  border-color: rgba(42, 131, 214, 0.27);
  transition: border-color .15s ease-in-out;
}

.input-field:disabled,
.input-field:read-only {
  background-color: rgba(237, 237, 237, 0.2);
}
.input-field::-moz-placeholder,
.textarea::-moz-placeholder {
  color: rgba(54, 54, 54, 0.3);
}

.input-field::-webkit-input-placeholder {
  color: #c4c4c4;
}

.label {
  color: #363636;
  display: block;
  font-size: 1rem;
  font-weight: 700;
}

.label:not(:last-child) {
  margin-bottom: 0.5em;
}

.input-control {
  margin-bottom: 10px;
}

.form-horizontal {
  width: 100%;
  display: flex;
  justify-content: flex-start;
}

.form-vertical {
  position: relative;
}

.textarea {
  resize: none;
}

Creator

Sullivan Wisdom

Inspiration(s)

More Repositories

1

gridly

Gridly is a light weight pure CSS framework based on the grid model
CSS
10
star
2

schoolia

All Nigerian school list using Vuejs
HTML
9
star
3

flames

Flames is a dark colored Vs code theme for 10x engineers.
8
star
4

AvidBikers

HTML
7
star
5

jsDataStructureAndAlgorithm

Javascript Data structures and algorithms
JavaScript
6
star
6

kommunity

kommunity is a platform where people can ask questions and provide answers. A light weight StackOverflow with a Quora feel.
HTML
4
star
7

Diarium

Diarium is an online journal where users can pen down their thoughts and feelings.
HTML
3
star
8

kommunity-react

JavaScript
2
star
9

shopmate

HTML, CSS, Javascript
CSS
2
star
10

functionhub

functions I use every time
JavaScript
2
star
11

Book-A-Meal-App

Book-A-Meal-App is an application that allows customers to make food orders and helps the food vendor know what the customers want to eat.
HTML
2
star
12

uicards

A reusable and customisable css cards design for User interfaces
HTML
2
star
13

wiztemple

My profile
2
star
14

Transporter

Transporter App is a carpooling application that provides drivers with the ability to create ride offers and passengers to join available ride offers.
HTML
2
star
15

wizsullivan

A portfolio site displaying what I've done so far
JavaScript
2
star
16

wordlens

A one-page online dictionary/lexicon buildt with Reactjs
HTML
1
star
17

algorithms

Four semesters of computer science in 5 hours by Brian Holt
JavaScript
1
star
18

cov19strain

A coronavirus stats tracker built with Reactjs
JavaScript
1
star
19

hackernews

A hackernews clone with React Hooks
JavaScript
1
star
20

KommunityReact

JavaScript
1
star
21

30daysofjs

30 days of Javascript
JavaScript
1
star
22

petly

Pet Adoption web app
JavaScript
1
star
23

pangaeafechallenge

Pangaea Frontend Challenge
JavaScript
1
star
24

dummy-Book-A-Meal

JavaScript
1
star