https://github.com/19h47/19h47-architecture

🏗
https://github.com/19h47/19h47-architecture

architecture bootstrap sass scss scss-framework

Last synced: about 1 month ago
JSON representation

🏗

• Host: GitHub
• URL: https://github.com/19h47/19h47-architecture
• Owner: 19h47
• Created: 2018-02-27T14:38:34.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2023-07-12T15:29:13.000Z (over 1 year ago)
• Last Synced: 2024-10-02T03:22:44.065Z (about 2 months ago)
• Topics: architecture, bootstrap, sass, scss, scss-framework
• Language: SCSS
• Homepage:
• Size: 1.64 MB
• Stars: 7
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Architecture

[![devDependencies Status](https://david-dm.org/19h47/architecture/dev-status.svg)](https://david-dm.org/19h47/architecture?type=dev)

[![dependencies Status](https://david-dm.org/19h47/architecture/status.svg)](https://david-dm.org/19h47/architecture)

An opinionated SCSS architecture based on [Hugo Giraudel](https://github.com/HugoGiraudel)'s work.

![Architecture](architecture.png)

## Dependencies

-   [Bootstrap 4.5.3](https://github.com/twbs/bootstrap), we only load the grid for convenience (see the [bootstrap-custom](https://github.com/19h47/architecture/blob/master/assets/stylesheets/vendors/_bootstrap-custom.scss) and the [bootstrap-custom-variables](https://github.com/19h47/architecture/blob/master/assets/stylesheets/vendors/_bootstrap-custom-variables.scss) files)

-   [Ress](https://github.com/filipelinhares/ress), a modern CSS reset

## [Utilities variables](https://github.com/19h47/architecture/blob/master/src/stylesheets/utilities/_variables.scss)

Use is as it or overide it!

```scss

$base-unit: px;

$cursors: auto pointer grab grabbing none;

$text-transforms: uppercase;

$displays: block inline-block inline none;

$floats: left;

$style-types: none;

$overflow-values: hidden visible;

$positions: relative;

$size-dimensions: 50 100;

$text-aligns: center;

$vertical-aligns: middle bottom;

$visibilities-displays: inline-block block inline;

$white-space-values: nowrap;

$letters-spacings: 50;

```

## Tasks

### Development

```bash

npm run dev

```

### Production

Autoprefixer and compressed

```bash

npm run prod

```

### Server

```bash

npm run start

```

## References

-   [Sass Guidelines](https://sass-guidelin.es/#architecture)