Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/teshanecrawford/tc-css-starter
An opinionated CSS starter
https://github.com/teshanecrawford/tc-css-starter
css-flexbox css-grid css3 cssreset learn nuxt3 starter-kit
Last synced: about 2 months ago
JSON representation
An opinionated CSS starter
- Host: GitHub
- URL: https://github.com/teshanecrawford/tc-css-starter
- Owner: TeshaneCrawford
- Created: 2024-05-09T03:02:55.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2024-05-09T03:42:42.000Z (8 months ago)
- Last Synced: 2024-05-10T03:31:24.861Z (8 months ago)
- Topics: css-flexbox, css-grid, css3, cssreset, learn, nuxt3, starter-kit
- Language: CSS
- Homepage:
- Size: 99.6 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# CSS Starter Kit
A simple CSS starter kit to get you started with your next project. It includes a basic CSS reset, css custom properties, typography, media queries, few components, dark mode, a grid system, and more.
## Features
- CSS Reset
- CSS Custom Properties
- Typography
- Media Queries
- Components
- Dark Mode
- Grid System
## Components
- Alert
- Badge
- Button
- Card
- Dropdown
- Form
- Modal
- Navbar
- Pagination
- Progress
- Table
- Tabs
- Toast
## Grid System
The grid system is based on the 12-column grid system. It uses CSS custom properties to define the grid layout.
```html
12
6
6
4
4
4
3
3
3
3
```
## Dark Mode
The dark mode is implemented using CSS custom properties and JavaScript. It uses the `prefers-color-scheme` media feature to detect the user's preferred color scheme.
```css
:root {
--
color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
:root {
--color-scheme: dark light;
}
}
body {
color-scheme: var(--color-scheme);
}
```
```vue
Toggle Dark Mode
const toggleDarkMode = () => {
document.documentElement.classList.toggle('dark');
};
```
## Typography
The typography is based on the `Inter` font family. It includes the following font weights:
- 300
- 400
- 500
- 600
- 700
```css
body {
font-family: 'Inter', sans-serif;
font-weight: 400;
font-size: 1rem;
line-height: 1.5;
}
```
```html
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Paragraph
Link
Button
Label
```
## Media Queries
The media queries are based on the following breakpoints:
- 576px
- 768px
- 992px
- 1200px
```css
@media (min-width: 576px) {
/* Styles */
}
@media (min-width: 768px) {
/* Styles */
}
@media (min-width: 992px) {
/* Styles */
}
@media (min-width: 1200px) {
/* Styles */
}
```
```html
Hidden on mobile
Hidden on desktop
```
## CSS Custom Properties
The CSS custom properties are used to define the color scheme, grid layout, and spacing.
```css
:root {
-- primary-color: #007bff;
--secondary-color: #6c757d;
--success-color: #28a745;
--info-color: #17a2b8;
--warning-color: #ffc107;
--danger-color: #dc3545;
--light-color: #f8f9fa;
--dark-color: #343a40;
--gray-color: #6c757d;
--white-color: #fff;
--black-color: #000;
--grid-gap: 1rem;
--container-max-width: 1140px;
}
body {
color: var(--black-color);
background-color: var(--white-color);
}
```
```html
Container
Column
Column
```
## CSS Reset
The CSS reset is based on the `normalize.css` library. It includes the following styles:
- Box-sizing
- Margin
- Padding
- List
- Table
- Form
- Button
- Image
- Typography
```css
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
ul[class],
ol[class] {
padding: 0;
margin: 0;
list-style: none;
}
img {
max-width: 100%;
height: auto;
}
button,
input,
optgroup,
select,
textarea {
padding: 0;
margin: 0;
font-family: inherit;
font-size: inherit;
line-height: inherit;
color: inherit;
}
```
```html
- Item
- Item
- Item
```
## Setup
Make sure to install the dependencies:
```bash
# npm
npm install
# pnpm
pnpm install
# yarn
yarn install
# bun
bun install
```
## Development Server
Start the development server on `http://localhost:3000`:
```bash
# npm
npm run dev
# pnpm
pnpm run dev
# yarn
yarn dev
# bun
bun run dev
```
## Production
Build the application for production:
```bash
# npm
npm run build
# pnpm
pnpm run build
# yarn
yarn build
# bun
bun run build
```
Locally preview production build:
```bash
# npm
npm run preview
# pnpm
pnpm run preview
# yarn
yarn preview
# bun
bun run preview
```
Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.