Browse Source

Major breaking changes

tags/v1.1.0
Long Sien 4 years ago
parent
commit
3fb2af6d72
18 changed files with 692 additions and 93 deletions
  1. +2
    -1
      css/bare.min.css
  2. +19
    -3
      less/_anchor-link.less
  3. +79
    -0
      less/_button.less
  4. +7
    -1
      less/_card.less
  5. +25
    -0
      less/_footer.less
  6. +46
    -25
      less/_grid.less
  7. +193
    -0
      less/_input.less
  8. +31
    -0
      less/_layout.less
  9. +26
    -0
      less/_list.less
  10. +19
    -16
      less/_navigation.less
  11. +4
    -0
      less/_reset.less
  12. +16
    -0
      less/_tag.less
  13. +19
    -35
      less/_tooltip.less
  14. +17
    -0
      less/_transition.less
  15. +81
    -0
      less/_utility-attributes.less
  16. +4
    -2
      less/_variables.less
  17. +19
    -10
      less/bare.less
  18. +85
    -0
      template.html

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


+ 19
- 3
less/_anchor-link.less View File

@@ -3,10 +3,26 @@
/* anchor link
----------------------------------------------------------------------*/


[email protected]{n}, [email protected]{x} {
color: inherit;
text-decoration: underline dotted @grey-light;
text-decoration: none;
display: inline-block;
z-index: 1;
&:hover { color: @primary }
p &:not([btn]) {
&:before {
content: "";
display: inline-block;
width: 100%;
height: 100%;
background: @secondary;
position: absolute;
opacity: 0.5;
transform: scale3d(1,0.1,1);
transform-origin: bottom;
z-index: -1;
}
&:hover:before { transform: none }
}
}

+ 79
- 0
less/_button.less View File

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

/* buttons
----------------------------------------------------------------------*/


[email protected]{n}, [email protected]{x}, input[type=submit], [btn] {
// normal button styling
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;
&:before {
content: "";
position: absolute;
z-index: -1;
opacity: 0;
width: 100%;
height: 100%;
left: 0;
top: 0;
transform: scale3d(1.2,1.2,1.2);
background: @primary;
}
&:not(:disabled):hover {
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
background: @grey-ultralight;
&:active {
box-shadow: none;
transition: none;
}
}
// primary button styling
&[primary] {
border-color: darken(@primary, 6%);
background: @primary;
color: @primary--;
font-weight: 700;
&:not(:disabled):hover { background: darken(@primary, 6%) }
}
&[round] {
border-radius: 4rem;
}
&[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;
}
}

+ 7
- 1
less/_card.less View File

@@ -6,18 +6,24 @@

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

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

+ 25
- 0
less/_footer.less View File

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

/* footer
----------------------------------------------------------------------*/


footer {
color: @primary--;
width: 100%;
max-width: @width;
margin: auto;
padding: 2rem;
overflow: visible;
&:before {
content: "";
background: @primary;
width: 102vw;
height: 100%;
position: absolute;
left: 50%;
top: 0;
transform: translate(-50%,0);
}
}

+ 46
- 25
less/_grid.less View File

@@ -7,12 +7,13 @@
// .grid acts as a container for .col
// eg: <div class="grid"><div class="col twelve"></div></div>

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

// columns
@@ -21,35 +22,55 @@
.width(@x) {
width: 100% / @columns * @x;
}
}

// eg: <div col="6"></div>

[col="1/12"] { .width(1) }

[col="2/12"],
[col="1/6"] { .width(2) }

[col="3/12"],
[col="1/4"] { .width(3) }

[col="4/12"],
[col="2/6"],
[col="1/3"] { .width(4) }

[col="5/12"] { .width(5) }

[col="6/12"],
[col="3/6"],
[col="2/4"],
[col="1/2"] { .width(6) }

[col="7/12"] { .width(7) }

.col {
[col="8/12"],
[col="4/6"],
[col="2/3"] { .width(8) }

[col="9/12"],
[col="3/4"] { .width(9) }

[col="10/12"],
[col="5/6"] { .width(10) }

[col="11/12"] { .width(11) }

[col="1/1"] { .width(12) }

[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>
// eg: <div class="fx" col="six"></div>
@media (max-width: @mobile) {
&.one, &.two, &.three, &.four, &.five, &.six, &.seven, &.eight, &.nine, &.ten, &.eleven, &.twelve {
&:not(.fx) { width: 100% }
}
&:not([fx]) { width: 100% }
}
}
}

+ 193
- 0
less/_input.less View File

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

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

// 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]):not([type=submit]) {
&@{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);
}
}
}
}
}

+ 31
- 0
less/_layout.less View File

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

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


[email protected]{n}, [email protected]{x} {
height: auto;
max-width: 100%;
}

[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/_list.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 }
}

+ 19
- 16
less/_navigation.less View File

@@ -10,11 +10,12 @@ [email protected]{n}, [email protected]{x} {
padding: 0 2rem;
border-bottom: 1px solid @primary;
z-index: 10;
min-height: 4.4rem;
// class to fix the nav bar to the top of the viewport
// eg: <nav class="fx xx"></nav>
// eg: <nav fx></nav>
&.fx {
&[fx] {
background: rgba(255,255,255,0.95);
position: fixed;
top: 0;
@@ -30,13 +31,7 @@ [email protected]{n}, [email protected]{x} {
margin: auto;
display: block;
> input {
display: none;
&:checked {
}
}
> input { display: none }
}
// where the main navigation items live
@@ -65,7 +60,7 @@ [email protected]{n}, [email protected]{x} {
a {
text-decoration: none;
text-transform: none;
padding: 1rem 2rem 0.6rem;
padding: 0.8rem 2rem 0.4rem;
border-bottom: 4px solid transparent;
display: block;
cursor: pointer;
@@ -114,15 +109,20 @@ [email protected]{n}, [email protected]{x} {
menuitem {
display: block;
border-left: 4px solid transparent;
&:hover {
border-color: @primary;
background-color: @grey-ultralight;
a { transform: translate3d(0.5rem,0,0) }
}
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 }
}
}
}
@@ -163,9 +163,10 @@ [email protected]{n}, [email protected]{x} {
cursor: pointer;
z-index: 2;
font-size: @fs-l;
text-decoration: none;
img {
height: 3rem;
height: 2rem;
vertical-align: middle;
top: -1px;
margin-right: 1rem;
@@ -230,7 +231,6 @@ [email protected]{n}, [email protected]{x} {
a {
padding: 1rem 6rem 1rem 2rem;
border: none;
border-left: 4px solid transparent;
}
}
@@ -260,8 +260,11 @@ [email protected]{n}, [email protected]{x} {
}
menu {
menuitem {
border-color: @grey-light;
}
a {
border-left: 4px solid @grey-light;
padding-left: 4rem;
}
}

+ 4
- 0
less/_reset.less View File

@@ -22,6 +22,10 @@ body {
font-size: @fs-m;
line-height: 1.8;
font-weight: 300;
@media (max-width: @mobile) {
overflow-x: hidden;
}
}

a {

+ 16
- 0
less/_tag.less View File

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

/* tag
----------------------------------------------------------------------*/


tag {
display: inline-block;
font-size: @fs-xs;
border-bottom: 1px solid @grey-light;
border-radius: 1.5rem;
background: @grey-ultralight;
color: @primary;
padding: 0.2rem 1.2rem;
margin: 0 0.5rem 0.5rem 0;
}

+ 19
- 35
less/_tooltip.less View File

@@ -2,14 +2,13 @@

/* tooltip
----------------------------------------------------------------------*/
// sets the styling for tooltips

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

[data-tt], [data-dtt]:disabled,
a[href^=http]@{n}, a[href^=http]@{x} {
[tt], [dtt]:disabled, [att] {
overflow: visible;
&:before, &:after {
&:after {
position: absolute;
left: 50%;
top: 0;
@@ -17,10 +16,6 @@ a[href^=http]@{n}, a[href^=http]@{x} {
visibility: hidden;
pointer-events: none;
z-index: 2;
}
&:before {
content: attr(data-tt);
background: @grey-ultradark;
border-radius: 3px;
color: #fff;
@@ -35,37 +30,26 @@ a[href^=http]@{n}, a[href^=http]@{x} {
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;
opacity: 0.9;
visibility: visible;
transform: translate(-50%,-100%)
transform: translate(-50%,~"calc(-100% - 5px)");
}
}
// for disabled buttons
// sets the content for tooltip
// eg: <span data-tt="This is a tooltip"></span>

[tt]:after { content: attr(tt) }

// sets the content for disabled tooltips
// can be used in conjunction with data-tt
// eg: <button disabled data-dtt="This button is disabled"></button>
&:disabled:before, &.disabled:before { content: attr(data-dtt) }
}
[dtt]:disabled:after { content: attr(dtt) }

// external anchor link tooltip
// eg: <a href="http://www.barecss.com"></a>
// sets the contents for an anchor link tooltip
// will set the content to the href
// eg: <a att href="https://github.com/longsien/BareCSS">BareCSS at GitHub</a>

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

+ 17
- 0
less/_transition.less View File

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

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


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

+ 81
- 0
less/_utility-attributes.less View File

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

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


// display

[full] { width: 100% }

[hidden] { display: none }

// fonts

[serif] { font-family: @serif }
[sans] { font-family: @sans-serif }
[mono] { font-family: @monospace }

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

[fs=xs] { .fs(@fs-xs) }
[fs=s] { .fs(@fs-s) }
[fs=m] { .fs(@fs-m) }
[fs=l] { .fs(@fs-l) }
[fs=xl] { .fs(@fs-xl) }

// margin top
// eg: <div mt="2"></div>

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

[mt=0] { .mt(0) }
[mt=2] { .mt(2rem) }
[mt=4] { .mt(4rem) }
[mt=8] { .mt(8rem) }

// margin bottom
// eg: <div mb="2"

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

[mb=0] { .mb(0) }
[mb=2] { .mb(2rem) }
[mb=4] { .mb(4rem) }
[mb=8] { .mb(8rem) }

// padding top
// eg: <div pt="2"></div>

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

[pt=0] { .pt(0) }
[pt=2] { .pt(2rem) }
[pt=4] { .pt(4rem) }
[pt=8] { .pt(8rem) }

// padding bottom
// eg: <div pb="2"></div>

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

[pb=0] { .pb(0) }
[pb=2] { .pb(2rem) }
[pb=4] { .pb(4rem) }
[pb=8] { .pb(8rem) }

// padding all sides
// eg: <div pa="2"></div>

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

[pa=0] { .pa(0) }
[pa=2] { .pa(2) }

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

[txt=l] { text-align: left }
[txt=r] { text-align: right }
[txt=c] { text-align: center }
[txt=j] { text-align: justify }

+ 4
- 2
less/_variables.less View File

@@ -6,7 +6,7 @@
// Why xx? It's short and easy to search.

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


// font families
@@ -19,6 +19,7 @@

// font sizes

@fs-xs: 1.1rem;
@fs-s: 1.2rem;
@fs-m: 1.4rem;
@fs-l: 1.6rem;
@@ -28,8 +29,9 @@
// set your brand colour

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

@secondary: #fd0;

// set overall temperature with hue and intensity with saturation


+ 19
- 10
less/bare.less View File

@@ -12,44 +12,53 @@

// optional components

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

+ 85
- 0
template.html View File

@@ -0,0 +1,85 @@
<!doctype HTML>

<!-- head -->

<html lang="en">
<head>
<title>Template | BareCSS</title>
<!-- meta -->
<meta charset=utf-8>
<meta name="description" content="BareCSS template file">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
<!-- css -->
<link href="css/bare.min.css" rel="stylesheet">
</head>

<!-- body -->

<body>
<!-- nav -->

<nav><!-- use fx attribute for fixed positioning -->
<label>
<input type="checkbox">
<header>
<a href="http://www.barecss.com"><img src="img/your-logo.svg">Site name</a>
</header>
<ul>
<li><a href="#one">Menu item</a></li>
<li><a href="#two">Menu item</a></li>
<li>
<a>Drop down</a>
<menu>
<menuitem><a href="#three">Menu item</a></menuitem>
<menuitem><a href="#four">Menu item</a></menuitem>
<menuitem><a href="#five">Menu item</a></menuitem>
</menu>
</li>
</ul>
</label>
</nav>

<!-- standard section for content -->

<section mt->
<h1>Standard content</h1>
<p>Paragraph one lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
<p>Paragraph two exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint.</p>
</section>

<!-- section with grid -->

<section>
<h2>Section with grid</h2>
<grid>
<div col="1/3">
<h3>1/3 grid</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div col="1/3">
<h3>1/3 grid</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div col="1/3">
<h3>1/3 grid</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</grid>
</section>

</body>

</html>

Loading…
Cancel
Save