Browse Source

Componentised LESS files, added SVG icons, added nav bar

Componentised LESS files, added SVG icons, added nav bar.
tags/v1.0.0^2
Long Sien 4 years ago
parent
commit
3105adc280
25 changed files with 1158 additions and 777 deletions
  1. +33
    -4
      README.md
  2. +0
    -772
      bare.less
  3. +0
    -1
      bare.min.css
  4. +1
    -0
      css/bare.min.css
  5. +1
    -0
      icons/chevron-down.svg
  6. +1
    -0
      icons/close.svg
  7. +1
    -0
      icons/done.svg
  8. +1
    -0
      icons/hamburger.svg
  9. +12
    -0
      less/_anchor-link.less
  10. +11
    -0
      less/_blockquote.less
  11. +38
    -0
      less/_card.less
  12. +30
    -0
      less/_code.less
  13. +250
    -0
      less/_form.less
  14. +55
    -0
      less/_grid.less
  15. +26
    -0
      less/_layouts.less
  16. +26
    -0
      less/_lists.less
  17. +267
    -0
      less/_navigation.less
  18. +46
    -0
      less/_reset.less
  19. +47
    -0
      less/_table.less
  20. +71
    -0
      less/_tooltip.less
  21. +16
    -0
      less/_transitions.less
  22. +18
    -0
      less/_typography.less
  23. +85
    -0
      less/_utility-classes.less
  24. +67
    -0
      less/_variables.less
  25. +55
    -0
      less/bare.less

+ 33
- 4
README.md View File

@@ -7,17 +7,46 @@ Go to [barecss.com](http://barecss.com) for examples and documentation.

BareCSS uses a simple two step process to get started:

#### Easy mode:

- [Download the latest release](https://github.com/longsien/BareCSS/archive/BareCSS-1.0.zip)
- Link `bare.min.css` to your HTML file

And you're done. Feel free to customise the variables in the the LESS file.
#### Custom mode:

- [Download the latest release](https://github.com/longsien/BareCSS/archive/BareCSS-1.0.zip)
- Edit the `bare.less` file to add/remove components.
- Compile and link the resulting CSS in your HTML file

## What's included

```
barecss/
├── bare.less
└── bare.min.css
BareCSS/
├── css/
│ └── bare.min.css
├── icons/
│ ├── chevron-down.svg
│ ├── close.svg
│ ├── done.svg
│ └── hamburger.svg
└── less/
├── _anchor-link.less
├── _blockquote.less
├── _card.less
├── _code.less
├── _form.less
├── _grid.less
├── _layouts.less
├── _lists.less
├── _navigation.less
├── _reset.less
├── _table.less
├── _tooltip.less
├── _transitions.less
├── _typography.less
├── _utility-classes.less
├── _variables.less
└── bare.less
```

## Creator

+ 0
- 772
bare.less View File

@@ -1,772 +0,0 @@
// BareCSS (.Y.) v1.0.0 | MIT License | barecss.com


/* variables
----------------------------------------------------------------------*/


// bare class (default is no class and 'xx')
// Why xx? It's short and easy to search.

@n: ~":not([class])";
@x: ~"[class~=xx]";


// font families
// currently uses browser defaults

@serif: serif;
@sans-serif: sans-serif;
@monospace: monospace;


// font sizes

@fs-s: 1.2rem;
@fs-m: 1.4rem;
@fs-l: 1.8rem;
@fs-xl: 2.4rem;


// colours

@black: hsl(198,10%,20%);

@grey-ultralight: hsl(198,10%,97%);
@grey-light: hsl(198,10%,90%);
@grey-mid: hsl(198,10%,70%);
@grey-dark: hsl(198,10%,50%);
@grey-ultradark: hsl(198,10%,30%);

@dark: hsla(198,10%,30%,0.2);
@darken: hsla(198,10%,30%,0.025);

@primary: #07A;
@primary--: #FFF; // contrasting colour to the primary colour


// widths

@width: 960px;
@mobile: 720px;


/* mini browser reset
----------------------------------------------------------------------*/


html {
font-family: sans-serif;
font-size: 10px;
box-sizing: border-box;
-webkit-text-size-adjust: 100%;
}

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

:focus { outline: 0 }

body {
color: @black;
margin: 0;
font-size: @fs-m;
line-height: 1.8;
font-weight: 300;
}

a {
background-color: transparent;
&:active,
&:hover { outline: 0 }
}

b, strong { font-weight: 700 }

h1, h2, h3, h4, h5, h6 {
margin: 0 0 2rem;
font-weight: 200;
}

img { border: 0 }

::selection {
background-color: @primary;
color: @primary--;
}


/* transitions
----------------------------------------------------------------------*/


a,
button,
input,
textarea,
select,
:before,
:after { transition: all 0.3s ease-in-out }


/* layouts
----------------------------------------------------------------------*/


[email protected]{n}, [email protected]{x} {
margin: auto;
padding: 4rem 20px;
width: 100%;
max-width: @width;
}

[email protected]{n}, [email protected]{x} {
margin: 0 0 2rem;
&:last-child { margin: 0 }
}

[email protected]{n}, [email protected]{x} {
background: @grey-light;
border: none;
width: 100%;
height: 1px;
margin: 4rem 0;
}


/* lists
----------------------------------------------------------------------*/


ul, ol {
&@{n}, &@{x} {
padding-left: 2rem;
margin: 0 0 2rem;
ul, ol { margin-bottom: 0 }
}
}

[email protected]{n}, [email protected]{x} {
list-style: disc;
ul { list-style: circle }
}

[email protected]{n}, [email protected]{x} {
list-style: decimal;
ol { list-style: lower-alpha }
}


/* code
----------------------------------------------------------------------*/


[email protected]{n}, [email protected]{x} {
display: inline-block;
background: @grey-ultralight;
border: 1px solid @grey-light;
padding: 0 0.5rem;
color: @grey-ultradark;
font-size: @fs-s;
font-family: @monospace;
border-radius: 2px;
}

[email protected]{n}, [email protected]{x} {
code {
border-radius: 3px;
padding: 2rem;
width: 100%;
display: block;
}
}


/* blockquote
----------------------------------------------------------------------*/


[email protected]{n}, [email protected]{x} {
margin: 2rem 0;
padding: 10px 20px;
border-left: 4px solid @dark;
background: @darken;
}


/* anchor link
----------------------------------------------------------------------*/


[email protected]{n}, [email protected]{x} {
color: @black;
&:hover { color: @primary }
}


/* tooltip
----------------------------------------------------------------------*/

// eg: <span data-tt="This is a tooltip"></span>

[data-tt], [data-dtt]:disabled,
a[href^=http]@{n}, a[href^=http]@{x} {
&:before, &:after {
position: absolute;
left: 50%;
top: 0;
opacity: 0;
visibility: hidden;
pointer-events: none;
z-index: 2;
}
&:before {
content: attr(data-tt);
background: @grey-ultradark;
border-radius: 3px;
color: #fff;
font-family: @sans-serif;
font-size: @fs-s;
line-height: 2.5;
font-weight: 300;
letter-spacing: 0;
white-space: nowrap;
padding: 0 1rem;
transform: translate(-50%,-95%);
text-transform: none;
}
&:after {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 5px 5px 0 5px;
border-color: @grey-ultradark transparent transparent transparent;
transform: translate(-50%,0);
}
&:hover:before {
opacity: 0.8;
visibility: visible;
transform: translate(-50%,~"calc(-100% - 5px)");
}
&:hover:after {
opacity: 0.8;
visibility: visible;
transform: translate(-50%,-100%)
}
// for disabled buttons
// eg: <button disabled data-dtt="This button is disabled"></button>
&:disabled:before, &.disabled:before { content: attr(data-dtt) }
}

// external anchor link tooltip
// eg: <a href="http://www.barecss.com"></a>

a[href^=http]@{n}, a[href^=http]@{x} {
&:before { content: attr(href) }
}


/* card
----------------------------------------------------------------------*/


// eg: <div class="card"></div>

.card {
background: #fff;
padding: 20px;
box-shadow: 0 1px 4px 0 rgba(0,0,0,0.2);
border-radius: 2px;
margin-bottom: 20px;
&:last-child { margin-bottom: 0 }
> [email protected]{n}, > [email protected]{x} {
width: ~"calc(100% + 40px)";
margin: 0 0 20px -20px;
display: block;
&:first-child {
margin: -20px 0 20px -20px;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
}
&:last-child {
margin: 0 0 -20px -20px;
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
}
}
}


/* tables
----------------------------------------------------------------------*/


[email protected]{n}, [email protected]{x} {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
margin-bottom: 2rem;
text-align: left;
overflow: hidden;
th, td {
border-bottom: 2px solid @grey-light;
padding: 1rem;
&:before {
content: "";
width: 100%;
height: 10000%;
position: absolute;
display: block;
top: 0;
left: 0;
background: @grey-ultralight;
z-index: -1;
opacity: 0;
visibility: hidden;
}
&:hover:before {
opacity: 1;
visibility: visible;
}
}
th {
font-weight: 700;
color: @grey-ultradark;
}
td {
border-bottom-width: 1px;
&:before {
height: 100%;
width: 10000%;
left: -5000%;
}
}
}


/* grid
----------------------------------------------------------------------*/


// .grid acts as a container for .col
// eg: <div class="grid"><div class="col twelve"></div></div>

.grid {
font-size: 0;
width: auto;
margin: -10px;
.grid:not(:first-child) { margin: 10px -10px 0 }
}

// columns
@columns: 12;
.width(@x) {
width: 100% / @columns * @x;
}

.col {
display: inline-block;
font-size: @fs-m;
padding: 10px;
vertical-align: top;
// eg: <div class="col six"></div>
&.one { .width(1) }
&.two { .width(2) }
&.three { .width(3) }
&.four { .width(4) }
&.five { .width(5) }
&.six { .width(6) }
&.seven { .width(7) }
&.eight { .width(8) }
&.nine { .width(9) }
&.ten { .width(10) }
&.eleven { .width(11) }
&.twelve { .width(12) }
// columns go to 100% on @mobile width unless it has the .fx class
// eg: <div class="col six fx"></div>
@media (max-width: @mobile) {
&.one, &.two, &.three, &.four, &.five, &.six, &.seven, &.eight, &.nine, &.ten, &.eleven, &.twelve {
&:not(.fx) { width: 100% }
}
}
}


/* typography
----------------------------------------------------------------------*/


// headings

.hx(@fs, @lh, @ls) { font-size: @fs; line-height: @lh; letter-spacing: @ls }

[email protected]{n}, [email protected]{x} { .hx(4rem, 1.1, -0.1rem) }
[email protected]{n}, [email protected]{x} { .hx(3rem, 1.1, -0.075rem) }
[email protected]{n}, [email protected]{x} { .hx(2.5rem, 1.3, -0.075rem) }
[email protected]{n}, [email protected]{x} { .hx(2rem, 1.3, -0.05rem) }
[email protected]{n}, [email protected]{x} { .hx(@fs-m, 1.5, 0rem); text-transform: uppercase; font-weight: 700 }
[email protected]{n}, [email protected]{x} { .hx(@fs-m, 1.5, 0rem); text-transform: uppercase; font-weight: 400 }


/* inputs
----------------------------------------------------------------------*/


// buttons

button {
// normal button styling
&@{n}, &@{x} {
cursor: pointer;
color: @grey-ultradark;
display: inline-block;
padding: 1rem 2rem;
background: #fff;
border: 1px solid @grey-mid;
border-radius: 2px;
box-shadow: 0 0 0 rgba(0,0,0,0);
text-transform: uppercase;
text-decoration: none;
text-align: center;
font-size: @fs-s;
font-weight: 400;
line-height: 1rem;
margin: 0 10px 10px 0;
-webkit-appearance: none;
&:not(:disabled):not(.disabled):hover, &:not(.disabled):not(.disabled):focus {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
background: darken(#fff, 2%)
}
}
// primary button styling
&.primary {
border-color: darken(@primary, 6%);
background: @primary;
color: @primary--;
font-weight: 700;
&:not(:disabled):not(.disabled):hover, &:not(:disabled):not(.disabled):focus { background: darken(@primary, 4%) }
}
&.m-full {
@media (max-width: @mobile) { width: 100% }
}
// disabled button styling
&:disabled,
&.disabled {
border-color: @grey-light;
background: @grey-light;
color: @grey-mid;
cursor: default;
}
}

// labels and text fields

[email protected]{n}, [email protected]{x} {
display: inline-block;
width: 100%;
text-transform: uppercase;
font-size: @fs-s;
font-weight: 400;
margin-top: 1rem;
&:first-child { margin-top: 0 }
}

.mx-input() {
display: inline-block;
background: transparent;
width: 100%;
padding: 0.5rem 0 1rem;
margin-bottom: 2rem;
border: none;
border-bottom: 1px solid @dark;
font-size: @fs-m;
font-weight: 300;
border-radius: 0;
&:focus,
&:hover {
border-color: @primary;
outline: 0;
}
}

input:not([type=radio]):not([type=checkbox]):not([type=button]) {
&@{n}, &@{x} { .mx-input }
}

[email protected]{n}, [email protected]{x} {
.mx-input;
min-height: 8rem;
border-right: 1px solid @grey-light;
padding-right: 20px;
border-bottom-right-radius: 5px;
}


// select

[email protected]{n}, [email protected]{x} {
padding: 0.5rem 3rem 0.5rem 1rem;
display: block;
width: 100%;
border: 1px solid @grey-light;
background: #fff data-uri('../icons/chevron-down.svg') no-repeat right 1rem center;
background-size: 2rem;
border-radius: 2px;
height: 4rem;
font-size: @fs-m;
font-weight: 300;
text-indent: 0.5rem;
margin: 0.5rem 0 2rem;
appearance: none;
cursor: pointer;
&:focus,
&:hover {
border-color: @primary;
outline: 0;
}
}


// radio and checkboxes

input {
&[type=radio],
&[type=checkbox] {
&@{n}, &@{x} {
z-index: 2;
opacity: 0;
margin-right: -2rem;
width: 2rem;
height: 2rem;
vertical-align: middle;
cursor: pointer;
// note that the label must be placed after the radio or checkbox tag
+ label {
width: auto;
text-transform: none;
&:before {
content: "";
display: inline-block;
width: 2rem;
height: 2rem;
border: 1px solid @grey-mid;
background: #fff;
vertical-align: middle;
margin-right: 1rem;
}
&:after {
content: "";
position: absolute;
opacity: 0;
visibility: hidden;
pointer-events: none;
width: 1.6rem;
height: 1.6rem;
left: 0.2rem;
top: 0.4rem;
transform: scale(0);
}
}
}
}
// radio
// eg: <input type="radio" name="radio" id="radio-1"> <label for="radio-1">Select me</label>
&[type=radio]@{n}, &[type=radio]@{x} {
+ label {
font-size: @fs-m;
font-weight: 200;
&:before { border-radius: 100% }
}
&:checked + label {
&:before {
background: @primary;
border-color: @primary;
}
&:after {
opacity: 1;
visibility: visible;
background: @primary;
border: 1px solid @primary--;
border-radius: 100%;
transform: scale(1);
top: 0.5rem;
}
}
}
// checkbox
// eg: <input type="checkbox" id="checkbox-1"> <label for="checkbox-1">Check me</label>
&[type=checkbox]@{n}, &[type=checkbox]@{x} {
+ label {
font-size: @fs-m;
font-weight: 200;
&:before { border-radius: 2px }
&:after {
background: data-uri('../icons/done.svg') no-repeat center center;
border-radius: 100%;
background-size: 100%;
}
}
&:checked {
+ label {
&:before {
background: @primary;
border-color: @primary;
}
&:after {
opacity: 1;
visibility: visible;
left: 0.2rem;
top: 0.5rem;
transform: scale(1);
}
}
}
}
}


/* utility classes (use with xx)
----------------------------------------------------------------------*/


// display

.full { width: 100% }

[hidden], .hide { display: none }

// fonts

.serif { font-family: @serif }
.sans { font-family: @sans-serif }
.mono { font-family: @monospace }

.fs(@x) { font-size: @x }

.fs- {
&s { .fs(@fs-s) }
&m { .fs(@fs-m) }
&l { .fs(@fs-l) }
&xl { .fs(@fs-xl) }
}

// margins
// eg: <div class="mt-0 mb-4"></div>

.mt(@x) { margin-top: @x }

.mt- {
&0 { .mt(0) }
&2 { .mt(2rem) }
&4 { .mt(4rem) }
&8 { .mt(8rem) }
}

.mb(@x) { margin-bottom: @x }

.mb- {
&0 { .mb(0) }
&2 { .mb(2rem) }
&4 { .mb(4rem) }
&8 { .mb(8rem) }
}

// paddings
// eg: <div class="pt-2 pb-4"></div>

.pt(@x) { padding-top: @x }

.pt- {
&0 { .pt(0) }
&2 { .pt(2rem) }
&4 { .pt(4rem) }
&8 { .pt(8rem) }
}

.pb(@x) { padding-bottom: @x }

.pb- {
&0 { .pb(0) }
&2 { .pb(2rem) }
&4 { .pb(4rem) }
&8 { .pb(8rem) }
}

.pa(@x) { padding: @x }

.pa- {
&0 { .pa(0) }
&2 { .pa(2rem) }
}

// text alignment
// eg: <div class="txt-c"></div>

.txt- {
&l { text-align: left }
&r { text-align: right }
&c { text-align: center }
&j { text-align: justify }
}

+ 0
- 1
bare.min.css
File diff suppressed because it is too large
View File


+ 1
- 0
css/bare.min.css
File diff suppressed because it is too large
View File


+ 1
- 0
icons/chevron-down.svg View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path d="M14.83 16.42L24 25.59l9.17-9.17L36 19.25l-12 12-12-12z"/></svg>

+ 1
- 0
icons/close.svg View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path d="M38 12.83L35.17 10 24 21.17 12.83 10 10 12.83 21.17 24 10 35.17 12.83 38 24 26.83 35.17 38 38 35.17 26.83 24z"/></svg>

+ 1
- 0
icons/done.svg View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#fff" d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/></svg>

+ 1
- 0
icons/hamburger.svg View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path fill="#2e3538" d="M6 36h36v-4H6v4zm0-10h36v-4H6v4zm0-14v4h36v-4H6z"/></svg>

+ 12
- 0
less/_anchor-link.less View File

@@ -0,0 +1,12 @@
@import (reference) "_variables";

/* anchor link
----------------------------------------------------------------------*/


[email protected]{n}, [email protected]{x} {
color: inherit;
text-decoration: underline dotted @grey-light;
&:hover { color: @primary }
}

+ 11
- 0
less/_blockquote.less View File

@@ -0,0 +1,11 @@
@import (reference) "_variables";

/* blockquote
----------------------------------------------------------------------*/


[email protected]{n}, [email protected]{x} {
margin: 2rem 0;
padding: 1rem 2rem;
border-left: 4px solid @primary;
}

+ 38
- 0
less/_card.less View File

@@ -0,0 +1,38 @@
@import (reference) "_variables";

/* card
----------------------------------------------------------------------*/


// eg: <div class="card"></div>

.card {
background: #fff;
padding: 2rem;
box-shadow: @box-shadow;
border-radius: 2px;
margin-bottom: 2rem;
&:last-child { margin-bottom: 0 }
// sets the image to full width
> [email protected]{n}, > [email protected]{x} {
width: ~"calc(100% + 4rem)";
margin: 0 0 2rem -2rem;
display: block;
// applies if image is first item in card
&:first-child {
margin: -2rem 0 2rem -2rem;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
}
// applies if image is last item in card
&:last-child {
margin: 0 0 -2rem -2rem;
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
}
}
}

+ 30
- 0
less/_code.less View File

@@ -0,0 +1,30 @@
@import (reference) "_variables";

/* code
----------------------------------------------------------------------*/


[email protected]{n}, [email protected]{x} {
display: inline-block;
background: @grey-ultralight;
border: 1px solid @grey-light;
padding: 0 0.5rem;
color: @grey-ultradark;
font-size: @fs-s;
line-height: 1.8;
font-family: @monospace;
border-radius: 2px;
text-transform: none;
font-weight: 300;
}

[email protected]{n}, [email protected]{x} {
code {
padding: 2rem;
border: none;
border-left: 4px solid @primary;
border-radius: 0;
width: 100%;
display: block;
}
}

+ 250
- 0
less/_form.less View File

@@ -0,0 +1,250 @@
@import (reference) "_variables";

/* inputs
----------------------------------------------------------------------*/


// buttons

button {
// normal button styling
&@{n}, &@{x} {
cursor: pointer;
color: @primary;
display: inline-block;
padding: 1.4rem 2rem;
background: #fff;
border: 1px solid @primary;
border-radius: 2px;
box-shadow: 0 0 0 rgba(0,0,0,0);
text-transform: uppercase;
text-decoration: none;
text-align: center;
font-size: @fs-s;
font-weight: 700;
line-height: 1rem;
margin: 0 1rem 1rem 0;
-webkit-appearance: none;
&:not(:disabled):hover, &:not(:disabled):focus {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
background: @grey-ultralight;
}
}
// primary button styling
&.primary {
border-color: darken(@primary, 6%);
background: @primary;
color: @primary--;
font-weight: 700;
&:not(:disabled):hover, &:not(:disabled):focus { background: darken(@primary, 6%) }
}
&.m-full {
@media (max-width: @mobile) { width: 100% }
}
// disabled button styling
&:disabled,
&.disabled {
border-color: @grey-light;
background: @grey-light;
color: @grey-mid;
cursor: default;
}
}

// labels

[email protected]{n}, [email protected]{x} {
display: inline-block;
width: 100%;
text-transform: uppercase;
font-size: @fs-s;
font-weight: 400;
margin-top: 1rem;
&:first-child { margin-top: 0 }
}

.mx-input() {
display: inline-block;
background: transparent;
width: 100%;
padding: 0.5rem 0 1rem;
margin-bottom: 2rem;
border: none;
border-bottom: 1px solid @grey-light;
font-size: @fs-m;
font-weight: 300;
border-radius: 0;
&:focus,
&:hover {
color: @primary;
border-color: @primary;
outline: 0;
}
}

// text fields

input:not([type=radio]):not([type=checkbox]):not([type=button]) {
&@{n}, &@{x} { .mx-input }
}

[email protected]{n}, [email protected]{x} {
.mx-input;
min-height: 8rem;
border-right: 1px solid @grey-light;
padding-right: 2rem;
border-bottom-right-radius: 0.5rem;
}


// select

[email protected]{n}, [email protected]{x} {
padding: 0.5rem 3rem 0.5rem 1rem;
display: block;
width: 100%;
border: 1px solid @grey-light;
background: #fff data-uri('../icons/chevron-down.svg') no-repeat right 1rem center;
background-size: 2rem;
border-radius: 2px;
height: 4rem;
font-size: @fs-m;
font-weight: 300;
text-indent: 0.5rem;
margin: 0.5rem 0 2rem;
appearance: none;
cursor: pointer;
&:focus,
&:hover {
border-color: @primary;
outline: 0;
}
}


// radio and checkboxes

input {
&[type=radio],
&[type=checkbox] {
&@{n}, &@{x} {
z-index: 2;
opacity: 0;
margin-right: -2rem;
width: 2rem;
height: 2rem;
vertical-align: middle;
cursor: pointer;
// note that the label must be placed after the radio or checkbox tag
+ label {
width: auto;
text-transform: none;
&:before {
content: "";
display: inline-block;
width: 2rem;
height: 2rem;
border: 1px solid @grey-mid;
background: #fff;
vertical-align: middle;
margin-right: 1rem;
}
&:after {
content: "";
position: absolute;
opacity: 0;
visibility: hidden;
pointer-events: none;
width: 1.6rem;
height: 1.6rem;
left: 2px;
top: 4px;
transform: scale(0);
}
}
}
}
// radio
// eg: <input type="radio" name="radio" id="radio-1"> <label for="radio-1">Select me</label>
&[type=radio]@{n}, &[type=radio]@{x} {
+ label {
font-size: @fs-m;
font-weight: 200;
&:before { border-radius: 100% }
}
&:checked + label {
&:before {
background: @primary;
border-color: @primary;
}
&:after {
opacity: 1;
visibility: visible;
background: @primary;
border: 1px solid @primary--;
border-radius: 100%;
transform: scale(1);
top: 0.5rem;
}
}
}
// checkbox
// eg: <input type="checkbox" id="checkbox-1"> <label for="checkbox-1">Check me</label>
&[type=checkbox]@{n}, &[type=checkbox]@{x} {
+ label {
font-size: @fs-m;
font-weight: 200;
&:before { border-radius: 2px }
&:after {
background: data-uri('../icons/done.svg') no-repeat center center;
border-radius: 100%;
background-size: 100%;
}
}
&:checked {
+ label {
&:before {
background: @primary;
border-color: @primary;
}
&:after {
opacity: 1;
visibility: visible;
left: 2px;
top: 0.5rem;
transform: scale(1);
}
}
}
}
}

+ 55
- 0
less/_grid.less View File

@@ -0,0 +1,55 @@
@import (reference) "_variables";

/* grid
----------------------------------------------------------------------*/


// .grid acts as a container for .col
// eg: <div class="grid"><div class="col twelve"></div></div>

.grid {
font-size: 0;
width: auto;
margin: -1rem;
.grid:not(:first-child) { margin: 1rem -1rem 0 }
}

// columns
@columns: 12;
.width(@x) {
width: 100% / @columns * @x;
}

.col {
display: inline-block;
font-size: @fs-m;
padding: 1rem;
vertical-align: top;
// eg: <div class="col six"></div>
&.one { .width(1) }
&.two { .width(2) }
&.three { .width(3) }
&.four { .width(4) }
&.five { .width(5) }
&.six { .width(6) }
&.seven { .width(7) }
&.eight { .width(8) }
&.nine { .width(9) }
&.ten { .width(10) }
&.eleven { .width(11) }
&.twelve { .width(12) }
// columns go to 100% on @mobile width unless it has the .fx class
// eg: <div class="col six fx"></div>
@media (max-width: @mobile) {
&.one, &.two, &.three, &.four, &.five, &.six, &.seven, &.eight, &.nine, &.ten, &.eleven, &.twelve {
&:not(.fx) { width: 100% }
}
}
}

+ 26
- 0
less/_layouts.less View File

@@ -0,0 +1,26 @@
@import (reference) "_variables";

/* layouts
----------------------------------------------------------------------*/


[email protected]{n}, [email protected]{x} {
margin: auto;
padding: 4rem 2rem;
width: 100%;
max-width: @width;
}

[email protected]{n}, [email protected]{x} {
margin: 0 0 2rem;
&:last-child { margin: 0 }
}

[email protected]{n}, [email protected]{x} {
background: @grey-light;
border: none;
width: 100%;
height: 1px;
margin: 4rem 0;
}

+ 26
- 0
less/_lists.less View File

@@ -0,0 +1,26 @@
@import (reference) "_variables";

/* lists
----------------------------------------------------------------------*/


ul, ol {
&@{n}, &@{x} {
padding-left: 2rem;
margin: 0 0 2rem;
ul, ol { margin-bottom: 0 }
}
}

[email protected]{n}, [email protected]{x} {
list-style: disc;
ul { list-style: circle }
}

[email protected]{n}, [email protected]{x} {
list-style: decimal;
ol { list-style: lower-alpha }
}

+ 267
- 0
less/_navigation.less View File

@@ -0,0 +1,267 @@
@import (reference) "_variables";

/* navigation
----------------------------------------------------------------------*/


[email protected]{n}, [email protected]{x} {
background: #fff;
color: @black;
padding: 0 2rem;
border-bottom: 1px solid @primary;
z-index: 10;
// class to fix the nav bar to the top of the viewport
// eg: <nav class="fx xx"></nav>
&.fx {
background: rgba(255,255,255,0.95);
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 11;
}
// contains everything in the nav
label {
max-width: @width;
margin: auto;
display: block;
> input {
display: none;
&:checked {
}
}
}
// where the main navigation items live
ul {
padding: 0 2rem;
margin: 0;
font-size: 0;
text-align: right;
li {
display: inline-block;
font-size: @fs-l;
}
@media (min-width: (@mobile + .1)) {
li:hover menu,
menu:hover {
visibility: visible;
opacity: 1;
transform: translate3d(0,-1rem,0);
pointer-events: auto;
}
}
a {
text-decoration: none;
text-transform: none;
padding: 1rem 2rem 0.6rem;
border-bottom: 4px solid transparent;
display: block;
cursor: pointer;
font-weight: 300;
// sets drop down menu styling
@media (min-width: (@mobile + .1)) {
&:not(:only-child) {
background-image: data-uri('../icons/chevron-down.svg');
background-repeat: no-repeat;
background-position: right 1.5rem;
background-size: 2rem;
padding-right: 3rem;
}
}
&:hover {
color: @primary;
border-color: @primary;
}
}
}
// drop down menu
menu {
padding: 0;
margin: 0;
background: #fff;
z-index: 2;
text-align: left;
white-space: nowrap;
min-width: 100%;
@media (min-width: (@mobile + .1)) {
visibility: hidden;
opacity: 0;
position: absolute;
top: 100%;
left: 0;
box-shadow: @box-shadow;
transform: translate3d(0,-2rem,0);
pointer-events: none;
}
menuitem {
display: block;
a {
text-transform: none;
padding: 0.5rem 2rem 0.5rem 1.6rem;
border: none;
border-left: 4px solid transparent;
font-size: @fs-s;
&:hover { background-color: @grey-ultralight }
}
}
}
// where the title/logo lives in the nav bar
// contains the hamburger menu in mobile view
header {
&:before,
&:after {
content: "";
position: absolute;
top: 0;
right: 1rem;
width: 4.4rem;
height: 4.4rem;
display: none;
background-size: 3rem;
background-position: center center;
background-repeat: no-repeat;
}
&:before {
background-image: data-uri('../icons/hamburger.svg');
}
&:after {
background-image: data-uri('../icons/close.svg');
opacity: 0;
transform: rotate(180deg);
}
a {
position: absolute;
left: 2rem;
top: 1rem;
bottom: 1rem;
cursor: pointer;
z-index: 2;
font-size: @fs-l;
img {
height: 100%;
}
}
}
}

// mobile view

@media (max-width: @mobile) {
// clears the top of the page for the fixed nav
body {
padding-top: 4.4rem;
}
// keeps the nav fixed
[email protected]{n}, [email protected]{x} {
position: fixed;
padding: 0;
top: 0;
left: 0;
right: 0;
header {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
&:before, &:after { display: block }
}
label {
height: 4.4rem;
// hides the nav off screen
> ul {
position: fixed;
top: 4.4rem;
right: 0;
bottom: 0;
padding: 0;
transform: translate3d(100%,0,0);
border-top: 1px solid @primary;
text-align: left;
background: #fff;
box-shadow: @box-shadow;
overflow-x: visible;
overflow-y: auto;
li {
display: block;
border-top: 1px solid @grey-light;
}
a {
padding: 1rem 6rem 1rem 2rem;
border: none;
border-left: 4px solid transparent;
}
}
input {
&:checked {
// shows the nav when input is checked
~ ul {
transform: none;
}
// hides the hamburger and shows the cross when the input is checked
~ header {
&:before {
transform: rotate(-180deg);
opacity: 0;
}
&:after {
transform: none;
opacity: 1;
}
}
}
}
menu {
a {
border-left: 4px solid @grey-light;
padding-left: 4rem;
}
}
}
}
}

+ 46
- 0
less/_reset.less View File

@@ -0,0 +1,46 @@
/* mini browser reset
----------------------------------------------------------------------*/


html {
font-family: @sans-serif;
font-size: 10px;
box-sizing: border-box;
-webkit-text-size-adjust: 100%;
}

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

:focus { outline: 0 }

body {
color: @black;
margin: 0;
font-size: @fs-m;
line-height: 1.8;
font-weight: 300;
}

a {
background-color: transparent;
&:active,
&:hover { outline: 0 }
}

b, strong { font-weight: 700 }

h1, h2, h3, h4, h5, h6 {
margin: 0 0 2rem;
font-weight: 200;
}

img { border: 0 }

::selection {
background-color: @primary;
color: @primary--;
}

+ 47
- 0
less/_table.less View File

@@ -0,0 +1,47 @@
@import (reference) "_variables";

/* table
----------------------------------------------------------------------*/


[email protected]{n}, [email protected]{x} {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
margin-bottom: 2rem;
text-align: left;
overflow: hidden;
th, td {
border-bottom: 2px solid @grey-light;
padding: 1rem;
}
th {
font-weight: 700;
color: @grey-ultradark;
&:before {
content: "";
width: 100%;
height: 10000%;
position: absolute;
display: block;
top: 0;
left: 0;
background: @grey-ultralight;
z-index: -1;
opacity: 0;
visibility: hidden;
}
&:hover:before {
opacity: 1;
visibility: visible;
}
}
td { border-bottom-width: 1px }
tbody tr:hover { background: @grey-ultralight }
}

+ 71
- 0
less/_tooltip.less View File

@@ -0,0 +1,71 @@
@import (reference) "_variables";

/* tooltip
----------------------------------------------------------------------*/

// eg: <span data-tt="This is a tooltip"></span>

[data-tt], [data-dtt]:disabled,
a[href^=http]@{n}, a[href^=http]@{x} {
overflow: visible;
&:before, &:after {
position: absolute;
left: 50%;
top: 0;
opacity: 0;
visibility: hidden;
pointer-events: none;
z-index: 2;
}
&:before {
content: attr(data-tt);
background: @grey-ultradark;
border-radius: 3px;
color: #fff;
font-family: @sans-serif;
font-size: @fs-s;
line-height: 2.5;
font-weight: 300;
letter-spacing: 0;
white-space: nowrap;
padding: 0 1rem;
transform: translate(-50%,-95%);
text-transform: none;
}
&:after {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 5px 5px 0 5px;
border-color: @grey-ultradark transparent transparent transparent;
transform: translate(-50%,0);
}
&:hover:before {
opacity: 0.8;
visibility: visible;
transform: translate(-50%,~"calc(-100% - 5px)");
}
&:hover:after {
opacity: 0.8;
visibility: visible;
transform: translate(-50%,-100%)
}
// for disabled buttons
// eg: <button disabled data-dtt="This button is disabled"></button>
&:disabled:before, &.disabled:before { content: attr(data-dtt) }
}

// external anchor link tooltip
// eg: <a href="http://www.barecss.com"></a>

a[href^=http]@{n}, a[href^=http]@{x} {
&:before { content: attr(href) }
}

+ 16
- 0
less/_transitions.less View File

@@ -0,0 +1,16 @@
@import (reference) "_variables";

/* transitions
----------------------------------------------------------------------*/


a,
button,
input,
menu,
textarea,
select,
tr,
ul,
:before,
:after { transition: all 0.3s ease-in-out }

+ 18
- 0
less/_typography.less View File

@@ -0,0 +1,18 @@
@import (reference) "_variables";

/* typography
----------------------------------------------------------------------*/


// note: set font family in _variables.less

// headings

.hx(@fs, @lh, @ls) { font-size: @fs; line-height: @lh; letter-spacing: @ls }

[email protected]{n}, [email protected]{x} { .hx(4rem, 1.1, -1px) }
[email protected]{n}, [email protected]{x} { .hx(3rem, 1.1, -0.05rem) }
[email protected]{n}, [email protected]{x} { .hx(2.5rem, 1.3, -0.05rem) }
[email protected]{n}, [email protected]{x} { .hx(2rem, 1.3, -0.05rem) }
[email protected]{n}, [email protected]{x} { .hx(@fs-m, 1.5, 0rem); text-transform: uppercase; font-weight: 700 }
[email protected]{n}, [email protected]{x} { .hx(@fs-m, 1.5, 0rem); text-transform: uppercase; font-weight: 400 }

+ 85
- 0
less/_utility-classes.less View File

@@ -0,0 +1,85 @@
@import (reference) "_variables";

/* utility classes (use with xx)
----------------------------------------------------------------------*/


// display

.full { width: 100% }

[hidden], .hide { display: none }

// fonts

.serif { font-family: @serif }
.sans { font-family: @sans-serif }
.mono { font-family: @monospace }

.fs(@x) { font-size: @x }

.fs- {
&s { .fs(@fs-s) }
&m { .fs(@fs-m) }
&l { .fs(@fs-l) }
&xl { .fs(@fs-xl) }
}

// margins
// eg: <div class="mt-0 mb-4"></div>

.mt(@x) { margin-top: @x }

.mt- {
&0 { .mt(0) }
&2 { .mt(2rem) }
&4 { .mt(4rem) }
&8 { .mt(8rem) }
}

.mb(@x) { margin-bottom: @x }

.mb- {
&0 { .mb(0) }
&2 { .mb(2rem) }
&4 { .mb(4rem) }
&8 { .mb(8rem) }
}

// paddings
// eg: <div class="pt-2 pb-4"></div>

.pt(@x) { padding-top: @x }

.pt- {
&0 { .pt(0) }
&2 { .pt(2rem) }
&4 { .pt(4rem) }
&8 { .pt(8rem) }
}

.pb(@x) { padding-bottom: @x }

.pb- {
&0 { .pb(0) }
&2 { .pb(2rem) }
&4 { .pb(4rem) }
&8 { .pb(8rem) }
}

.pa(@x) { padding: @x }

.pa- {
&0 { .pa(0) }
&2 { .pa(2rem) }
}

// text alignment
// eg: <div class="txt-c"></div>

.txt- {
&l { text-align: left }
&r { text-align: right }
&c { text-align: center }
&j { text-align: justify }
}

+ 67
- 0
less/_variables.less View File

@@ -0,0 +1,67 @@
/* variables
----------------------------------------------------------------------*/


// bare class (default is no class and 'xx')
// Why xx? It's short and easy to search.

@n: ~":not([class])";
@x: ~"[class~=xx]";


// font families
// currently uses browser defaults

@serif: serif;
@sans-serif: sans-serif;
@monospace: monospace;


// font sizes

@fs-s: 1.2rem;
@fs-m: 1.4rem;
@fs-l: 1.6rem;
@fs-xl: 2.4rem;


// set your brand colour

@primary: #679;
@primary--: #FFF; // contrasting colour to the primary colour


// set overall temperature with hue and intensity with saturation

@hue: 200;
@sat: 10%;


// blacks and greys inherit colour temperature of hue and saturation

@black: hsl(@hue,@sat,20%);

@grey-ultralight: hsl(@hue,@sat,96%);
@grey-light: hsl(@hue,@sat,90%);
@grey-mid: hsl(@hue,@sat,70%);
@grey-dark: hsl(@hue,@sat,50%);
@grey-ultradark: hsl(@hue,@sat,30%);


// transparent overlays to darken or lighten background colour

@dark: rgba(0,0,0,0.5);
@darken: rgba(0,0,0,0.1);
@light: rgba(255,255,255,0.5);
@lighten: rgba(255,255,255,0.1);


// shadows

@box-shadow: 0 1px 4px 0 rgba(0,0,0,0.2);


// widths

@width: 90rem;
@mobile: 50rem;

+ 55
- 0
less/bare.less View File

@@ -0,0 +1,55 @@
// BareCSS (.Y.) v1.0.0 | MIT License | barecss.com

// All BareCSS component names start with an underscore. Comment out any components you don't need. //

// required components

// variables !! required [ colours, shadows, fonts, breakpoints ]
@import "_variables";
// reset !! required
@import "_reset";

// optional components

// anchor link [ a ]
@import "_anchor-link";
// blockquote [ blockquote ]
@import "_blockquote";
// card
@import "_card";
// code [ code, pre ]
@import "_code";
// form [ input, textarea, checkbox, radio, select ]
@import "_form";
// grid
@import "_grid";
// layouts [ section, p, hr ]
@import "_layouts";
// lists [ ul, ol ]
@import "_lists";
// navigation [ nav ]
@import "_navigation";
// table [ table, tr, th, td ]
@import "_table";
// tooltip
@import "_tooltip";
// transitions
@import "_transitions";
// typography [ h1, h2, h3, h4, h5, h6 ]
@import "_typography";
// utility classes
@import "_utility-classes";

Loading…
Cancel
Save