Skip to content

Commit e1edfcc

Browse files
hiskhisk
committed
>> 2.0.0 - Add Bootstrap 4 (final) support
1 parent d51c839 commit e1edfcc

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

54 files changed

+6766
-1261
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
11
node_modules
2+
.DS_Store

‎CHANGELOG.md‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
# Changelog
2+
3+
All notable changes to this project will be documented in this file.
4+
5+
The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/) and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
6+
7+
## 📦 2.0.0 - 2018-02-08
8+
9+
- Skipped minor version due to changes that break backward compatibility.
10+
11+
### Changed
12+
- Upgraded compatibility with Bootstrap 4 final.
13+
- Improved outlined buttons active state styles.
14+
- Improved form label sizing.
15+
- Improved default select element styles.
16+
- Improved toggle elements focused state styles.
17+
- Fixed indeterminate checkbox styles.
18+
- Fixed multiple IE11 app promo extra page layout issues [(#11)](https://github.com/DesignRevision/shards-ui/issues/11)
19+
20+
### Added
21+
- Extended support for customisation options via variables.
22+
23+
### Removed
24+
- Removed redundant margin adjustments on paragraphs following headings.
25+
- Removed unused SCSS variables.
26+
27+
## 📦 1.1.2 - 2017-12-04
28+
29+
### Changed
30+
- Fixed custom toggle issues [(#8)](https://github.com/DesignRevision/shards-ui/issues/8) and [(#9)](https://github.com/DesignRevision/shards-ui/issues/9).
31+
- Fixed demo page elements issues [(#10)](https://github.com/DesignRevision/shards-ui/issues/10).
32+
- Corrected first field "type" in the bottom form of the demo agency landing page.
33+
34+
35+
## 📦 1.1.0 - 2017-11-10
36+
37+
### Added
38+
- Demo example page as extra.
39+
40+
### Changed
41+
- Updated license to MIT.
42+
43+
44+
## [1.0.0] - 2017-11-07
45+
- Initial release.

‎README.md‎

Lines changed: 13 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -30,33 +30,32 @@ Currently there are only two ways of downloading Shards:
3030

3131
### 🖇 Dependencies
3232

33-
The only hard dependency is Bootstrap 4 beta which needs to be included in your HTML document before Shards. Datepickers and slider controls also require the Shards JavaScript dependency.
33+
The only hard dependency is Bootstrap 4 (final) which needs to be included in your HTML document before Shards. Datepickers and slider controls also require the Shards JavaScript dependency.
3434

3535
### 🏎💨 Quick Start
3636

3737
In order to take advantage of both Bootstrap and Shards' features you may want to use the following starter template that includes all dependencies.
3838

3939
```html
40-
<!doctype html>
40+
<!DOCTYPE html>
4141
<html lang="en">
4242
<head>
43-
<title>Shards — Quick Start</title>
4443
<meta charset="utf-8">
4544
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
4645

47-
<!-- Bootstrap and Shards CSS -->
48-
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
49-
<link rel="stylesheet" href="/css/shards.min.css">
46+
<!-- CSS Dependencies -->
47+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
48+
<link rel="stylesheet" href="css/shards.min.css">
5049
</head>
5150
<body>
52-
<h1>👋 Hello! I'm using Shards and it's awesome!</h1>
51+
<h1>Hello, world!</h1>
5352

54-
<!-- JavaScript -->
55-
<!-- jQuery, Popper.js, Bootstrap JS, Shards JS -->
53+
<!-- Optional JavaScript -->
54+
<!-- JavaScript Dependencies: jQuery, Popper.js, Bootstrap JS, Shards JS -->
5655
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
57-
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
58-
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
59-
<script src="/js/shards.min.js"></script>
56+
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
57+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
58+
<script src="js/shards.min.js"></script>
6059
</body>
6160
</html>
6261
```
@@ -79,12 +78,6 @@ Building better products is something I'm trying to get really good at. I’d lo
7978
While building this project we used various free resources built and made
8079
available by some wonderful people around the world. See the [ATTRIB.md](ATTRIB.md) file for details.
8180

82-
## Roadmap
83-
Below are a couple of items from my list of improvements for the upcoming month(s).
81+
## Changelog
8482

85-
### General
86-
- [x] Publish as an NPM package.
87-
- [x] Change the license to a more permissive alternative.
88-
89-
### Design
90-
- [ ] Improve the Sketch document (nested symbols).
83+
[View notable changes.](CHANGELOG.md)

‎package.json‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
{
22
"name": "shards-ui",
33
"description": "A free, modern and lightweight Bootstrap 4 UI toolkit for web makers.",
4-
"version": "1.1.2",
4+
"version": "2.0.0",
55
"main": "js/index.js",
66
"scripts": {
77
"start": "npm-run-all --parallel watch serve-dist",
88
"copy-html": "copyfiles -f src/extras/*.html dist",
99
"copy-images": "copyfiles -u 3 src/extras/images/**/**/**/* dist/images/",
10-
"css": "npm-run-all css-compile css-prefix css-minify",
10+
"css": "npm-run-all css-compile css-prefix css-minify && npm run bundlesize",
1111
"css-compile": "npm-run-all css-compile:main css-compile:extras css-compile:demo",
1212
"css-compile:demo": "node-sass --output-style expanded --source-map true --source-map-contents true --precision 6 src/extras/scss/shards-demo.scss dist/css/shards-demo.css",
1313
"css-compile:extras": "node-sass --output-style expanded --source-map true --source-map-contents true --precision 6 src/extras/scss/shards-extras.scss dist/css/shards-extras.css",
@@ -27,8 +27,15 @@
2727
"watch-css": "nodemon --ignore src/js --ignore dist/ -e scss -x \"npm run css\"",
2828
"watch-html": "nodemon --ignore src/js --ignore src/scss --ignore src/extras/js --ignore src/extras/scss --ignore dist/ -e html -x \"npm run copy-html\"",
2929
"watch-images": "nodemon --ignore src/js --ignore src/scss --ignore src/extras/js --ignore src/extras/scss --ignore dist/ -e jpg,jpeg,png -x \"npm run copy-images\"",
30-
"watch-js": "nodemon --ignore src/scss --ignore dist/ -e js -x \"npm run js\""
30+
"watch-js": "nodemon --ignore src/scss --ignore dist/ -e js -x \"npm run js\"",
31+
"bundlesize": "bundlesize"
3132
},
33+
"bundlesize": [
34+
{
35+
"path": "./dist/css/shards.min.css",
36+
"maxSize": "14 kB"
37+
}
38+
],
3239
"repository": {
3340
"type": "git",
3441
"url": "git+https://github.com/DesignRevision/shards-ui"
@@ -61,7 +68,9 @@
6168
"webpack": "^3.6.0"
6269
},
6370
"dependencies": {
71+
"bootstrap": "4.0.0",
6472
"bootstrap-datepicker": "^1.7.1",
73+
"bundlesize": "^0.15.3",
6574
"nouislider": "^10.1.0"
6675
}
6776
}

‎src/scss/_alert.scss‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,25 @@
11
//
2-
// Alerts adjustments
2+
// Base styles
33
//
44

5-
// Base styles.
65
.alert {
76
padding: $alert-padding-y $alert-padding-x;
87
margin-bottom: $alert-margin-bottom;
98
border: none;
10-
@include border-radius(0);
9+
@include border-radius($alert-border-radius);
1110
}
1211

1312
// Provide class for links that match alerts
1413
.alert-link {
1514
font-weight: $alert-link-font-weight;
1615
}
1716

17+
1818
// Dismissible alerts
1919
.alert-dismissible {
2020
.close {
21-
top: -$alert-padding-y;
22-
right: -$alert-padding-x;
21+
top: 0;
22+
right: 0;
2323
padding: $alert-padding-y $alert-padding-x;
2424
@include transition($transition-base);
2525

@@ -29,6 +29,8 @@
2929
}
3030
}
3131

32+
33+
// Alternate styles
3234
// Override alert theme colors without mixin.
3335
@each $color, $value in $theme-colors {
3436
.alert-#{$color} {
@@ -41,10 +43,10 @@
4143

4244
// Exception for alerts with a light background.
4345
@if $color == "light" {
44-
@include color-yiq($value);
46+
color: color-yiq($value);
4547

4648
.alert-link {
47-
@include color-yiq($value);
49+
color: color-yiq($value);
4850
}
4951
}
5052
}

‎src/scss/_badge.scss‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,27 @@
1+
// Base class
12
//
2-
// Badges adjustments
3-
//
3+
// Requires one of the contextual, color modifier classes for `color` and
4+
// `background-color`.
45

5-
// Base class
66
.badge {
77
padding: $badge-padding-y $badge-padding-x;
88
font-size: $badge-font-size;
99
font-weight: $badge-font-weight;
1010
font-family: $badge-font-family;
1111
color: $badge-color;
1212

13-
@include border-radius();
13+
@include border-radius($badge-border-radius);
1414
}
1515

16-
// Add badge anchor transitions.
16+
// Badge anchor transitions
1717
a.badge {
1818
@include transition($transition-base);
1919
}
2020

2121
// Pill badges
2222
.badge-pill {
23+
padding-right: $badge-pill-padding-x;
24+
padding-left: $badge-pill-padding-x;
2325
@include border-radius($badge-pill-border-radius);
2426
}
2527

@@ -41,7 +43,7 @@ a.badge {
4143

4244
// Fix light outlined badges
4345
@if ( $value == theme-color("light") ) {
44-
@include color-yiq($value);
46+
color: color-yiq($value);
4547
}
4648
}
4749
}

‎src/scss/_button-group.scss‎

Lines changed: 63 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,29 @@
1-
// scss-lint:disable QualifyingElement
1+
// stylelint-disable selector-no-qualifying-type
22

3-
// Adjust Button Groups
3+
// Make the div behave like a button
4+
.btn-group,
5+
.btn-group-vertical {
6+
// Prevent double borders when buttons are next to each other
7+
.btn + .btn,
8+
.btn + .btn-group,
9+
.btn-group + .btn,
10+
.btn-group + .btn-group {
11+
margin-left: -$btn-border-width;
12+
}
13+
}
14+
15+
.btn-group {
16+
// Reset rounded corners
17+
> .btn:not(:last-child):not(.dropdown-toggle),
18+
> .btn-group:not(:last-child) > .btn {
19+
@include border-right-radius(0);
20+
}
21+
22+
> .btn:not(:first-child),
23+
> .btn-group:not(:first-child) > .btn {
24+
@include border-left-radius(0);
25+
}
26+
}
427

528
// Sizing
629
//
@@ -9,28 +32,59 @@
932
.btn-group-sm > .btn { @extend .btn-sm; }
1033
.btn-group-lg > .btn { @extend .btn-lg; }
1134

35+
1236
//
1337
// Split button dropdowns
1438
//
1539

16-
.btn + .dropdown-toggle-split {
17-
padding-right: $input-btn-padding-x * .75;
18-
padding-left: $input-btn-padding-x * .75;
40+
.dropdown-toggle-split {
41+
padding-right: $btn-padding-x * .75;
42+
padding-left: $btn-padding-x * .75;
1943
}
2044

2145
.btn-sm + .dropdown-toggle-split {
22-
padding-right: $input-btn-padding-x-sm * .75;
23-
padding-left: $input-btn-padding-x-sm * .75;
46+
padding-right: $btn-padding-x-sm * .75;
47+
padding-left: $btn-padding-x-sm * .75;
2448
}
2549

2650
.btn-lg + .dropdown-toggle-split {
27-
padding-right: $input-btn-padding-x-lg * .75;
28-
padding-left: $input-btn-padding-x-lg * .75;
51+
padding-right: $btn-padding-x-lg * .75;
52+
padding-left: $btn-padding-x-lg * .75;
2953
}
3054

3155

3256
// The clickable button for toggling the menu
3357
// Set the same inset shadow as the :active state
3458
.btn-group.show .dropdown-toggle {
3559
@include box-shadow($btn-active-box-shadow);
60+
61+
// Show no shadow for `.btn-link` since it has no other button styles.
62+
&.btn-link {
63+
@include box-shadow(none);
64+
}
3665
}
66+
67+
68+
//
69+
// Vertical button groups
70+
//
71+
72+
.btn-group-vertical {
73+
> .btn + .btn,
74+
> .btn + .btn-group,
75+
> .btn-group + .btn,
76+
> .btn-group + .btn-group {
77+
margin-top: -$btn-border-width;
78+
}
79+
80+
// Reset rounded corners
81+
> .btn:not(:last-child):not(.dropdown-toggle),
82+
> .btn-group:not(:last-child) > .btn {
83+
@include border-bottom-radius(0);
84+
}
85+
86+
> .btn:not(:first-child),
87+
> .btn-group:not(:first-child) > .btn {
88+
@include border-top-radius(0);
89+
}
90+
}

0 commit comments

Comments
 (0)