paleta gruvbox
parent
2ab9c08049
commit
6923ae3360
|
|
@ -0,0 +1,2 @@
|
|||
node_modules
|
||||
dist
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<title>Vanilligram Example</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic"
|
||||
/>
|
||||
<link href="../dist/vanilligram.min.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<section class="container">
|
||||
<h2>Headings:</h2>
|
||||
<p>The base type is 1.6rem (16px) over 1.6 line height (24px)</p>
|
||||
<a>Anchor</a>
|
||||
<em>Emphasis</em>
|
||||
<small>Small</small>
|
||||
<strong>Strong</strong>
|
||||
<u>Underline</u>
|
||||
<h1>Heading</h1>
|
||||
<h2>Heading</h2>
|
||||
<h3>Heading</h3>
|
||||
<h4>Heading</h4>
|
||||
<h5>Heading</h5>
|
||||
<h6>Heading</h6>
|
||||
</section>
|
||||
<hr/>
|
||||
|
||||
<section class="container">
|
||||
<h2>Buttons:</h2>
|
||||
<div class="row">
|
||||
<div class="column">
|
||||
<!-- Default Button -->
|
||||
<a class="button" href="#">Default Button</a>
|
||||
</div>
|
||||
<div class="column">
|
||||
<!-- Outlined Button -->
|
||||
<button class="button button-outline">Outlined Button</button>
|
||||
</div>
|
||||
<div class="column">
|
||||
<!-- Clear Button -->
|
||||
<input class="button button-clear" type="submit" value="Clear Button">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<hr />
|
||||
|
||||
<section class="container">
|
||||
<h2>Blockquotes</h2>
|
||||
|
||||
<blockquote>
|
||||
<p><em>Yeah!! Vanilligram is amazing.</em></p>
|
||||
</blockquote>
|
||||
</section>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,15 @@
|
|||
{
|
||||
"name": "vanilligram",
|
||||
"version": "1.0.0",
|
||||
"description": "A minimalist CSS framework based on milligram.io",
|
||||
"main": "dist/vanilligram.css",
|
||||
"license": "MIT",
|
||||
"author": "serxoz",
|
||||
"dependencies": {
|
||||
"node-sass": "^9.0.0"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "rm -rf dist && npm run sass",
|
||||
"sass": "node-sass --output-style expanded src/vanilligram.sass dist/vanilligram.css && node-sass --output-style compressed src/vanilligram.sass dist/vanilligram.min.css"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
|
||||
// Base
|
||||
// ––––––––––––––––––––––––––––––––––––––––––––––––––
|
||||
|
||||
// Set box-sizing globally to handle padding and border widths
|
||||
*,
|
||||
*:after,
|
||||
*:before
|
||||
box-sizing: inherit
|
||||
|
||||
// The base font-size is set at 62.5% for having the convenience
|
||||
// of sizing rems in a way that is similar to using px: 1.6rem = 16px
|
||||
html
|
||||
box-sizing: border-box
|
||||
font-size: 62.5%
|
||||
|
||||
// Default body styles
|
||||
body
|
||||
background-color: $color-initial
|
||||
color: $color-secondary
|
||||
font-family: 'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif
|
||||
font-size: 1.6em // Currently ems cause chrome bug misinterpreting rems on body element
|
||||
font-weight: 300
|
||||
letter-spacing: .01em
|
||||
line-height: 1.6
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
|
||||
// Blockquote
|
||||
// ––––––––––––––––––––––––––––––––––––––––––––––––––
|
||||
|
||||
blockquote
|
||||
border-left: .3rem solid $color-quaternary
|
||||
margin-left: 0
|
||||
margin-right: 0
|
||||
padding: 1rem 1.5rem
|
||||
|
||||
*:last-child
|
||||
margin-bottom: 0
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
|
||||
// Button
|
||||
// ––––––––––––––––––––––––––––––––––––––––––––––––––
|
||||
|
||||
.button,
|
||||
button,
|
||||
input[type='button'],
|
||||
input[type='reset'],
|
||||
input[type='submit']
|
||||
background-color: $color-primary
|
||||
border: .1rem solid $color-primary
|
||||
border-radius: .4rem
|
||||
color: $color-initial
|
||||
cursor: pointer
|
||||
display: inline-block
|
||||
font-size: 1.1rem
|
||||
font-weight: 700
|
||||
height: 3.8rem
|
||||
letter-spacing: .1rem
|
||||
line-height: 3.8rem
|
||||
padding: 0 3.0rem
|
||||
text-align: center
|
||||
text-decoration: none
|
||||
text-transform: uppercase
|
||||
white-space: nowrap
|
||||
|
||||
&:focus,
|
||||
&:hover
|
||||
background-color: $color-secondary
|
||||
border-color: $color-secondary
|
||||
color: $color-initial
|
||||
outline: 0
|
||||
|
||||
&[disabled]
|
||||
cursor: default
|
||||
opacity: .5
|
||||
|
||||
&:focus,
|
||||
&:hover
|
||||
background-color: $color-primary
|
||||
border-color: $color-primary
|
||||
|
||||
&.button-outline
|
||||
background-color: transparent
|
||||
color: $color-primary
|
||||
|
||||
&:focus,
|
||||
&:hover
|
||||
background-color: transparent
|
||||
border-color: $color-secondary
|
||||
color: $color-secondary
|
||||
|
||||
&[disabled]
|
||||
|
||||
&:focus,
|
||||
&:hover
|
||||
border-color: inherit
|
||||
color: $color-primary
|
||||
|
||||
&.button-clear
|
||||
background-color: transparent
|
||||
border-color: transparent
|
||||
color: $color-primary
|
||||
|
||||
&:focus,
|
||||
&:hover
|
||||
background-color: transparent
|
||||
border-color: transparent
|
||||
color: $color-secondary
|
||||
|
||||
&[disabled]
|
||||
|
||||
&:focus,
|
||||
&:hover
|
||||
color: $color-primary
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
|
||||
// Code
|
||||
// ––––––––––––––––––––––––––––––––––––––––––––––––––
|
||||
|
||||
code
|
||||
background: $color-tertiary
|
||||
border-radius: .4rem
|
||||
font-size: 86%
|
||||
margin: 0 .2rem
|
||||
padding: .2rem .5rem
|
||||
white-space: nowrap
|
||||
|
||||
pre
|
||||
background: $color-tertiary
|
||||
border-left: .3rem solid $color-primary
|
||||
overflow-y: hidden
|
||||
|
||||
& > code
|
||||
border-radius: 0
|
||||
display: block
|
||||
padding: 1rem 1.5rem
|
||||
white-space: pre
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
|
||||
// Color
|
||||
// ––––––––––––––––––––––––––––––––––––––––––––––––––
|
||||
|
||||
// Gruvbox palette:
|
||||
// dark0 = #282828
|
||||
// red = #cc241d
|
||||
// green = #98971a
|
||||
// yellow = #d79921
|
||||
// blue = #458588
|
||||
// purple = #b16286
|
||||
// aqua = #689d6a
|
||||
// orange = #d65d0e
|
||||
|
||||
$color-initial: #282828 !default
|
||||
$color-primary: #cc241d !default
|
||||
$color-secondary: #98971a !default
|
||||
$color-tertiary: #d79921 !default
|
||||
$color-quaternary: #458588 !default
|
||||
$color-quinary: #b16286 !default
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
|
||||
// Divider
|
||||
// ––––––––––––––––––––––––––––––––––––––––––––––––––
|
||||
|
||||
hr
|
||||
border: 0
|
||||
border-top: .1rem solid $color-tertiary
|
||||
margin: 3.0rem 0
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
|
||||
// Form
|
||||
// ––––––––––––––––––––––––––––––––––––––––––––––––––
|
||||
|
||||
input[type='color'],
|
||||
input[type='date'],
|
||||
input[type='datetime'],
|
||||
input[type='datetime-local'],
|
||||
input[type='email'],
|
||||
input[type='month'],
|
||||
input[type='number'],
|
||||
input[type='password'],
|
||||
input[type='search'],
|
||||
input[type='tel'],
|
||||
input[type='text'],
|
||||
input[type='url'],
|
||||
input[type='week'],
|
||||
input:not([type]),
|
||||
textarea,
|
||||
select
|
||||
-webkit-appearance: none // sass-lint:disable-line no-vendor-prefixes
|
||||
background-color: transparent
|
||||
border: .1rem solid $color-quaternary
|
||||
border-radius: .4rem
|
||||
box-shadow: none
|
||||
box-sizing: inherit // Forced to replace inherit values of the normalize.css
|
||||
height: 3.8rem
|
||||
padding: .6rem 1.0rem .7rem // This vertically centers text on FF, ignored by Webkit
|
||||
width: 100%
|
||||
|
||||
&:focus
|
||||
border-color: $color-primary
|
||||
outline: 0
|
||||
|
||||
select
|
||||
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 8" width="30"><path fill="%23' + str-slice(inspect($color-quaternary), 2) + '" d="M0,0l6,8l6-8"/></svg>') center right no-repeat
|
||||
padding-right: 3.0rem
|
||||
|
||||
&:focus
|
||||
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 8" width="30"><path fill="%23' + str-slice(inspect($color-primary), 2) + '" d="M0,0l6,8l6-8"/></svg>')
|
||||
|
||||
&[multiple]
|
||||
background: none
|
||||
height: auto
|
||||
|
||||
textarea
|
||||
min-height: 6.5rem
|
||||
|
||||
label,
|
||||
legend
|
||||
display: block
|
||||
font-size: 1.6rem
|
||||
font-weight: 700
|
||||
margin-bottom: .5rem
|
||||
|
||||
fieldset
|
||||
border-width: 0
|
||||
padding: 0
|
||||
|
||||
input[type='checkbox'],
|
||||
input[type='radio']
|
||||
display: inline
|
||||
|
||||
.label-inline
|
||||
display: inline-block
|
||||
font-weight: normal
|
||||
margin-left: .5rem
|
||||
|
|
@ -0,0 +1,164 @@
|
|||
|
||||
// Grid
|
||||
// ––––––––––––––––––––––––––––––––––––––––––––––––––
|
||||
|
||||
// .container is main centered wrapper with a max width of 112.0rem (1120px)
|
||||
.container
|
||||
margin: 0 auto
|
||||
max-width: 112.0rem
|
||||
padding: 0 2.0rem
|
||||
position: relative
|
||||
width: 100%
|
||||
|
||||
// Using flexbox for the grid, inspired by Philip Walton:
|
||||
// http://philipwalton.github.io/solved-by-flexbox/demos/grids/
|
||||
// By default each .column within a .row will evenly take up
|
||||
// available width, and the height of each .column with take
|
||||
// up the height of the tallest .column in the same .row
|
||||
.row
|
||||
display: flex
|
||||
flex-direction: column
|
||||
padding: 0
|
||||
width: 100%
|
||||
|
||||
&.row-no-padding
|
||||
padding: 0
|
||||
|
||||
&> .column
|
||||
padding: 0
|
||||
|
||||
&.row-wrap
|
||||
flex-wrap: wrap
|
||||
|
||||
// Vertically Align Columns
|
||||
// .row-* vertically aligns every .col in the .row
|
||||
&.row-top
|
||||
align-items: flex-start
|
||||
|
||||
&.row-bottom
|
||||
align-items: flex-end
|
||||
|
||||
&.row-center
|
||||
align-items: center
|
||||
|
||||
&.row-stretch
|
||||
align-items: stretch
|
||||
|
||||
&.row-baseline
|
||||
align-items: baseline
|
||||
|
||||
.column
|
||||
display: block
|
||||
// IE 11 required specifying the flex-basis otherwise it breaks mobile
|
||||
flex: 1 1 auto
|
||||
margin-left: 0
|
||||
max-width: 100%
|
||||
width: 100%
|
||||
|
||||
// Column Offsets
|
||||
&.column-offset-10
|
||||
margin-left: 10%
|
||||
|
||||
&.column-offset-20
|
||||
margin-left: 20%
|
||||
|
||||
&.column-offset-25
|
||||
margin-left: 25%
|
||||
|
||||
&.column-offset-33,
|
||||
&.column-offset-34
|
||||
margin-left: 33.3333%
|
||||
|
||||
&.column-offset-40
|
||||
margin-left: 40%
|
||||
|
||||
&.column-offset-50
|
||||
margin-left: 50%
|
||||
|
||||
&.column-offset-60
|
||||
margin-left: 60%
|
||||
|
||||
&.column-offset-66,
|
||||
&.column-offset-67
|
||||
margin-left: 66.6666%
|
||||
|
||||
&.column-offset-75
|
||||
margin-left: 75%
|
||||
|
||||
&.column-offset-80
|
||||
margin-left: 80%
|
||||
|
||||
&.column-offset-90
|
||||
margin-left: 90%
|
||||
|
||||
// Explicit Column Percent Sizes
|
||||
// By default each grid column will evenly distribute
|
||||
// across the grid. However, you can specify individual
|
||||
// columns to take up a certain size of the available area
|
||||
&.column-10
|
||||
flex: 0 0 10%
|
||||
max-width: 10%
|
||||
|
||||
&.column-20
|
||||
flex: 0 0 20%
|
||||
max-width: 20%
|
||||
|
||||
&.column-25
|
||||
flex: 0 0 25%
|
||||
max-width: 25%
|
||||
|
||||
&.column-33,
|
||||
&.column-34
|
||||
flex: 0 0 33.3333%
|
||||
max-width: 33.3333%
|
||||
|
||||
&.column-40
|
||||
flex: 0 0 40%
|
||||
max-width: 40%
|
||||
|
||||
&.column-50
|
||||
flex: 0 0 50%
|
||||
max-width: 50%
|
||||
|
||||
&.column-60
|
||||
flex: 0 0 60%
|
||||
max-width: 60%
|
||||
|
||||
&.column-66,
|
||||
&.column-67
|
||||
flex: 0 0 66.6666%
|
||||
max-width: 66.6666%
|
||||
|
||||
&.column-75
|
||||
flex: 0 0 75%
|
||||
max-width: 75%
|
||||
|
||||
&.column-80
|
||||
flex: 0 0 80%
|
||||
max-width: 80%
|
||||
|
||||
&.column-90
|
||||
flex: 0 0 90%
|
||||
max-width: 90%
|
||||
|
||||
// .column-* vertically aligns an individual .column
|
||||
.column-top
|
||||
align-self: flex-start
|
||||
|
||||
.column-bottom
|
||||
align-self: flex-end
|
||||
|
||||
.column-center
|
||||
align-self: center
|
||||
|
||||
// Larger than mobile screen
|
||||
@media (min-width: 40.0rem) // Safari desktop has a bug using `rem`, but Safari mobile works
|
||||
|
||||
.row
|
||||
flex-direction: row
|
||||
margin-left: -1.0rem
|
||||
width: calc(100% + 2.0rem)
|
||||
|
||||
.column
|
||||
margin-bottom: inherit
|
||||
padding: 0 1.0rem
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
|
||||
// Image
|
||||
// ––––––––––––––––––––––––––––––––––––––––––––––––––
|
||||
|
||||
img
|
||||
max-width: 100%
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
|
||||
// Link
|
||||
// ––––––––––––––––––––––––––––––––––––––––––––––––––
|
||||
|
||||
a
|
||||
color: $color-primary
|
||||
text-decoration: none
|
||||
|
||||
&:focus,
|
||||
&:hover
|
||||
color: $color-secondary
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
|
||||
// List
|
||||
// ––––––––––––––––––––––––––––––––––––––––––––––––––
|
||||
|
||||
dl,
|
||||
ol,
|
||||
ul
|
||||
list-style: none
|
||||
margin-top: 0
|
||||
padding-left: 0
|
||||
|
||||
dl,
|
||||
ol,
|
||||
ul
|
||||
font-size: 90%
|
||||
margin: 1.5rem 0 1.5rem 3.0rem
|
||||
|
||||
ol
|
||||
list-style: decimal inside
|
||||
|
||||
ul
|
||||
list-style: circle inside
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
|
||||
// Spacing
|
||||
// ––––––––––––––––––––––––––––––––––––––––––––––––––
|
||||
|
||||
.button,
|
||||
button,
|
||||
dd,
|
||||
dt,
|
||||
li
|
||||
margin-bottom: 1.0rem
|
||||
|
||||
fieldset,
|
||||
input,
|
||||
select,
|
||||
textarea
|
||||
margin-bottom: 1.5rem
|
||||
|
||||
blockquote,
|
||||
dl,
|
||||
figure,
|
||||
form,
|
||||
ol,
|
||||
p,
|
||||
pre,
|
||||
table,
|
||||
ul
|
||||
margin-bottom: 2.5rem
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
|
||||
// Table
|
||||
// ––––––––––––––––––––––––––––––––––––––––––––––––––
|
||||
|
||||
table
|
||||
border-spacing: 0
|
||||
display: block
|
||||
overflow-x: auto
|
||||
text-align: left
|
||||
width: 100%
|
||||
|
||||
td,
|
||||
th
|
||||
border-bottom: .1rem solid $color-quinary
|
||||
padding: 1.2rem 1.5rem
|
||||
|
||||
&:first-child
|
||||
padding-left: 0
|
||||
|
||||
&:last-child
|
||||
padding-right: 0
|
||||
|
||||
@media (min-width: 40.0rem)
|
||||
|
||||
table
|
||||
display: table
|
||||
overflow-x: initial
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
|
||||
// Typography
|
||||
// ––––––––––––––––––––––––––––––––––––––––––––––––––
|
||||
|
||||
b,
|
||||
strong
|
||||
font-weight: bold
|
||||
|
||||
p
|
||||
margin-top: 0
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6
|
||||
font-weight: 300
|
||||
letter-spacing: -.1rem
|
||||
margin-bottom: 2.0rem
|
||||
margin-top: 0
|
||||
|
||||
h1
|
||||
font-size: 4.6rem
|
||||
line-height: 1.2
|
||||
|
||||
h2
|
||||
font-size: 3.6rem
|
||||
line-height: 1.25
|
||||
|
||||
h3
|
||||
font-size: 2.8rem
|
||||
line-height: 1.3
|
||||
|
||||
h4
|
||||
font-size: 2.2rem
|
||||
letter-spacing: -.08rem
|
||||
line-height: 1.35
|
||||
|
||||
h5
|
||||
font-size: 1.8rem
|
||||
letter-spacing: -.05rem
|
||||
line-height: 1.5
|
||||
|
||||
h6
|
||||
font-size: 1.6rem
|
||||
letter-spacing: 0
|
||||
line-height: 1.4
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
|
||||
// Utility
|
||||
// ––––––––––––––––––––––––––––––––––––––––––––––––––
|
||||
|
||||
// Clear a float with .clearfix
|
||||
.clearfix
|
||||
|
||||
&:after
|
||||
clear: both
|
||||
content: ' ' // The space content is one way to avoid an Opera bug.
|
||||
display: table
|
||||
|
||||
// Float either direction
|
||||
.float-left
|
||||
float: left
|
||||
|
||||
.float-right
|
||||
float: right
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
|
||||
// Modules
|
||||
// ––––––––––––––––––––––––––––––––––––––––––––––––––
|
||||
|
||||
@import _Color
|
||||
@import _Base
|
||||
@import _Blockquote
|
||||
@import _Button
|
||||
@import _Code
|
||||
@import _Divider
|
||||
@import _Form
|
||||
@import _Grid
|
||||
@import _Link
|
||||
@import _List
|
||||
@import _Spacing
|
||||
@import _Table
|
||||
@import _Typography
|
||||
@import _Image
|
||||
@import _Utility
|
||||
Loading…
Reference in New Issue