Skip to content

Commit 992071c

Browse files
aghontpiaghontpi
committed
feat: scss, docs, initial build
0 parents  commit 992071c

File tree

22 files changed

+4533
-0
lines changed

22 files changed

+4533
-0
lines changed

‎.gitignore‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
node_modules
2+
dist
3+
docs/.vitepress/cache
4+
docs/.vitepress/dist
5+
*.log
6+
minimal-css-utility*

‎README.md‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
# Minimal CSS Utility
2+
3+
A SCSS utility library for building modern websites.
4+
5+
6+
## Documentation
7+
you can view it from, the full documentation for the utility classes can be found in the `docs/` directory of this repository.
8+
9+
10+
## Motivation
11+
12+
For my projects, I use reset.css and a set of utility classes without external libraries, I copy and paste them from project to project. This eliminates it and makes it easier to maintain and see the docs easily as well.
13+
14+
## Features
15+
16+
- Reset CSS
17+
- Grid Layout
18+
- Utility classes for:
19+
- Display
20+
- Flexbox
21+
- Sizing
22+
- Spacing
23+
- Typography
24+
25+
26+
27+
28+
## Installation
29+
30+
Install the package from npm:
31+
32+
```bash
33+
npm install minimal-css-utility
34+
35+
# or using yarn
36+
37+
yarn add minimal-css-utility
38+
39+
# or using pnpm
40+
pnpm add minimal-css-utility
41+
```
42+
43+
## Usage
44+
45+
You can either import the compiled CSS file into your project or import the SCSS files.
46+
47+
### CSS
48+
49+
Import the `min.css` file in your main CSS file:
50+
51+
```css
52+
@import "minimal-css-utility/dist/min.css";
53+
```
54+
55+
### SCSS
56+
57+
Import the `style.scss` file in your main SCSS file:
58+
59+
```scss
60+
@import "minimal-css-utility/scss/style.scss";
61+
```
62+
63+
## Building from source
64+
65+
If you want to build the CSS from the source SCSS files, you can do so by following these steps:
66+
67+
1. Clone the repository:
68+
69+
```bash
70+
git clone https://github.com/aghontpi/minimal-css-skeleton.git
71+
```
72+
73+
2. Install the dependencies:
74+
75+
```bash
76+
pnpm install
77+
```
78+
79+
3. Build the project:
80+
81+
```bash
82+
pnpm build
83+
```
84+
85+
This will generate the `dist/min.css` file.

‎docs/.vitepress/config.js‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
export default {
2+
title: 'Minimal CSS',
3+
description: 'A SCSS theme documentation site.',
4+
base: "/minimal-css-utility/",
5+
themeConfig: {
6+
nav: [
7+
{ text: 'Home', link: '/' },
8+
{ text: 'Guide', link: '/getting-started/introduction' },
9+
{ text: 'Github', link: 'https://github.com/aghontpi/minimal-css-utility/' }
10+
],
11+
sidebar: [
12+
{
13+
text: 'Getting Started',
14+
items: [
15+
{ text: 'Introduction', link: '/getting-started/introduction' },
16+
{ text: 'Breakpoints', link: '/getting-started/breakpoints' },
17+
{ text: 'CSS Reset', link: '/getting-started/reset' }
18+
]
19+
},
20+
{
21+
text: 'Layout',
22+
items: [
23+
{ text: 'Grid', link: '/layout/grid' },
24+
]
25+
},
26+
{
27+
text: 'Utilities',
28+
items: [
29+
{ text: 'Spacing', link: '/utilities/spacing' },
30+
{ text: 'Display', link: '/utilities/display' },
31+
{ text: 'Flexbox', link: '/utilities/flexbox' },
32+
{ text: 'Sizing', link: '/utilities/sizing' },
33+
{ text: 'Typography', link: '/utilities/typography' },
34+
]
35+
}
36+
],
37+
search: {
38+
provider: 'local'
39+
}
40+
}
41+
}

‎docs/.vitepress/theme/custom.css‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
2+
3+
:root {
4+
--vp-font-family-base: 'Inter', sans-serif !important;
5+
--vp-font-family-mono: 'Inter', sans-serif !important;
6+
}
7+
8+
html, body {
9+
font-family: 'Inter', sans-serif !important;
10+
}
11+
12+
ul li, ol li {
13+
line-height: 1.5;
14+
}

‎docs/.vitepress/theme/index.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import DefaultTheme from 'vitepress/theme'
2+
import '../../../dist/min.css'
3+
import './custom.css'
4+
5+
export default {
6+
...DefaultTheme,
7+
}

‎docs/getting-started/breakpoints.md‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
# Breakpoints
2+
3+
This theme uses a set of responsive breakpoints to ensure that your layouts and utilities adapt to different screen sizes. All of my utility systems (Grid, Display, Flexbox, Sizing, Spacing, and Typography) use these same breakpoints.
4+
5+
## How it Works
6+
7+
This theme's utility classes are applied from the specified breakpoint and up, meaning they affect that screen size and all larger ones. For example, a class with a `-md-` infix will apply to medium screens, large screens, and extra-large screens.
8+
9+
## Breakpoint Values
10+
11+
Here are the breakpoints I use throughout my system:
12+
13+
- **`xs`** (extra-small): 0px (default, no media query needed)
14+
- **`sm`** (small): 576px
15+
- **`md`** (medium): 768px
16+
- **`lg`** (large): 992px
17+
- **`xl`** (extra-large): 1200px
18+
19+
## Example Usage
20+
21+
You can use these breakpoints as suffixes to utility classes to create responsive designs.
22+
23+
<div class="d-block d-md-flex d-lg-none" style="background-color: #f8f9fa; padding: 1rem; border: 1px solid #dee2e6;">
24+
<div style="background-color: #e9ecef; padding: 1rem; margin: 0.5rem;">Item 1</div>
25+
<div style="background-color: #e9ecef; padding: 1rem; margin: 0.5rem;">Item 2</div>
26+
</div>
27+
28+
<p><strong>Resize your browser to see the changes:</strong></p>
29+
<ul>
30+
<li><strong>On extra-small and small screens (<code>&lt;768px</code>):</strong> The container is a block element, and the items are stacked vertically.</li>
31+
<li><strong>On medium screens (<code>&ge;768px</code> and <code>&lt;992px</code>):</strong> The container becomes a flex container, and the items are displayed side-by-side.</li>
32+
<li><strong>On large and extra-large screens (<code>&ge;992px</code>):</strong> The entire container is hidden.</li>
33+
</ul>
34+
35+
```html
36+
<div class="d-block d-md-flex d-lg-none">
37+
<div>Item 1</div>
38+
<div>Item 2</div>
39+
</div>
40+
```

‎docs/getting-started/introduction.md‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
# Introduction
2+
3+
Welcome to the documentation for Minimal CSS Utility. This theme is designed to provide a solid foundation for building modern, responsive websites with minimal effort. It includes a CSS reset, a responsive grid system, and a variety of utility classes to help you style your content quickly and efficiently.
4+
5+
## Installation
6+
7+
::: code-group
8+
```bash [npm]
9+
npm install minimal-css-utility
10+
```
11+
```bash [yarn]
12+
yarn add minimal-css-utility
13+
```
14+
```bash [pnpm]
15+
pnpm add minimal-css-utility
16+
```
17+
:::
18+
19+
To use this utility in your project, you can either link to the compiled CSS file from the `dist` directory or import the SCSS files into your own stylesheet.
20+
21+
### Linking the CSS
22+
23+
```html
24+
<link rel="stylesheet" href="minimal-css-utility/dist/min.css">
25+
```
26+
27+
### Importing the SCSS
28+
29+
```css
30+
@import 'minimal-css-utility/dist/min.css';
31+
```
32+
33+
```scss
34+
@import 'minimal-css-utility/scss/style.scss';
35+
```
36+
37+
## Usage
38+
39+
This provides a set of utility classes and a responsive grid system to help you build your website quickly and easily. Refer to the documentation for each feature to learn more about how to use them.

‎docs/getting-started/reset.md‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
# CSS Reset
2+
3+
This utility includes a CSS reset to ensure consistent styling across all browsers. This reset file removes the default browser styling for most HTML elements, providing a clean slate to build upon.
4+
5+
For reference, here is the CSS reset included in this utility:
6+
7+
```scss
8+
html, body, div, span, applet, object, iframe,
9+
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
10+
a, abbr, acronym, address, big, cite, code,
11+
del, dfn, em, img, ins, kbd, q, s, samp,
12+
small, strike, strong, sub, sup, tt, var,
13+
b, u, i, center,
14+
dl, dt, dd, ol, ul, li,
15+
fieldset, form, label, legend,
16+
table, caption, tbody, tfoot, thead, tr, th, td,
17+
article, aside, canvas, details, embed,
18+
figure, figcaption, footer, header, hgroup,
19+
menu, nav, output, ruby, section, summary,
20+
time, mark, audio, video {
21+
margin: 0;
22+
padding: 0;
23+
border: 0;
24+
font-size: 100%;
25+
font: inherit;
26+
vertical-align: baseline;
27+
}
28+
/* HTML5 display-role reset for older browsers */
29+
article, aside, details, figcaption, figure,
30+
footer, header, hgroup, menu, nav, section {
31+
display: block;
32+
}
33+
body {
34+
line-height: 1;
35+
}
36+
ol, ul {
37+
list-style: none;
38+
}
39+
blockquote, q {
40+
quotes: none;
41+
}
42+
blockquote:before, blockquote:after,
43+
q:before, q:after {
44+
content: '';
45+
content: none;
46+
}
47+
table {
48+
border-collapse: collapse;
49+
border-spacing: 0;
50+
}
51+
52+
* {
53+
box-sizing: border-box;
54+
}
55+
```

‎docs/index.md‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
---
2+
layout: home
3+
4+
hero:
5+
name: "Minimal CSS Utility"
6+
text: "A Lightweight, minimal CSS utility library."
7+
tagline: "Minimal boilerplate, quick and easy to setup."
8+
actions:
9+
- theme: brand
10+
text: Get Started
11+
link: /getting-started/introduction
12+
- theme: alt
13+
text: View on GitHub
14+
link: https://github.com/aghontpi/minimal-css-utility
15+
16+
features:
17+
- title: "Responsive Grid System"
18+
details: "12-column flexbox grid system. Learn about columns, rows, and nesting."
19+
- title: "Utility Classes"
20+
details: "Set of utility classes for display, flexbox, sizing, spacing, and typography."
21+
- title: "Includes CSS Reset"
22+
details: "CSS reset normalizes styling across browsers"
23+
---

0 commit comments

Comments
 (0)