Skip to content
This repository was archived by the owner on Oct 19, 2021. It is now read-only.

Commit f79a16e

Browse files
committed
Fix readme, display & mixins
1 parent b6af3fb commit f79a16e

File tree

4 files changed

+19
-25
lines changed

4 files changed

+19
-25
lines changed

README.md

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
![contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat) ![GitHub Repo stars](https://img.shields.io/github/stars/code-collabo/less-css-helper-library) ![GitHub forks](https://img.shields.io/github/forks/code-collabo/less-css-helper-library) ![GitHub issues](https://img.shields.io/github/issues/code-collabo/less-css-helper-library?color=red) ![GitHub pull requests](https://img.shields.io/github/issues-pr/code-collabo/less-css-helper-library?color=goldenrod)
55

66

7-
The [less-css-helper-library](https://github.com/code-collabo/less-css-helper-library) for css, less and frontend projects. Related (css) key value pairs often used together are stored in css classes for easy use, reuse and to help quickly structure your projects. Styles or classes do not reflect personal preference(s), ***built-in css styles*** are only made accessible in your projects just by adding a class to an html element.
7+
The [less-css-helper-library](https://github.com/code-collabo/less-css-helper-library) for css, less and frontend projects. Related (css) key value pairs often used together are stored in css classes for easy use, reuse and to help quickly structure your projects. ***Built-in css styles*** are made accessible in your projects just by adding a class to an html element.
88

99

1010
## Styles & classes
@@ -17,8 +17,8 @@ The library provides some [reset styles](https://github.com/code-collabo/less-cs
1717
* `.grid`
1818
* `.grid-auto-1-auto-row`
1919
* `.flex`
20-
* `.flex-space-btw`
2120
* `.flex-auto`
21+
* `.flex-space-btw`
2222
* `.flex-space-btw-auto`
2323
* `.flex-center`
2424
* `.flex-j-center`
@@ -55,7 +55,9 @@ If you are using less in an angular project for example, reference the one for l
5555
`@import 'node_modules/@code-collabo/less-css-helper-library/less/styles.less';`
5656

5757
#### Using CDN:
58-
Add cdn content here once you have created & tested it.
58+
For projects that don't use nodejs, add the cdn as href value for your link tag in the .html file. Make sure to add this before the other link tags used to reference your own css styles.
59+
60+
`<link rel="stylesheet" href="https://code-collabo.github.io/less-css-helper-library/css/styles.css">`
5961

6062
#### Class names:
6163
From the class names, it's easy to tell what they do. See effect when added to an html element below:
@@ -84,9 +86,10 @@ The library is maintained by just one person at the moment - [@Ifycode](https://
8486
* Group property-value pairs that are related or are often used together in one class so that it is reusable.
8587
* The styles or classes (names) you propose must give good idea of the property-value pairs stored in it.
8688
* Styles or classes proposed must be usable in any section inside the body of html documents.
89+
<!--
8790
* Styles or classes proposed must not reflect personal preference(s). The aim is to make ***built-in css styles*** accessible in the user's projects just by adding a class to an html element.
91+
-->
8892
* Do not make changes directly in the `main` or `develop` branches. See [development environment & git workflow](https://github.com/code-collabo/node-mongo-docs/issues/2) on how to make changes to the code base and submit pull request.
8993

9094
## Technologies
91-
[<img alt="CSS 3" width="25px" src="https://raw.githubusercontent.com/github/explore/80688e429a7d4ef2fca1e82350fe8e3517d3494d/topics/css/css.png" />](https://github.com/code-collabo/less-css-helper-library)
92-
[<img alt="less" height="20px" src="http://lesscss.org/public/img/less_logo.png" />](https://github.com/code-collabo/less-css-helper-library)
95+
[<img alt="CSS 3" width="25px" src="https://raw.githubusercontent.com/github/explore/80688e429a7d4ef2fca1e82350fe8e3517d3494d/topics/css/css.png" />](https://github.com/code-collabo/less-css-helper-library) [<img alt="less" height="20px" src="http://lesscss.org/public/img/less_logo.png" />](https://github.com/code-collabo/less-css-helper-library) [<img alt="node js" height="25px" src="https://nodejs.org/static/images/logos/nodejs-new-pantone-black.svg" />](https://github.com/code-collabo/less-css-helper-library)

css/styles.css

Lines changed: 5 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,6 @@
1+
/* reset styles */
12
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400;500&display=swap');
23
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;600&display=swap');
3-
.flex-space-btw {
4-
display: flex;
5-
justify-content: space-between;
6-
}
7-
.flex-center {
8-
display: flex;
9-
justify-content: center;
10-
align-items: center;
11-
}
12-
/* reset styles */
134
* {
145
margin: 0;
156
border: 0;
@@ -75,14 +66,14 @@ button:disabled {
7566
.flex {
7667
display: flex;
7768
}
78-
.flex-space-btw {
79-
display: flex;
80-
justify-content: space-between;
81-
}
8269
.flex-auto {
8370
display: flex;
8471
margin: 0 auto;
8572
}
73+
.flex-space-btw {
74+
display: flex;
75+
justify-content: space-between;
76+
}
8677
.flex-space-btw-auto {
8778
display: flex;
8879
justify-content: space-between;

less/00-helpers/mixins.less

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -63,12 +63,12 @@
6363
@auto-margin();
6464
}
6565

66-
.flex-space-btw {
66+
.flex-space-btw() {
6767
@flex();
6868
@justify-space-btw();
6969
}
7070

71-
.flex-center {
71+
.flex-center() {
7272
@flex();
7373
@justify-center();
7474
@align-center();

less/02-style/display.less

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -42,14 +42,14 @@
4242
@flex();
4343
}
4444

45-
.flex-space-btw {
46-
.flex-space-btw();
47-
}
48-
4945
.flex-auto {
5046
.flex-auto();
5147
}
5248

49+
.flex-space-btw {
50+
.flex-space-btw();
51+
}
52+
5353
.flex-space-btw-auto {
5454
.flex-space-btw();
5555
@auto-margin();

0 commit comments

Comments
 (0)