Giter Club home page Giter Club logo

bourbon.io's Introduction

Bourbon Website

This is the source code for the Bourbon website. It’s built with Middleman.

You can find the Bourbon Sass library source code here.

Setup

  1. Get the code:

    git clone https://github.com/thoughtbot/bourbon.io.git
    
  2. Set up your machine:

    bin/setup
    
  3. Run the app:

    bundle exec middleman
    
    open http://localhost:4567
    

Generate Documentation

Bourbon uses SassDoc to document its source code. For this website, we use a Rake task to run SassDoc’s CLI, which parses documentation-specific comments from Bourbon’s source and outputs them as versioned JSON files (e.g. bourbon_5_0_0.json). We then use a proxy in Middleman to generate unique pages for each version.

SassDoc has only been in use since v5.0.0. The v4 release is documented via a static page, pulled from the previous website.

To generate documentation for a published version of Bourbon, use the generate_docs_for task:

rake generate_docs_for 5.0.0

Hosting & Deployment

The website is hosted on Netlify, and is automatically built and deployed when changes are pushed to the main branch.

Front-end Architecture

This project uses:

  • Sass, with Bourbon
  • BEM-style CSS class names, with namespaces
    • library/: Global variables, mixins and functions; all non-rendering Sass
    • base/: Unclassed HTML elements (e.g. a {}, input {})
    • patterns/: Abstractions, highly reusable pieces of style that are used in any number of unrelated contexts (e.g. .p-media {})
    • components/: Discrete, implementation-specific piece of UI (e.g. .c-site-nav {})
    • utilities/: High-specificity, very explicit selectors. Overrides and helper classes (e.g. .u-flex {}).
  • Autoprefixer
  • A variety of CSS units:
    • em for typographical-related elements
    • rem for lengths related to components
    • px for borders, text shadows, etc.
    • vw/vh for lengths that should be relational to the viewport
  • modular-scale() (which outputs em values) for font sizes

bourbon.io's People

Contributors

ckundo avatar danbee avatar dependabot-preview[bot] avatar dependabot-support avatar elisuh avatar setphen avatar tysongach avatar whmii avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

bourbon.io's Issues

Ability to add demos to documented items

SassDoc doesn't support rich “demos”, like we have in our existing documentation. One way around that could be for Middleman to look through a directory of partials and if it finds one with the same name as the feature, inject it in. Similar to how the Refills site works.

Dependabot can't resolve your Ruby dependency files

Dependabot can't resolve your Ruby dependency files.

As a result, Dependabot couldn't update your dependencies.

The error Dependabot encountered was:

Bundler::VersionConflict with message: Bundler could not find compatible versions for gem "coffee-script":
  In Gemfile:
    middleman was resolved to 4.2.1, which depends on
      coffee-script (~> 2.2)

Could not find gem 'coffee-script (~> 2.2)', which is required by gem 'middleman', in any of the sources.

If you think the above is an error on Dependabot's side please don't hesitate to get in touch - we'll do whatever we can to fix it.

You can mention @dependabot in the comments below to contact the Dependabot team.

Are the Bourbon 5 docs online?

Hi! Apologize in advance if this is a silly question, but I noticed that the only way to access the Bourbon 5 docs is to build them from this repo and run locally.

Are they online anywhere? The bourbon.io website still lists 4.x but with ~90% deprecation warnings:

Thanks in advance!

Add existing 4.x documentation

When we launch 5.0 and the new website, we need to keep the 4.x documentation available.

Current thought is pull a static copy of the HTML & CSS for http://bourbon.io/docs/ and include it as an isolated page here in the new website. No need for it to intertwine with the new styles here.

Could be useful to add a banner at the top that indicates that it is not the current version.

Open in CodePen link

Add “Open in CodePen” links for each feature so people can easy play around with the feature.

Publishing to Dash

We currently publish the docs to Dash and we should account for this with the new website, as well.

Add the ability to document alpha and beta versions

Currently, running the Rake task to generate docs for an alpha or beta version, you get a SassDoc warning:

[WARNING] SassDoc could not find anything to document.

The generated JSON file (e.g. bourbon_5_0_0_beta_6.json) contains no data.

Also, the Version class does not recognize alpha or beta.

Fix "view source" link at Linear Gradient documentation

The "view source" link is refering to https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/functions/_linear-gradient.scss and the correct is https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_linear-gradient.scss.

animate ice cubes in the logo

For a moment I thought the ice cubes actually moved slightly, wiggled. It would be awesome if they really did so.

Updating released documentation

Currently, our Rake tasks accounts for released versions of Bourbon, i.e. the version specified in the Gemfile, or a specific version via rake generate_for 5.0.0.

What do I do if I need to fix a typo in the docs after they've been released? We shouldn't have to force a new Bourbon release just to fix a typo.

Could we generate straight from master? Or by passing a specific commit SHA?

Documentation site doesn't work well in mobile

I'm on an iPhone running iOS 8, and the navigation sidebar doesn't render properly, when I begin to scroll to the right to look at the content, the sidebar obscures the content. It slides to the left, but not fast enough.

Update tagline

This is a 'know issue' but we may/probably want to update the tagline for Bourbon from:

A simple and lightweight library for Sass.

Upgrade to v5 page

While the change log is quite useful and specific, it could be worthwhile to have a simple “Upgrade to v5” page on the website for awhile which would cover all the major changes in a digestable way.

Not possible to discern what is a "component" vs a "pattern"

from an outsiders perspective, it does not seem possible to discern what is a component vs what is a pattern. If there is a difference, it seems more philosophical than practical.

Also, components are imported after patterns. I understand this is in the realm of opinion but a component is a…

a part or element of a larger whole, especially a part of a machine or vehicle

while a pattern is a…

regular and intelligible form or sequence discernible in certain actions or situations

There for a component is a part while a pattern is an assembled group of things in a repeated method. I think we should move more toward components being parts and patterns being collections of objects.

How do we handle neat and bitters?

I would assume that we are going to end up forking this repo and creating 3 repositories for each of the 3 libraries. Sounds scary but it'll probably work.

One question that I have is if we plan on releasing updates to the 3 repositories simultaneously and how far we should take this repo before we fork it.

The other is what will the bitters page be? the old site wont work and the project doesn't really have "documentation"

This was brought on by the realization that Neat 2.0 will basically remain unusable, even if it is in a beta state, until there is some level of documentation accessible by the web.

Bourbon helpers not working with @import in my Jekyll project

I have a file called main.scss, where I dump all of my imports from around my project.

I was trying to update styles in one of my files, but it didn't work, so I went to test it in my main.scss file by updating the background color there, and it still didnt work. I commented out @import bourbon/_bourbon, and it worked. I have browsersync enabled and I traced the error back to the bourbon/helpers folder:

screenshot from 2015-08-08 14 49 55

Can someone give me some insight in what I may be doing wrong? Even if I completely remove the file that has the error, another file in the folder gives an error, and so on.

Thanks!

Move $bourbon; to the top of the list.

I think it would be good have the first section be the docs for the $bourbon settings variable (I mean, until we add some installation instructions sections). Right now it is kind of buried.

I think we should have a section for 'settings' and then what ever we decide for the res of them, 'Functions and Mixins'? ¯_(ツ)_/¯

Home Page: Add attributes/opinions that make Bourbon what it is

I think it’d helpful to use the content on the home page to really speak to why Bourbon is the way it is.

Bourbon is a tool for making awesome projects on the web…

We could swap “Bourbon” for just about any project or product, and the sentence would still complete. How can we get this to place that succinctly explains why Bourbon is a great tool to use, and help people understand why.

Riffing on some thoughts and ideas around this:

  • Pure Sass, no other dependencies
  • Clarity over brevity
  • Human readable syntax
  • Part of a larger suite, modular/nimble
  • No output on install
  • No visual opinion

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.