Gumby 2 is built on Sass and relies heavily on the power of Compass and a few other very powerful and super cool web technologies and Sass extensions written by a few innovative geniuses from the web community. Gumby comes with a compiled gumby.css file which you can include and then continue to write CSS in the regular way, however there are a few dependencies you'll need to install before you can utilise Sass and Compass and unleash the true power of Gumby 2.
Sass is a meta-language on top of CSS that’s used to describe the style of a document cleanly and structurally, with more power than flat CSS allows. Sass both provides a simpler, more elegant syntax for CSS and implements various features that are useful for creating manageable stylesheets.
The power of Sass lets you use Gumby the way you want, and the way that best fits the needs and requirements of your project. Gumby 2 uses the SCSS syntax to give you more control over your project than ever before. Gumby provides a sas/var/_settings.scss file containing a load of customizable variables. Change a variable, compile and watch your changes propogate throughout Gumby.
If you're just getting into Sass and want a little knowledge before jumping in; visit the Sass website and give yourself a crash course.
Compass is an open-source CSS authoring framework which uses the Sass stylesheet language to make writing stylesheets powerful and easy. Using the power of Sass Mixins and the compass community, you can write and share battle-tested styles and useful functions.
Compass comes with tons of useful and sometimes amazing Sass mixins. We're using a bunch of them, as well as a few of our own, in the Gumby core.
If you're new to Compass and want a little knowledge before jumping in; visit the Compass website and give yourself a crash course. There are some great Compass GUI's available too, if you feel more compfortable using a GUI over the terminal then check them out.
As we've said, if you want to write regular CSS on top of Gumby then there's nothing stopping you doing that. Whether you customize Gumby or clone the repo, a compiled gumby.css file will be included with a blank style.css that you can use for your custom styles.
However, to really harness the power of Gumby 2, we recommend you get into Sass and Compass. Both the Sass and Compass tools are written in Ruby which you must install before you can go any further. If you already have Ruby installed you can skip this first step.
Using Brew or your package mamager of choice, install RVM, Ruby Version Manager.
# install with brew package manager $ brew install rvm # or install with Ruby $ \curl -L https://get.rvm.io | bash -s stable --ruby
Next up, install Sass and Compass. Compass handles the Sass installation for you so go ahead and use Ruby Gem to install. Modular scale is a Sass mixin that lies at the heart of Gumby 2. It is what creates the beautiful typographic harmony that is central to creating a beautiful, usable web application, so you'll need to grab that too.
# install Compass with Ruby gem, this also handles Sass installation $ gem install compass # install the modular scale mixin with Ruby gem $ gem install modular-scale
As Sass is a CSS preprocessor, when you make a change to any scss file you'll need to compile in order to build a new compiled CSS file. Compass makes this easy for you with two simple commands.
# compile all SCSS files according to settings config.rb $ compass compile # compile all SCSS when a change is detected in any $ compass watch
Now you're all set up and ready to dive in! Open up sass/var _settings.scss, this is the file the Customizer uses to build your custom Gumby download. The variables are used throughout Gumby core so make a change, compile your SCSS and check out the changes.
We've included a blank css/style.css file for users that would prefer to write vanilla CSS however there is a blank sass/_custom.scss partial which recommend you use for custom styles. Write your SCSS in there, compile and check out the changes in gumby.css. Alternatively, get hardcore and edit config.rb to suit your projects needs.
Mixins are a hugely powerful feature of Sass, allowing you to re-use whole chunks of CSS, you can even pass your mixins arguments! Gumby makes use of Compass and third party mixins as well as some of our own gems. You should utilise this awesome Sass feature and write some of your own. Learn more about mixins on the Sass website.
The typography in Gumby utilizes the Sassy modular scale mixin by Scott Kellum. We use Modular Scale to set the basic font-size scale for all of your typography. Inside of _settings.scss we have created some variables to help you set the scale, but feel free to modify those values to your needs.
// two up the modular scale width: modular-scale(2);
Gumby 2’s responsive mixin makes it simple to declare what viewports you want an elements appearance to change at. Set your breakpoints in _settings.scss, call the mixin and declare what device you’re targeting and your scss. Our mixin handles the rest. You can nest the include within a declaration or have it stand alone.
// include the mixin with @include, pass a predefined device argument
@include respond(portrait-tablets) { your scss goes here }
We’ve built an awesome font size mixin that converts your ‘px’ font sizes to ‘rem’ units. This mixin accepts variables from your modular scale, as well as pixel values; it takes them, converts them to rems and spits out your font sizes in ‘rem’ units with a ‘px’ fallback for browsers that do not yet support rems.
// include the mixin with @include, pass a px font size or a variable @include font-size($absurd);