serxoz/vanilligram
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

paleta gruvbox

Browse Source
This commit is contained in:
serxoz 2023-11-30 16:57:37 +01:00
parent 2ab9c08049
commit 6923ae3360
20 changed files with 2838 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored Normal file
View File

@ -0,0 +1,2 @@
node_modules
dist

59
example.html Normal file
View File

@ -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>

2191
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

15
package.json Normal file
View File

@ -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"
}
}

25
src/_Base.sass Normal file
View File

@ -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

12
src/_Blockquote.sass Normal file
View File

@ -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

75
src/_Button.sass Normal file
View File

@ -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

22
src/_Code.sass Normal file
View File

@ -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

20
src/_Color.sass Normal file
View File

@ -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

8
src/_Divider.sass Normal file
View File

@ -0,0 +1,8 @@
// Divider
// ––––––––––––––––––––––––––––––––––––––––––––––––––
hr
border: 0
border-top: .1rem solid $color-tertiary
margin: 3.0rem 0

67
src/_Form.sass Normal file
View File

@ -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

164
src/_Grid.sass Normal file
View File

@ -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

6
src/_Image.sass Normal file
View File

@ -0,0 +1,6 @@
// Image
// ––––––––––––––––––––––––––––––––––––––––––––––––––
img
max-width: 100%

11
src/_Link.sass Normal file
View File

@ -0,0 +1,11 @@
// Link
// ––––––––––––––––––––––––––––––––––––––––––––––––––
a
color: $color-primary
text-decoration: none
&:focus,
&:hover
color: $color-secondary

22
src/_List.sass Normal file
View File

@ -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

27
src/_Spacing.sass Normal file
View File

@ -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

27
src/_Table.sass Normal file
View File

@ -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

48
src/_Typography.sass Normal file
View File

@ -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

18
src/_Utility.sass Normal file
View File

@ -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

19
src/vanilligram.sass Normal file
View File

@ -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