Skip to content

Commit

Permalink
2.0.0-b2
Browse files Browse the repository at this point in the history
Renamed a lot of files and folders. Made theme more along the lines of a skeleton and implemented a themeing script to aid in theme development for Skeleton Sass!
  • Loading branch information
atomicpages authored and atomicpages committed May 22, 2014
1 parent 55b8e5e commit 04cc02a
Show file tree
Hide file tree
Showing 9 changed files with 76 additions and 108 deletions.
54 changes: 30 additions & 24 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -41,24 +41,30 @@ Skeleton SASS is organized into **three** major categories:
* Requires Sass 3.3.x

### File Overview
* `skeleton_template.scss` houses **all** custom code.
* **Note:** this file name is meant to be changed. // add link to how to
* `_MYconfig.scss` houses all of your global configuration (e.g. mixins, functions, variables, etc.)
* **Note:** this file name is meant to be changed. // add link to how to
* `bin` a directory that contains various executables
* `setup.sh` a simple bash script that aids in setting up Skeleton Sass for first time use
* `theme_setup.sh` a simple bash script that aids in setting up a custom theme for Skeleton Sass
* `upgrade.sh` a simple bash script that aids in upgrading Skeleton Sass
* `core`
* `_config.scss` houses all of the global configuration and variable options. Any change here will alter all flavors
* `_dependencies.scss` houses all of the logic behind the front-facing mixins (e.g. grid generation, conversion, etc.)
* `_mixins.scss` houses all of the global mixins that are shared between all flavors
* `_MYconfig.scss` houses all of your custom logic, functions, mixins, variables, etc. Simply change to another name (i.e. _projectname_config.sass) and import in `_config.scss`.
* `flavors`
* `_vanilla.scss` loads all the necessary files for the sass flavor to function
* `flavors`
* `vanilla` – who doesn't like good ol' vanilla?
* `deps` houses flavor-specific functionality
* `dev` houses all development files for custom functions and mixins not yet released
* `_base.scss` handles all of the base styles for skeleton
* `_skeleton.scss` houses the skeleton grid
* `_vars.scss` houses all flavor-specific variables
* `bones` the directory where theme loaders are located
* `_sphenoid.scss` the default theme
* `_config.scss` the default global configuration variables
* `_dependencies.scss` the default global logic for Skeleton Sass
* `_mixins.scss` the default global mixins for Skeleton Sass
* `skeleton` where the magic happens
* `demo`
* `_base.scss` contains all of the base styles for Skeleton Sass with the exception of the reset styles
* `_bourbon.scss` contains information to import bourbon if it's used
* `_vars.scss` contains project-scoped configuration options
* `sphenoid`
* `marrow` the directory that contains all of the project-scoped logic (e.g. functions and mixins) for your theme to work
* `_private.scss` a file that contains all of the private logic for the public mixins/functions to work correctly for the `sphenoid` project. Feel free to name this file whatever you want in your own theme.
* `_public.scss` a file that contains all of the public mixins/functions for the `sphenoid` theme. Feel free to name this file whatever you want in your own theme.
* `_base.scss` contains all of the origion base styles for Skeleton Sass (nothing has changed visually)
* `_vars.scss` contains project-scoped configuration options
* `_skeleton.scss` contains all the styles to create the grid like we've used before – nothing has changed
* `_MYconfig.scss`
* `skeleton_template.scss`

### Bower
> Bower is a package manager for the web. It offers a generic, unopinionated solution to the problem of front-end package management, while exposing the package dependency model via an API that can be consumed by a more opinionated build stack. There are no system wide dependencies, no dependencies are shared between different apps, and the dependency tree is flat — [bower.io](http://bower.io/)
Expand Down Expand Up @@ -104,11 +110,11 @@ Changelog
---------
### 2.0.0β
* **Huge** changes to the structure of Skeleton Sass
* All of the different implementations of Skeleton Sass have been moved to the `flavors` folder
* Added **_themes_**! All themes are located in `skeleton/` with the default theme called `sphenoid`
* Themes allow you to edit the base styles by default to create a differently styles foundation for your project that doesn't get wiped out when there's an update to Skeleton Sass.
* All core/shared files have been moved to the `core` folder.
* Ability to choose between bourbon, compass, and vanilla sass by changing the preferred flavor in `skeleton.scss`
* Added shell scripts to aid in setting up and upgrading Skeleton Sass for you *nix/OS X users who use command line.
* Batch scripts for Windows users coming soon
* Added shell scripts to aid in setting up Skeleton Sass, upgrading Skeleton Sass (removing unneeded files), and creating a theme for you *nix/OS X users who use command line.
* Scripts for Windows users coming soon
* Manual configuration documentation coming soon
* Completely removed `layout.scss` and added predefined media queries to `skeleton_template.scss`
* New functions and mixins:
Expand All @@ -123,9 +129,9 @@ Changelog
* `relative` converts an absolute `px` unit to the chosen relative unit as defined in `_config.scss` or your hown project configuration.
* **Note:** if more than one relative unit is select then this function will simply spit out the `px` unit. // documentation is needed
* `@font-size` is a *mixin* that handles everything involving `font-size`. // TODO complete this
* Removed `bourbon` and `compass` completely to flatten the dependency tree. At the core, Skeleton Sass never really needed either of these and it was mostly for you. If you wish to use any other frameworks, just add it to a dependency in your `skeleton.scss` file in the project root. Much simpler!
* No more camelCase variables. Based on what I've seen the convention seems to be to use hyphens in variable names.
* A better naming convention has been created that aligns with Skeleton.
* Removed `bourbon` and `compass` completely to flatten the dependency tree. At the core, Skeleton Sass never really needed either of these and it was mostly for you. If you wish to use any other frameworks, just add it to a dependency in your `skeleton.scss` file in the project root. Much simpler!
* No more camelCase variables. Based on what I've seen the convention seems to be to use hyphens in variable names.
* A better naming convention has been created that aligns with the human skeleton


Authors
Expand Down
39 changes: 28 additions & 11 deletions bin/theme_setup.sh
Original file line number Diff line number Diff line change
Expand Up @@ -38,16 +38,17 @@ done
echo "Theme name is ${name}"

echo "Creating required files and folders..."
# mkdir core/bones/_${name}.scss;
# echo "// ${name} theme created with love" > _${name}.scss
# echo "@import \"../../skeleton/${name}/vars\";" >> _${name}.scss
# echo "@import \"../../skeleton/${name}/base\";" >> _${name}.scss
# echo "@import \"../../skeleton/sphenoid/vars\"; // Override manually if you wish to create your own grid" >> _${name}.scss
touch core/bones/_${name}.scss;
echo "// ${name} theme created with love" > core/bones/_${name}.scss
echo "@import \"../../skeleton/${name}/vars\";" >> core/bones/_${name}.scss
echo "@import \"../../skeleton/${name}/base\";" >> core/bones/_${name}.scss
echo "@import \"../../skeleton/sphenoid/vars\"; // Override manually if you wish to create your own grid" >> core/bones/_${name}.scss
echo "core/bones/_${name}.scss has been created"

# mkdir -p skeleton/${name}/marrow
# cp skeleton/demo/_base.scss skeleton/${name}
# cp skeleton/demo/_vars.scss skeleton/${name}

mkdir -p skeleton/${name}/marrow
cp skeleton/demo/_base.scss skeleton/${name}
cp skeleton/demo/_vars.scss skeleton/${name}

echo "Use Bourbon? [y/n]"
read ans
Expand All @@ -70,14 +71,16 @@ while [ $valid -ne 1 ]; do
done

if [ $valid -eq 1 ]; then
# test to make sure bourbon exists
# If gem doesn't exist then we don't need to bother
command -v gem >/dev/null 2>&1 || {
echo >&2 "Ruby Gems is not installed. Aborting."
echo "Note: your project setup to this point was successful"
exit 0
}
# Does bourbon exist? No? Want to install it? Sure. Awesome! Let me install it for you.
command -v bourbon >/dev/null 2>&1 || {
echo >&2 "Bourbon is currently installed. Install bourbon now? [y/n]"
echo "Note: you will be promoted to enter in your admin password. This password is never saved. Ever."
echo >&2 "Bourbon is not currently installed. Install bourbon now? [y/n]"
echo "Note: you will be promoted to enter in your account password. This password is never saved. Ever."
read ans
valid=0
if [[ ("$ans" = "y" || "$ans" = "n" || "$ans" = "Y" || "$ans" = "N") ]]; then
Expand All @@ -95,9 +98,23 @@ if [ $valid -eq 1 ]; then
let valid=1
echo "Installing bourbon..."
sudo gem install bourbon
command -v bourbon >/dev/null 2>&1 || {
echo 2>&1 "Bourbon install failed. Aborting."
echo "Note: your project setup to this point was successful"
exit 0
}
echo "Bourbon install was successful! Continuing..."
else
let valid=0
fi
done
}
bourbon install --path=skeleton/${name}/
cp skeleton/demo/_bourbon.scss skeleton/${name}
sed -i "" -e $'8 a\\\n'"@import \"bourbon\";" skeleton/${name}/_vars.scss
echo "Theme setup complete!"
exit 0
fi

echo "Theme setup complete!"
exit 0
8 changes: 4 additions & 4 deletions skeleton/demo/_base.scss
Original file line number Diff line number Diff line change
Expand Up @@ -188,7 +188,7 @@ input[type="button"] {
top: 1px solid #ccc;
left: 1px solid #ccc;
};
@include border-radius(3px);
border-radius: 3px;
color: #444;
display: inline-block;
font: {
Expand Down Expand Up @@ -275,7 +275,7 @@ select {
border: 1px solid #ccc;
padding: relative(6px) relative(4px);
outline: none;
@include border-radius(2px);
border-radius: 2px;
font: {
family: $form-font;
};
Expand All @@ -289,11 +289,11 @@ select {
&:focus {
border: 1px solid #aaa;
color: #444;
@include box-shadow(0 0 3px rgba(0,0,0,0.2));
box-shadow: 0 0 3px rgba(0,0,0,0.2);
}
&:active {
border: 1px solid darken(#aaa, 10%);
@include box_shadow(0 0 3px rgba(0,0,0,0.3));
box_shadow: 0 0 3px rgba(0,0,0,0.3);
}
}
select { padding: 0; }
Expand Down
59 changes: 0 additions & 59 deletions skeleton/sphenoid/_bourbon.scss

This file was deleted.

5 changes: 2 additions & 3 deletions skeleton/sphenoid/_skeleton.scss
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@
* ------------------------------------------------ */
.container {
position: relative;
// change value at the top of this file or in _vars.scss
width: $base-width;
margin: 0 auto;
padding: 0;
Expand All @@ -28,9 +27,9 @@
* ------------------------------------------------ */
@media only screen and (min-width: $tablet-width) and (max-width: $base-width - 1) {
.container {
// change value at the top of this file or in _vars.scss
width: $tablet-width;
.column, .columns {
.column,
.columns {
&.alpha {
margin: {
left: 0;
Expand Down
4 changes: 2 additions & 2 deletions skeleton/sphenoid/_vars.scss
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@
// variables.


@import "marrow/deps";
@import "marrow/publicMixins";
@import "marrow/private";
@import "marrow/public";
@import "core/config"; // default dependencies

// Yep, taken right from bourbon - https://github.com/thoughtbot/bourbon/blob/master/dist/settings/_prefixer.scss
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,9 @@
// Alter only if you know what you're doing. Changes here can potentially render Skeleton Sass usable.
// DISCLAIMER: this file is called private because these items are not supposed to accessed directly
// outside of the public file. They are also not supposed to be edited directly either. Alter only if
// you know what you're doing. Changes here can potentially render the sphenoid theme unusable.
//
// Am I allowed to use these in my own theme? You bet!
// I have a fix... how do I help? Check the README!

// ---------- MIXIN DEPENDENCIES
@mixin _bd($vert, $horiz, $radius) {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
// See skeleton file for copyright info
// Project-scoped mixins? Oh, boy! Am I allowed to use these in my own theme? You bet!
// I have a fix... how do I help? Check the README!

@import "deps"; // don't remove me
@import "private"; // don't remove me

// ---- MIXINS ----

Expand Down
3 changes: 1 addition & 2 deletions skeleton_template.scss
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,7 @@
*/

// Choose the your flavor of Skeleton Sass and compile

@import "core/bones/sphenoid"; // sass --update -C skeleton.scss:skeleton.css
@import "core/bones/sphenoid"; // sass --update -C skeleton.scss:skeleton.css

/* Add custom styles here */

Expand Down

0 comments on commit 04cc02a

Please sign in to comment.