diff --git a/README.md b/README.md index 328e2bc..3ec9ee2 100644 --- a/README.md +++ b/README.md @@ -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/) @@ -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: @@ -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 diff --git a/bin/theme_setup.sh b/bin/theme_setup.sh index a9c1694..d49fb77 100755 --- a/bin/theme_setup.sh +++ b/bin/theme_setup.sh @@ -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 @@ -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 @@ -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 diff --git a/skeleton/demo/_base.scss b/skeleton/demo/_base.scss index 047061e..021210e 100644 --- a/skeleton/demo/_base.scss +++ b/skeleton/demo/_base.scss @@ -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: { @@ -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; }; @@ -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; } diff --git a/skeleton/sphenoid/_bourbon.scss b/skeleton/sphenoid/_bourbon.scss deleted file mode 100644 index 22d9b43..0000000 --- a/skeleton/sphenoid/_bourbon.scss +++ /dev/null @@ -1,59 +0,0 @@ -// Custom Helpers -@import "bourbon/helpers/deprecated-webkit-gradient"; -@import "bourbon/helpers/gradient-positions-parser"; -@import "bourbon/helpers/linear-positions-parser"; -@import "bourbon/helpers/radial-arg-parser"; -@import "bourbon/helpers/radial-positions-parser"; -@import "bourbon/helpers/render-gradients"; -@import "bourbon/helpers/shape-size-stripper"; - -// Custom Functions -@import "bourbon/functions/compact"; -@import "bourbon/functions/flex-grid"; -@import "bourbon/functions/grid-width"; -@import "bourbon/functions/linear-gradient"; -@import "bourbon/functions/modular-scale"; -@import "bourbon/functions/px-to-em"; -@import "bourbon/functions/radial-gradient"; -@import "bourbon/functions/tint-shade"; -@import "bourbon/functions/transition-property-name"; - -// CSS3 Mixins -@import "bourbon/css3/animation"; -@import "bourbon/css3/appearance"; -@import "bourbon/css3/backface-visibility"; -@import "bourbon/css3/background"; -@import "bourbon/css3/background-image"; -@import "bourbon/css3/border-image"; -@import "bourbon/css3/border-radius"; -@import "bourbon/css3/box-sizing"; -@import "bourbon/css3/columns"; -@import "bourbon/css3/flex-box"; -@import "bourbon/css3/font-face"; -@import "bourbon/css3/hidpi-media-query"; -@import "bourbon/css3/image-rendering"; -@import "bourbon/css3/inline-block"; -@import "bourbon/css3/keyframes"; -@import "bourbon/css3/linear-gradient"; -@import "bourbon/css3/perspective"; -@import "bourbon/css3/radial-gradient"; -@import "bourbon/css3/transform"; -@import "bourbon/css3/transition"; -@import "bourbon/css3/user-select"; -@import "bourbon/css3/placeholder"; - -// Addons & other mixins -@import "bourbon/addons/button"; -@import "bourbon/addons/clearfix"; -@import "bourbon/addons/font-family"; -@import "bourbon/addons/hide-text"; -@import "bourbon/addons/html5-input-types"; -@import "bourbon/addons/position"; -@import "bourbon/addons/prefixer"; -@import "bourbon/addons/retina-image"; -@import "bourbon/addons/size"; -@import "bourbon/addons/timing-functions"; -@import "bourbon/addons/triangle"; - -// Soon to be deprecated Mixins -@import "bourbon/bourbon-deprecated-upcoming"; diff --git a/skeleton/sphenoid/_skeleton.scss b/skeleton/sphenoid/_skeleton.scss index d666c8d..df13250 100644 --- a/skeleton/sphenoid/_skeleton.scss +++ b/skeleton/sphenoid/_skeleton.scss @@ -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; @@ -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; diff --git a/skeleton/sphenoid/_vars.scss b/skeleton/sphenoid/_vars.scss index b5bbf33..45f5d12 100644 --- a/skeleton/sphenoid/_vars.scss +++ b/skeleton/sphenoid/_vars.scss @@ -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 diff --git a/skeleton/sphenoid/marrow/_deps.scss b/skeleton/sphenoid/marrow/_private.scss similarity index 86% rename from skeleton/sphenoid/marrow/_deps.scss rename to skeleton/sphenoid/marrow/_private.scss index c6fa7bb..f1378da 100644 --- a/skeleton/sphenoid/marrow/_deps.scss +++ b/skeleton/sphenoid/marrow/_private.scss @@ -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) { diff --git a/skeleton/sphenoid/marrow/_publicMixins.scss b/skeleton/sphenoid/marrow/_public.scss similarity index 97% rename from skeleton/sphenoid/marrow/_publicMixins.scss rename to skeleton/sphenoid/marrow/_public.scss index da56a15..52b3ed1 100644 --- a/skeleton/sphenoid/marrow/_publicMixins.scss +++ b/skeleton/sphenoid/marrow/_public.scss @@ -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 ---- diff --git a/skeleton_template.scss b/skeleton_template.scss index 61ae376..e022efd 100644 --- a/skeleton_template.scss +++ b/skeleton_template.scss @@ -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 */