π₯ π₯ π₯
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. 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.
Hero
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