pallote-css 0.3.11 → 0.3.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (54) hide show
  1. package/README.md +0 -144
  2. package/dist/pallote.scss +31 -0
  3. package/dist/styles/common/_editor.scss +181 -0
  4. package/dist/styles/common/_fontface.scss +31 -0
  5. package/dist/styles/common/_functions.scss +11 -0
  6. package/dist/styles/common/_global.scss +157 -0
  7. package/dist/styles/common/_mixins.scss +165 -0
  8. package/dist/styles/common/_reset.scss +145 -0
  9. package/dist/styles/common/_variables.scss +252 -0
  10. package/dist/styles/components/_accordion.scss +133 -0
  11. package/dist/styles/components/_alert.scss +198 -0
  12. package/dist/styles/components/_breadcrumbs.scss +50 -0
  13. package/dist/styles/components/_button.scss +180 -0
  14. package/dist/styles/components/_buttons.scss +52 -0
  15. package/dist/styles/components/_card.scss +268 -0
  16. package/dist/styles/components/_divider.scss +52 -0
  17. package/dist/styles/components/_form.scss +58 -0
  18. package/dist/styles/components/_grid.scss +190 -0
  19. package/dist/styles/components/_input.scss +298 -0
  20. package/dist/styles/components/_link.scss +46 -0
  21. package/dist/styles/components/_list.scss +60 -0
  22. package/dist/styles/components/_nav.scss +274 -0
  23. package/dist/styles/components/_navbar.scss +192 -0
  24. package/dist/styles/components/_page.scss +33 -0
  25. package/dist/styles/components/_section.scss +193 -0
  26. package/dist/styles/components/_sidebar.scss +61 -0
  27. package/dist/styles/components/_snippet.scss +85 -0
  28. package/dist/styles/components/_status.scss +60 -0
  29. package/dist/styles/components/_switch.scss +84 -0
  30. package/dist/styles/components/_tabs.scss +118 -0
  31. package/dist/styles/components/_tag.scss +79 -0
  32. package/dist/styles/modules/_cookie.scss +38 -0
  33. package/dist/styles/utilities/_color.scss +119 -0
  34. package/dist/styles/utilities/_global.scss +211 -0
  35. package/dist/styles/utilities/_text.scss +207 -0
  36. package/package.json +8 -6
  37. package/dist/assets/fonts/SourceSansPro/regular.woff2 +0 -0
  38. package/dist/assets/fonts/SourceSansPro/regularitalic.woff2 +0 -0
  39. package/dist/assets/fonts/SourceSansPro/semibold.woff2 +0 -0
  40. package/dist/assets/fonts/SourceSansPro/semibolditalic.woff2 +0 -0
  41. package/dist/assets/icons/logos/patreon.svg +0 -3
  42. package/dist/assets/icons/phosphor/arrow-right.svg +0 -1
  43. package/dist/assets/icons/phosphor/arrow-square-out.svg +0 -1
  44. package/dist/assets/icons/phosphor/caret-down.svg +0 -1
  45. package/dist/assets/icons/phosphor/check-circle.svg +0 -1
  46. package/dist/assets/icons/phosphor/check.svg +0 -1
  47. package/dist/assets/icons/phosphor/coffee.svg +0 -1
  48. package/dist/assets/icons/phosphor/download-simple.svg +0 -1
  49. package/dist/assets/icons/phosphor/envelope-simple.svg +0 -1
  50. package/dist/assets/icons/phosphor/files.svg +0 -1
  51. package/dist/assets/icons/phosphor/info.svg +0 -1
  52. package/dist/assets/icons/phosphor/warning.svg +0 -1
  53. package/dist/assets/icons/phosphor/x-circle.svg +0 -1
  54. package/dist/assets/icons/rabbit.svg +0 -1
package/README.md CHANGED
@@ -1,145 +1 @@
1
1
  # Pallote CSS
2
-
3
- Welcome to Pallote CSS! Pallote CSS is an open-source CSS library aimed at providing developers with a collection of reusable and customisable components and styles streamline the development of web projects.
4
-
5
- - [Usage](#usage)
6
- - [Documentation](#documentation)
7
- - [Contributing](#contributing)
8
- - [Methodology](#methodology)
9
- - [License](#license)
10
-
11
- ## Usage
12
-
13
- ### Installation
14
-
15
- #### NPM
16
-
17
- To install Pallote CSS via npm use:
18
-
19
- ```shell
20
- npm install pallote-css
21
- ```
22
-
23
- Then import the global style file in your SASS file, like this if you are using SASS:
24
-
25
- ```scss
26
- @import '../node_modules/pallote-css/dist/pallote.scss';
27
- ```
28
-
29
- Or if you are using regular CSS, locate the file, copy/paste them into your project and import them into you `<head>`.
30
-
31
- ```html
32
- <link rel="stylesheet" href="link/to/file/pallote.css">
33
- ```
34
-
35
- #### CDN
36
-
37
- Alternatively, you can link via a CDN. Simply copy/paste this code in between the `head` tag of your website. Make sure to add the version number, as next version could introduce breaking changes.
38
-
39
- ```html
40
- <link rel="stylesheet" href="https://cdn.jsdeliver.net/npm/pallote-css@1.0.0/dist/pallote.min.css">
41
- ```
42
-
43
- ### Using Components
44
-
45
- Once the library is imported, start using the components by adding appropriate class names to your HTML elements. Refer to the [documentation](https://pallote.com) for each component to understand its usage and available customisation options.
46
-
47
- ```html
48
- <button class="button button-primary">Primary Button</button>
49
- ```
50
-
51
- ### Customisation
52
-
53
- Pallote CSS allows for easy customisation of components to match your project's design.
54
-
55
- #### Custom variables
56
-
57
- The framework has a set of built-in variables that create the design look and feel. To override them, add a variable with the same name in your Sass style file. To see the full list of variables, see [documentation](https://pallote.com).
58
-
59
- ```scss
60
- $primary: #007A1E;
61
-
62
- @import '../node_modules/pallote-css/dist/pallote.scss';
63
- ```
64
-
65
- #### Custom components styles
66
-
67
- To change a component style, see the documentation for each component and add create an instance of the class with new properties in your style file.
68
-
69
- ```scss
70
- @import '../node_modules/pallote-css/dist/pallote.scss';
71
-
72
- .button {
73
- text-decoration: underline;
74
- }
75
- ```
76
-
77
- You can also override default styles by defining custom CSS rules in your project's stylesheet.
78
-
79
- ```css
80
- .custom-button {
81
- text-decoration: underline;
82
- }
83
- ```
84
-
85
- ## Documentation
86
-
87
- For detailed documentation on each component and customisation options, please refer to the documentation website: [pallote.com](https://pallote.com).
88
-
89
- The documentation is built with Jekyll. For more information on how to run the repo and contribute, see section below.
90
-
91
- ## Contributing
92
-
93
- Contributions are welcome! If you find any bugs or have suggestions for new features, feel free to open an issue or submit a pull request. This documentation serves as a guide for contributors on how to effectively contribute to the project.
94
-
95
- ### Run the project locally
96
-
97
- - Fork the repository and clone it
98
- - Install [Jekyll](https://jekyllrb.com/); Jekyll is a Ruby Gem that can be installed on most systems ([installation manual](https://jekyllrb.com/docs/installation/)).
99
- - Install dependencies
100
-
101
- ```shell
102
- npm install
103
- ```
104
-
105
- - Start a localhost server
106
-
107
- ```shell
108
- npm run dev
109
- ```
110
-
111
- ### Make changes
112
-
113
- - Checkout to `develop` branch
114
- - Create a new branch on which to write your code
115
-
116
- ```shell
117
- git checkout -b feature-name-of-branch
118
- ```
119
-
120
- > Make sure to add the prefix `feature-` to the name of your branch
121
-
122
- - Write your code. There are two locations for the style files:
123
- - `dist/styles` folder, which are the core styles of the library
124
- - `assets/styles` folder, which are the documentation specific styles
125
-
126
- > You don't need to run any additional command to compile sass files, it does it automatically with `npm run dev`
127
- > Remember to add any new class or property to the doc
128
-
129
- ### Submit your code
130
-
131
- - Before submitting a pull request, make sure to test your changes thoroughly. Ensure that your changes do not break any existing functionality and that they are compatible with different browsers.
132
- - Once the changes are made and tested, submit a pull request to the main repository. Be sure to include a clear description of all the changes you've made.
133
- - When changes are approved, they will be merged into the develop branch for testing, and will be published to the master branch on the next release.
134
-
135
- ### Reporting Issues
136
-
137
- If you encounter any issues while using Pallote CSS, please report them by opening an issue on the GitHub repository. Be sure to include a detailed description of the problem and steps to reproduce it.
138
-
139
- ## Methodology
140
-
141
- Pallote CSS is based on an adapted version of BEM terminology (for Block Element Modifier). More information on naming conventions and methodology is in progress.
142
-
143
- ## License
144
-
145
- This project is licensed under the MIT License - see the LICENSE file for details.
package/dist/pallote.scss ADDED
@@ -0,0 +1,31 @@
1
+ @use "styles/common/_variables";
2
+ @use "styles/common/_mixins";
3
+ @use "styles/common/_reset";
4
+ @use "styles/common/_editor";
5
+ // @use "styles/common/_fontface";
6
+ @use "styles/common/_global";
7
+ @use "styles/utilities/_color";
8
+ @use "styles/utilities/_global" as global2;
9
+ @use "styles/utilities/_text";
10
+ @use "styles/components/_accordion";
11
+ @use "styles/components/_alert";
12
+ @use "styles/components/_breadcrumbs";
13
+ @use "styles/components/_button";
14
+ @use "styles/components/_buttons";
15
+ @use "styles/components/_card";
16
+ @use "styles/components/_divider";
17
+ @use "styles/components/_form";
18
+ @use "styles/components/_grid";
19
+ @use "styles/components/_input";
20
+ @use "styles/components/_link";
21
+ @use "styles/components/_list";
22
+ @use "styles/components/_nav";
23
+ @use "styles/components/_navbar";
24
+ @use "styles/components/_page";
25
+ @use "styles/components/_section";
26
+ @use "styles/components/_sidebar";
27
+ @use "styles/components/_snippet";
28
+ @use "styles/components/_status";
29
+ @use "styles/components/_switch";
30
+ @use "styles/components/_tabs";
31
+ @use "styles/components/_tag";
package/dist/styles/common/_editor.scss ADDED
@@ -0,0 +1,181 @@
1
+ @use "mixins";
2
+ @use "variables";
3
+ @use "../utilities/text";
4
+
5
+ // —————————————————————————————————————————————————————————————————
6
+ // text
7
+ // lists
8
+ // table
9
+ // —————————————————————————————————————————————————————————————————
10
+
11
+ .editor, %editor {
12
+ max-width: variables.$max-width-editor;
13
+
14
+ // —————————————————————————————————————————————————————————————————
15
+ // text
16
+ // —————————————————————————————————————————————————————————————————
17
+
18
+ h2 { @extend %h3; }
19
+ h3 { @extend %h4; }
20
+ h4 { @extend %h5; }
21
+ h5 { @extend %h6; }
22
+ h6 { @extend %subtitle; }
23
+ blockquote { @extend %subtitle; }
24
+
25
+ h2 {
26
+ color: variables.$primary;
27
+ }
28
+
29
+ h2, h3, h4, h5, h6 {
30
+
31
+ &:not(:first-child) { margin-top: 1.5em; }
32
+ &:not(:last-child) { margin-bottom: .75em; }
33
+ }
34
+
35
+ p,
36
+ ol, ul,
37
+ p + a, a + p {
38
+
39
+ &:not(:first-child) { margin-top: 0.75em; }
40
+ }
41
+
42
+ .highlighter-rouge,
43
+ .alert {
44
+ margin-top: 1.5rem;
45
+ margin-bottom: 1.5rem;
46
+ width: fit-content;
47
+ white-space: nowrap;
48
+ }
49
+
50
+ a {
51
+ color: variables.$primary;
52
+ text-decoration: underline;
53
+ }
54
+
55
+ strong {
56
+ font-weight: variables.$font-bold;
57
+ }
58
+
59
+ em {
60
+ font-style: italic;
61
+ }
62
+
63
+ blockquote {
64
+ position: relative;
65
+ background-color: variables.$background-paper;
66
+ padding: variables.$spacing-md variables.$spacing-lg;
67
+ border-radius: variables.$border-radius-md;
68
+
69
+ &:before {
70
+ @include mixins.pseudo-element('”', -(variables.$spacing-md), auto, auto, -(variables.$spacing-sm), auto, auto);
71
+ font-size: variables.$spacing-xxl;
72
+ color: variables.$primary;
73
+ line-height: 1;
74
+ }
75
+
76
+ &:not(:first-child) {
77
+ margin-top: 1.5rem;
78
+ margin-bottom: 1.5rem;
79
+ }
80
+ }
81
+
82
+ // —————————————————————————————————————————————————————————————————
83
+ // lists
84
+ // —————————————————————————————————————————————————————————————————
85
+
86
+ ol,
87
+ ul {
88
+ margin-left: variables.$spacing-md;
89
+ }
90
+
91
+ ol { list-style: decimal; }
92
+ ul { list-style: disc; }
93
+
94
+ li + li { margin-top: variables.$spacing-xs; }
95
+
96
+ li {
97
+
98
+ > ul {
99
+ margin-top: 0.25rem !important;
100
+ margin-left: 0;
101
+
102
+ li + li { margin-top: 0; }
103
+ }
104
+
105
+ &:not(:last-child) {
106
+
107
+ > ul {
108
+ margin-bottom: 0.25rem;
109
+ }
110
+ }
111
+ }
112
+
113
+ // —————————————————————————————————————————————————————————————————
114
+ // table
115
+ // —————————————————————————————————————————————————————————————————
116
+
117
+ .table {
118
+ width: 100%;
119
+ overflow: scroll;
120
+ }
121
+
122
+ table {
123
+ border-collapse: separate;
124
+ border: variables.$border;
125
+ border-radius: variables.$border-radius-sm;
126
+ width: 100%;
127
+
128
+ &.table--dense {
129
+
130
+ th { font-size: 0.65rem; }
131
+ td { font-size: 0.75rem;; }
132
+ td, th { padding: 1px variables.$spacing-xs; }
133
+ }
134
+ }
135
+
136
+ thead {
137
+ background-color: variables.$background-paper;
138
+
139
+ tr:first-child {
140
+
141
+ th {
142
+ border-top: none;
143
+
144
+ &:first-of-type { border-top-left-radius: variables.$border-radius-sm; }
145
+ &:last-of-type { border-top-right-radius: variables.$border-radius-sm; }
146
+ }
147
+ }
148
+ }
149
+
150
+ tbody {
151
+
152
+ tr:last-child {
153
+
154
+ th, td {
155
+
156
+ &:first-of-type { border-bottom-left-radius: variables.$border-radius-sm; }
157
+ &:last-of-type { border-bottom-right-radius: variables.$border-radius-sm; }
158
+ }
159
+ }
160
+ }
161
+
162
+ td,
163
+ th {
164
+ border-top: variables.$border;
165
+
166
+ &:not(:first-child) {
167
+ border-left: variables.$border;
168
+ }
169
+ }
170
+
171
+ th {
172
+ padding: variables.$spacing-xs variables.$spacing-sm;
173
+ font-size: 0.875rem;
174
+ font-weight: bold;
175
+ color: variables.$text-alt;
176
+ }
177
+
178
+ td {
179
+ padding: variables.$spacing-xs variables.$spacing-sm variables.$spacing-sm;
180
+ }
181
+ }
package/dist/styles/common/_fontface.scss ADDED
@@ -0,0 +1,31 @@
1
+ @use "mixins";
2
+ @use "variables";
3
+
4
+ // In order to have a clean a easy to use font, give the same font-family name to all styles.
5
+ // You can then sort them by using the font-style (normal or italic) property
6
+
7
+ // —————————————————————————————————————————————————————————————————
8
+ // list of styles and their weight equivalent
9
+ // —————————————————————————————————————————————————————————————————
10
+ // style name weight variable
11
+ // —————————————————————————————————————————————————————————————————
12
+ // thin, hairline 100 $thin
13
+ // extralight, ultralight 200 $extralight
14
+ // light 300 $light
15
+ // normal, regular 400 $regular
16
+ // medium 500 $medium
17
+ // semibold, demibold 600 $semibold
18
+ // bold 700 $bold
19
+ // extrabold, ultrabold 800 $extrabold
20
+ // black, heavy 900 $contrast
21
+ // —————————————————————————————————————————————————————————————————
22
+
23
+ // —————————————————————————————————————————————————————————————————
24
+ // barlow
25
+ // —————————————————————————————————————————————————————————————————
26
+
27
+ @include mixins.fontface(variables.$font, variables.$font-clean/regular, variables.$font-regular, normal);
28
+ @include mixins.fontface(variables.$font, variables.$font-clean/regularitalic, variables.$font-regular, italic);
29
+
30
+ @include mixins.fontface(variables.$font, variables.$font-clean/semibold, variables.$font-bold, normal);
31
+ @include mixins.fontface(variables.$font, variables.$font-clean/semibolditalic, variables.$font-bold, italic);
package/dist/styles/common/_functions.scss ADDED
@@ -0,0 +1,11 @@
1
+ // —————————————————————————————————————————————————————————————————
2
+ // trim white spaces
3
+ // —————————————————————————————————————————————————————————————————
4
+
5
+ @function str-remove-whitespace($str) {
6
+ @while (str-index($str, ' ') != null) {
7
+ $index: str-index($str, ' ');
8
+ $str: "#{str-slice($str, 0, $index - 1)}#{str-slice($str, $index + 1)}";
9
+ }
10
+ @return $str;
11
+ }
package/dist/styles/common/_global.scss ADDED
@@ -0,0 +1,157 @@
1
+ @use "mixins";
2
+ @use "variables";
3
+
4
+ html {
5
+ scroll-behavior: smooth;
6
+ }
7
+
8
+ body {
9
+ font-family: variables.$font-fallback;
10
+ font-size: 16px;
11
+ line-height: 1.5;
12
+ font-weight: variables.$font-regular;
13
+ background-color: variables.$background-default;
14
+ color: variables.$text;
15
+ // needed for footer margin-top: auto if content smaller than viewport height
16
+ display: flex;
17
+ flex-direction: column;
18
+ min-height: 100vh;
19
+
20
+ &:after {
21
+ transition: opacity variables.$transition-md;
22
+ content: '';
23
+ position: fixed;
24
+ background-color: variables.$overlay;
25
+ height: 100vh;
26
+ width: 100vw;
27
+ top: 0;
28
+ left: 0;
29
+ opacity: 0;
30
+ z-index: 12;
31
+ pointer-events: none;
32
+ }
33
+
34
+ &.js-sidebar,
35
+ &.js-navbar {
36
+ overflow: hidden;
37
+
38
+ &:after {
39
+ opacity: 1;
40
+ pointer-events: initial;
41
+ }
42
+ }
43
+
44
+ &.js-navbar:after {
45
+ z-index: 10;
46
+ }
47
+ }
48
+
49
+ // stick to bottom of page when page height smaller than viewport height
50
+ footer {
51
+ margin-top: auto;
52
+ }
53
+
54
+ // embed responsively
55
+
56
+ .embed-container {
57
+ position: relative;
58
+ padding-bottom: 56.25%;
59
+ height: 0;
60
+ overflow: hidden;
61
+ max-width: 100%;
62
+ border-radius: variables.$spacing-md;
63
+
64
+ iframe, object, embed {
65
+ position: absolute;
66
+ top: 0;
67
+ left: 0;
68
+ width: 100%;
69
+ height: 100%;
70
+ }
71
+ }
72
+
73
+ // text selection
74
+ ::-moz-selection {
75
+ background: variables.$primary;
76
+ color: variables.$primary-contrast;
77
+ }
78
+
79
+ ::selection {
80
+ background: variables.$primary;
81
+ color: variables.$primary-contrast;
82
+ }
83
+
84
+ ::-moz-selection {
85
+ background: variables.$primary;
86
+ color: variables.$primary-contrast;
87
+ }
88
+
89
+ // remove autocomplete from webkit browsers
90
+
91
+ input:-webkit-autofill,
92
+ input:-webkit-autofill:hover,
93
+ input:-webkit-autofill:focus,
94
+ textarea:-webkit-autofill,
95
+ textarea:-webkit-autofill:hover
96
+ textarea:-webkit-autofill:focus,
97
+ select:-webkit-autofill,
98
+ select:-webkit-autofill:hover,
99
+ select:-webkit-autofill:focus {
100
+ -webkit-box-shadow: 0 0 0px 1000px variables.$primary-light inset;
101
+ @include mixins.transition(variables.$transition-md, background-color);
102
+ }
103
+
104
+ // prevent images from stretching with flex
105
+
106
+ img {
107
+ align-self: center;
108
+ width: 100%;
109
+ flex-shrink: 0;
110
+ }
111
+
112
+ // lists
113
+
114
+ ul {
115
+ list-style: disc;
116
+ }
117
+
118
+ li {
119
+ margin-left: variables.$spacing-md;
120
+
121
+ & + & {
122
+ padding-top: variables.$spacing-xs;
123
+ }
124
+ }
125
+
126
+ // buttons and links
127
+
128
+ button,
129
+ a {
130
+ outline-color: variables.$primary;
131
+ cursor: pointer;
132
+ }
133
+
134
+ // iframe
135
+
136
+ iframe {
137
+ display: block; // remove bottom spacing
138
+ width: 100%;
139
+ border-radius: variables.$border-radius-md;
140
+ border: variables.$border;
141
+ }
142
+
143
+ strong {
144
+ font-weight: variables.$font-bold;
145
+ }
146
+
147
+ // z-index
148
+
149
+ @for $i from 0 through 9 {
150
+ .z-index--#{$i} { z-index: $i; }
151
+ }
152
+
153
+ // background
154
+
155
+ .background-cover {
156
+ @include mixins.background(50% 50%, cover);
157
+ }