Skip to content

Commit beac05b

Browse files
atomicpagesatomicpages
committed
Simplifying docs
1 parent fa87ee2 commit beac05b

File tree

2 files changed

+33
-251
lines changed

2 files changed

+33
-251
lines changed

‎.npmignore‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,5 @@
1-
sache.json
2-
.gitignore
3-
.gitattributes
4-
.editorconfig
5-
bower.json
61
main.css
72
main.css.map
83
main.scss
94
docs/
5+
.DS_Store

‎README.md‎

Lines changed: 32 additions & 246 deletions
Original file line numberDiff line numberDiff line change
@@ -3,320 +3,106 @@
33
[![All Contributors](https://img.shields.io/badge/all_contributors-9-orange.svg?style=flat-square)](#contributors-)
44
<!-- ALL-CONTRIBUTORS-BADGE:END -->
55

6-
Skeleton Sass is a highly modular version of [Skeleton CSS](http://getskeleton.com).
6+
Skeleton Sass is a highly modular version of [Skeleton CSS](http://getskeleton.com) build on top of the popular CSS metalanguage, Sass.
77

88
### Key Features
99

1010
- Ability to seamlessly adjust grids by changing the value of variables
1111
- Themes
1212
- Easy-to-use mixins and functions
13-
- Install Skeleton Sass with bower or npm! No more clunky scripts!
13+
- Install Skeleton Sass with npm! No more clunky scripts!
1414
- [Live demo!](http://atomicpages.github.io/skeleton-sass/demo/index.html)
1515
- [Heavily documented](https://github.com/atomicpages/skeleton-sass/wiki)
1616

17-
### Dependencies
17+
## Getting Started
1818

19-
- node-sass `>=3.5.0` or dart sass `>=1.0.0`
20-
- [normalize-scss](https://github.com/JohnAlbin/normalize-scss)
21-
22-
#### Does this work with other Sass compilers?
23-
24-
Yes! Skeleton Sass has been tested with the official sass compiler and `node-sass` (which wraps libsass):
19+
Skeleton Sass has two dependencies:
2520

26-
- [Dart Sass](https://sass-lang.com/dart-sass) 1.x
27-
- [node-sass](https://www.npmjs.com/package/node-sass) 3.5+
28-
29-
## Installing Skeleton Sass
30-
31-
### From NPM
21+
- node-sass `>=3.5.0`/dart sass `>=1.0.0` (your choice)
22+
- [normalize-scss](https://github.com/JohnAlbin/normalize-scss)
3223

33-
Install from the NPM registry:
24+
Skeleton Sass is available as a node module and can be installed and updated via `npm` or `yarn`.
3425

3526
```sh
3627
npm i skeleton-sass-official normalize-scss -D
3728
yarn add skeleton-sass-official normalize-scss --dev
3829
```
3930

40-
### From Source
41-
42-
If you're not using NPM or Yarn, you can clone the repro:
31+
Alternatively, you can clone the repo and build from source:
4332

4433
```sh
4534
cd path/to/my_dir
4635
git clone https://github.com/atomicpages/skeleton-sass.git
47-
```
48-
49-
Create a file called `skeleton.scss`
5036

51-
On \*nix:
52-
53-
```sh
54-
cd path/to/sass/in/project
37+
# create a blank file
5538
touch skeleton.scss
5639
```
57-
58-
On Windows:
59-
60-
```batch
61-
cd path/to/sass/in/project
62-
echo. 2>skeleton.scss
63-
```
64-
65-
Inside of `skeleton.scss` we need to add our import statements:
40+
Open your `skeleton.scss` file in your text editor and copy these lines:
6641

6742
```scss
68-
@import "path/to/bower_components/normalize-scss/sass/normalize/import-now"; // import normalize-scss
69-
@import "path/to/bower_components/skeleton-sass/src/core/config"; // Skeleton Sass core loader
43+
@import "path/to/node_modules/normalize-scss/sass/normalize/import-now"; // import normalize-scss
44+
@import "path/to/node_modules/skeleton-sass-official/src/core/config"; // Skeleton Sass core loader
7045

7146
// import default theme variables
72-
@import "path/to/bower_components/skeleton-sass/src/themes/fresh/vars"; // theme variable overrides
47+
@import "path/to/node_modules/skeleton-sass-official/src/themes/fresh/vars"; // theme variable overrides
7348

7449
// import default theme styles
75-
@import "path/to/bower_components/skeleton-sass/src/themes/fresh/include_components"; // theme base styles
76-
@import "path/to/bower_components/skeleton-sass/src/themes/fresh/grid"; // theme grid styles
50+
@import "path/to/node_modules/skeleton-sass-official/src/themes/fresh/include_components"; // theme base styles
51+
@import "path/to/node_modules/skeleton-sass-official/src/themes/fresh/grid"; // theme grid styles
7752
```
7853

79-
Building using CLI:
54+
We're ready to build:
8055

8156
```sh
8257
npx sass skeleton.scss skeleton.css
8358
```
8459

85-
#### But wait! What about my themes?!
86-
87-
Skeleton Sass 3 makes it easy to keep your changes external to the core of Skeleton Sass with the new all-partial approach. We'll outline a sample case where we use a custom theme below:
88-
89-
```plain
90-
my_project
91-
└── src
92-
└── sass
93-
├── skeleton.scss # Skeleton folder to keep file structure clean
94-
└── themes
95-
├── _config.scss # Global overrides and applies to all themes
96-
├── _loader.scss # Contains all of the imports
97-
└── my_theme
98-
├── _grid.scss # Theme grid, replaces shipped grids
99-
├── _include_components.scss # Includes all of the components in the components folder
100-
├── _vars.scss # Theme-scoped variables and overrides
101-
├── components
102-
│ ├── _base.scss # Default html and body styles
103-
│ ├── _buttons.scss
104-
│ ├── _forms.scss
105-
│ ├── _links.scss
106-
│ ├── _lists.scss
107-
│ ├── _typography.scss
108-
│ └── _utils.scss # Utility classes
109-
└── mixins
110-
├── _private.scss # Contains all "private" mixins
111-
└── _public.scss # Contains all public mixins
112-
```
113-
114-
Now that we have our sample project outlined, let's see how we can get everything working! Open `_config.scss` and add the following:
115-
116-
**Note:** all relative paths in the examples below fit the file structure above. If you are using a different structure, amend the paths accordingly.
117-
118-
```scss
119-
@import "../../../node_modules/skeleton-sass/src/core/config";
120-
121-
// Global var overrides
122-
```
123-
124-
Now open `_loader.scss` and add the following:
125-
126-
```scss
127-
@import "config";
128-
129-
// import theme, overrides, and extras
130-
@import "themes/MyTheme/vars";
131-
@import "themes/MyTheme/include_components";
132-
@import "themes/MyTheme/grid";
133-
```
134-
135-
Finally, open `skeleton.scss` and add the following as the first line of the file:
136-
137-
```scss
138-
@import "src/loader";
139-
```
140-
141-
#### How do I load third party Sass partials into theme?
142-
143-
Glad you asked! Skeleton Sass 3 makes this super easy as well! Depending where you need these mixins, function, and/or variables, you can load them at the appropriate place in your `_loader.scss` file!
144-
145-
For example, let's assume we want to use font-awesome inside of our `skeleton.scss` file, we could modify the `_loader.scss` file as follows:
146-
147-
```scss
148-
@import "config";
149-
150-
// import theme, overrides, and extras
151-
@import "themes/MyTheme/vars";
152-
@import "themes/MyTheme/include_components";
153-
@import "themes/MyTheme/grid";
154-
155-
// import extras
156-
@import "../../../node_modules/font-awesome/scss/font-awesome";
157-
```
158-
159-
**Note:** the position of the import changes which files have access to the loaded data. For example, if you need the data in `themes/MyTheme/grid` then you'd need to move the import above the line where you import `themes/MyTheme/grid`.
160-
161-
For more information on why we made this change, [click here](#change).
60+
## Documentation
16261

163-
#### Upgrading From 2.x
62+
Skeleton Sass is heavily documented. If you're looking for a detailed description (or just want more info) you can view all the [wiki pages here](https://github.com/atomicpages/skeleton-sass/wiki/_pages). Popular articles:
16463

165-
Skeleton Sass 3 is decently compatible to the 2.x series, but requires some manual labor (i.e. copy and pasting multiple files to the 2.x series).
64+
- [Introduction to Skeleton Sass](https://github.com/atomicpages/skeleton-sass/wiki)
65+
- [Function API](https://github.com/atomicpages/skeleton-sass/wiki/Function-API)
66+
- [Core Variable API](https://github.com/atomicpages/skeleton-sass/wiki/Core-Variable-API)
67+
- [Mixin API](https://github.com/atomicpages/skeleton-sass/wiki/Mixin-API)
68+
- [Learn how to set up Skeleton Sass for the first time here](https://github.com/atomicpages/skeleton-sass/wiki/Setting-up-Skeleton-Sass-for-first-time-use).
16669

167-
#### Upgrading From 1.x
70+
## Themes
16871

169-
Skeleton Sass 2 is **not** backwards compatible with Skeleton Sass 1.x due to a major change in the file structure. However, we have a [wiki article](https://github.com/atomicpages/skeleton-sass/wiki/Upgrade-from-1-to-2) that explains how to upgrade from Skeleton Sass 1 to Skeleton Sass 2.
72+
Since v2, themes have been supported. Updates (and subsequent pulls from the repo) will not clobber your themes. For more information on how to create a [theme of your own, head over to the wiki](https://github.com/atomicpages/skeleton-sass/wiki/Creating-a-theme).
17073

171-
#### Looking for older versions of Skeleton Sass?
74+
## Legacy Versions
17275

76+
- Skeleton Sass 3
77+
- [Version 3 branch](https://github.com/atomicpages/skeleton-sass/tree/3.x-master)
17378
- Skeleton Sass 2
17479
- [Version 2 branch](https://github.com/atomicpages/skeleton-sass/tree/2.x-master)
17580
- [Version 2 docs](https://github.com/atomicpages/skeleton-sass/wiki/Version-2-Docs)
17681
- Skeleton Sass
17782
- [Version 1 branch](https://github.com/atomicpages/skeleton-sass/tree/1.x-master)
17883
- [Version 1 docs](https://github.com/atomicpages/skeleton-sass/wiki/Version-1-Docs)
17984

180-
#### New to Sass?
181-
182-
Check out our [wiki](https://github.com/atomicpages/skeleton-sass/wiki) for a more in-depth look at Skeleton Sass, information regarding installing ruby, Sass, and other valuable resources.
183-
184-
## TL;DR
185-
186-
Skeleton Sass is a Sass port of Skeleton CSS. Skeleton Sass 3 decouples itself from your project so you can consume it without worrying if your package manager will clobber all of your hard work.
187-
188-
### Features
189-
190-
1. Modular
191-
2. Decoupled core code
192-
3. Decoupled theme files for rapid theme development
193-
4. Extensible
194-
195-
### File Overview
196-
197-
```
198-
src/ # Where all of the magic happens
199-
├── core
200-
│   ├── _config.scss # Default global configuration variables
201-
│   ├── _dependencies.scss # Default global logic for Skeleton Sass
202-
│   ├── _functions.scss # Default global functions for Skeleton Sass
203-
│   └── _mixins.scss # Default global mixins for Skeleton Sass
204-
└── themes # Where all of the themes live
205-
├── fresh
206-
│   ├── _grid.scss
207-
│   ├── _include_components.scss # partial to import all of the components
208-
│   ├── _vars.scss # Project-scoped configuration options and variables
209-
│   ├── components
210-
│   │   ├── _base.scss
211-
│   │   ├── _buttons.scss
212-
│   │   ├── _forms.scss
213-
│   │   ├── _links.scss
214-
│   │   ├── _lists.scss
215-
│   │   ├── _misc.scss
216-
│   │   ├── _normalize.scss
217-
│   │   ├── _tables.scss
218-
│   │   ├── _typography.scss
219-
│   │   └── _utils.scss
220-
│   └── mixins # Stores all project-level functions and mixins
221-
│   └── _mixins.scss
222-
├── original
223-
│   ├── _grid.scss
224-
│   ├── _include_components.scss # partial to import all of the components
225-
│   ├── _vars.scss # Project-scoped configuration options and variables
226-
│   ├── components
227-
│   │   ├── _base.scss
228-
│   │   ├── _buttons.scss
229-
│   │   ├── _forms.scss
230-
│   │   ├── _links.scss
231-
│   │   ├── _lists.scss
232-
│   │   ├── _typography.scss
233-
│   │   └── _utils.scss
234-
│   └── mixins # Stores all project-level functions and mixins
235-
│   ├── _private.scss
236-
│   └── _public.scss
237-
└── wing
238-
├── _grid.scss
239-
├── _include_components.scss # partial to import all of the components
240-
├── _vars.scss # Project-scoped configuration options and variables
241-
└── components
242-
├── _base.scss
243-
├── _buttons.scss
244-
├── _forms.scss
245-
├── _links.scss
246-
├── _lists.scss
247-
├── _misc.scss
248-
├── _typography.scss
249-
└── _utils.scss
250-
```
251-
252-
Install Skeleton Sass as a dependency via NPM or Yarn:
253-
254-
```sh
255-
npm install --save-dev skeleton-sass-official
256-
yarn add skeleton-sass-official --dev
257-
```
258-
259-
**Note:** [bower is deprecated](https://github.com/bower/bower/issues/2298) and we encourage you to adopt modern [workflows like rollup and webpack](https://github.com/atomicpages/skeleton-sass/wiki/Integrating-Skeleton-Sass-into-Dev-Workflows).
260-
261-
~~Install Skeleton Sass with bower via command line:~~
262-
263-
```sh
264-
bower install skeleton-sass --save-dev
265-
bower install skeleton-sass-official --save-dev
266-
```
267-
268-
~~You can also install alpha, beta, release candidate, and previous versions by looking at the [releases](https://github.com/atomicpages/skeleton-sass/releases) page and install with the following syntax:~~
269-
270-
```sh
271-
bower install skeleton-sass#[tag]
272-
bower install skeleton-sass#3.1.0
273-
```
274-
275-
[Learn how to set up Skeleton Sass for the first time here](https://github.com/atomicpages/skeleton-sass/wiki/Setting-up-Skeleton-Sass-for-first-time-use).
276-
277-
### Demo
85+
## Demo
27886

27987
You can see Skeleton Sass in action here: [https://atomicpages.github.io/skeleton-sass](https://atomicpages.github.io/skeleton-sass). Be sure to resize your browser window and see the responsive goodness in action!
28088

281-
### Documentation
282-
283-
Skeleton Sass is heavily documented. If you're looking for a detailed description (or just want more info) you can view all the [wiki pages here](https://github.com/atomicpages/skeleton-sass/wiki/_pages).
284-
285-
##### Resources
89+
## Resources
28690

28791
- [Installing Sass](https://github.com/atomicpages/skeleton-sass/wiki/Installing-Sass)
28892
- [Setting up Skeleton Sass for first time use](https://github.com/atomicpages/skeleton-sass/wiki/Setting-up-Skeleton-Sass-for-first-time-use)
28993
- [Creating a theme](https://github.com/atomicpages/skeleton-sass/wiki/Creating-a-theme)
29094

291-
##### Documentation
292-
293-
- [Introduction to Skeleton Sass](https://github.com/atomicpages/skeleton-sass/wiki)
294-
- [Function API](https://github.com/atomicpages/skeleton-sass/wiki/Function-API)
295-
- [Core Variable API](https://github.com/atomicpages/skeleton-sass/wiki/Core-Variable-API)
296-
- [Mixin API](https://github.com/atomicpages/skeleton-sass/wiki/Mixin-API)
297-
- [Skeleton Sass version 1 Docs](https://github.com/atomicpages/skeleton-sass/wiki/Version-1-Docs)
298-
299-
### License
95+
## License
30096

30197
This project is released under the [MIT license](https://github.com/atomicpages/skeleton-sass/blob/master/license.txt). Who doesn't like free code?
30298

303-
### Found a Bug?
99+
### Contributing
304100

305101
Skeleton Sass is community driven. We will gladly review any issues that you find. If you wish to contribute you'll land a spot in the contributions section of this document!
306102

307-
##### I Found a Bug/How Can I Help?
308-
309103
- [Create an Issue](https://github.com/atomicpages/skeleton-sass/issues)
310104
- [Fork](https://github.com/atomicpages/skeleton-sass)
311105

312-
<a name="change"></a>
313-
314-
### Version 3 Update
315-
316-
After a year of working with build systems like gulp, make, gradle, and maven it became obvious that the structure of Skeleton Sass 2 didn't really promote easy updating. Most build systems have a clean task which deletes entire directories that contains artifacts, target directories, object files, etc. Skeleton Sass 2 strived to be a catch-all solution with the addition of clunky scripts to automate certain things. With the release of 2.5.3, we realized a change was needed.
317-
318-
Skeleton Sass 3 offers a far more portable solution in order to adapt to new ways of development using dependency management systems like ~~`bower` and~~ `npm`. We wanted to truly make updating Skeleton Sass have zero risk of losing all your hard work. Now contributors to your projects can simply install Skeleton Sass as a dependency and all of your changes are 100% decoupled from the core.
319-
320106
## Contributors
321107

322108
<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->

0 commit comments

Comments
 (0)