amazium - GitLite

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #golang #android #machine-learning #deep-learning #nodejs #cli #security #mcp #ios

amazium

(★ 164)

The responsive CSS web framework

파일 탐색기

최종 버전 다운로드 (.zip)

- _base.scss
- _buttons.scss
- _columns.scss
- _form.scss
- _grid.scss
- _variables.scss
- amazium.scss
.gitignore
.npmignore
.travis.yml
gulpfile.js
LICENSE
npm-shrinkwrap.json
package.json
README.md

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/OwlyStuff/amazium

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd amazium

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

npm install amazium --save-dev

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Amazium [![Build Status](https://travis-ci.org/OwlyStuff/amazium.svg?branch=master)](https://travis-ci.org/OwlyStuff/amazium)

Responsive CSS Framework

__*Literally*__ Too orangey for crows!

See [Amazium.co.uk](https://www.amazium.co.uk)

### Ember-CLI application setup

It is not possible to directly import CSS assets into an ember-cli application at the moment and therefore the following configuration steps are required to get amazium working with an ember cli application.

#### Install amazium

Run the following in your application root to install amazium:

```
npm install amazium --save-dev
```

#### Install ember-cli addon to import css assets from node modules

Run the following in your application root:

```
ember install ember-cli-node-assets
```

#### Import amazium compiled CSS in your application

Update the Ember CLI build file to include the amazium compiled CSS from the node package:

```javascript
// ember-cli-build.js
var app = new EmberApp(defaults, {
  ...
  nodeAssets: {
    'amazium': {
      srcDir: 'dist',
      import: ['amazium.css']
    }
  }
});
```

### Creating an Amazium build with a custom grid

#### Adjust the grid parameters

The default parameters for the amazium grid are adjustable. You can set your own values in the _variables.scss file. When the SASS is compiled the grid values are calculated according to the set values. With these variable it is now possible to build a 1440px grid with 16 columns or whatever you wish.

```sass
/***** Define grid width *****/
$grid-width: 1200px;
$grid-width-smscreen: 960px;
$grid-width-tablet: 768px;

/***** Define column number *****/
$grid-columns: 12;

/***** Define gutter spacing *****/
$grid-gutter: 20px;

/***** Calculate gutter spacing for breakpoints / can also be set manually *****/
$grid-gutter-smscreen: $grid-gutter / 1.25;
$grid-gutter-tablet: $grid-gutter-smscreen / 1.1;
```

##### Variables in detail

* `$grid-width` controls how wide the initial grid is.
* `$grid-width-smscreen` controls how wide the grid on small screens is. This value also contols the smallscreen breakpoint.
* `$grid-width-tablet` controls how wide the grid on tablets is. This value also contols the tablet breakpoint.
* `$grid-columns` controls how much columns there are.
* `$grid-gutter` controls how much space there is between columns.
* `$grid-gutter-smscreen` calculates how much space there is between columns on small screens. Can also be set manually.
* `$grid-gutter-tablet` calculates how much space there is between columns on tablets. Can also be set manually.