Git Product home page Git Product logo

daisy's Introduction

daisy

   {o}        _       _  
    |      __| | __ _(_)___ _   _ 
   \|/    / _` |/ _` | / __| | | |
[~~~~~~~]| (_| | (_| | \__ \ |_| |
 |_____|  \__,_|\__,_|_|___/\__, |
          by hbrgtech       |___/ 

Introduction

Do you work on a front-end web development team? Does your team run into challenges producing the "gold master" CSS files for your projects? We've all seen it: one developer's changes clobbering another's; mac and windows platforms producing different output; lack of consistency/style/rigor between contributions from different team members; reconciling the desire of tech-averse designers to try hundreds of different colors with an incompatible or inflexible QA/release process... the list goes on.

Even if members of a team can come to a consensus about what tools, frameworks, and development methodologies to use together in building a project, the inherent workflow issues resulting from their choices can too easily impede development and become a costly time-sink.

daisy was distilled from our team's attempt to bring sanity to the workplace, and combines a version-controlled workflow with the principles of atomic web design to develop and manage a CSS layout. At its core is the very solid and responsive SCSS version of Zurb's Foundation, brought to life as a continuously-updated style guide through Pattern Lab.

As with any powerful tools, Pattern Lab and SCSS-like tools come with the overhead of maintenance - especially when it comes to their supporting components (PHP, git, bower, grunt, libsass, and apache, just to name a few). Complicate that with the different platforms, environments, editing tools, and preferred configurations that each developer on a team brings to the table, and it could be a nightmare to implement them in the first place.

That's why one of daisy's main features is that it's packaged as a vagrant box. Start a project with daisy, and your entire team can keep its preferred tools while working with a standardized set of essentials to produce consistent, version-controlled output in a highly-adaptable workflow. Even your designers will want to participate - and can easily do so, just by running daisy on their local environments with whatever access you give them to the git repo.

Using daisy

You can read more about daisy and the philosophy behind it, as well as the general use case, here and on Daigo's blog post

Once you've got daisy up and running (see documentation below), you can view your published results at http://daisy.pattern.lab/ (we're working on enabling your local domain of choice).

Edit your scss in the www/source/scss folder, and your html/mustache mark-up in the www/source/_patterns folder. Pattern Lab will automatically be regenerated and viewable at http://daisy.pattern.lab/pattern-lab if grunt watch is running properly (if it isn't, use vagrant ssh, cd /vagrant_data, and run grunt or grunt watch manually).

Useful links:

Versions included (Updated as of November, 2014):

  • Foundation v5.4.7 (see bower.json)
  • Pattern-lab v0.7.12

Documentation

Overview

Included within this project is a Vagrant development environment. The goal is to provide you with an environment that can be easily cloned and version-controlled to allow multiple front-end developers to quickly collaborate.

What You Get

  • Ubuntu 14.04
  • Apache
  • PHP CLI
  • Node.js/npm
  • Grunt
  • Pattern Lab
  • Zurb Foundation See package.json and bower.json for version information.

Requirements

Getting Started

Download Vagrant and VirtualBox. After cloning this repository to your computer, you'll want to start up the vagrant box by following the instructions below. The first time you run the installer will be the slowest, as it will download the Virtual Box image and provision the Virtual Machine. Each subsequent run will ensure that the Virtual Machine has the lastest tools and code available. To collaborate on a team, simply initialize a new git repo with the clone you've made of daisy, and start branching instantly to create new scss and mustache files.

Unix/Mac

If you are on a Unix-based machine or an OSX-based Mac, the setup is pretty easy.

  1. Clone the daisy Github repo
  2. Also clone all submodules by running git submodule update --init
  3. Open a terminal and run the init script: ./bin/daisy-init.sh
  4. If you get 'permission denied' run 'chmod 755 ./bin/daisy-init.sh'
  5. Go to http://daisy.pattern.lab in a web browser on the computer running vagrant.

Windows

daisy is only supported on Windows 7 and above. If you are using Windows XP, please ensure that you have the Windows Power Shell installed.

  1. Clone the daisy Github repo
  2. Also clone all submodules by running git submodule update --init
  3. Run the installer batch script: ./bin/daisy-init.bat
  4. Go to http://daisy.pattern.lab/ in a web browser on the computer running vagrant (may launch automatically).

Vagrant Primer

The Vagrant CLI documentation will be useful for developers that haven't used Vagrant before. Since daisy is built on top of Vagrant, the Vagrant CLI commands will also work.

Some useful commands:

  • vagrant up - Start and provisions the VM
  • vagrant ssh - Logs into the VM with ssh
  • vagrant reload - Restarts and provisions the VM
  • vagrant provision - Provisions the VM. You can also do vagrant up --provsison or vagrant reload --provision
  • vagrant suspend and vagrat resume - If you don't want fully shut it down
  • vagrant halt - Stops the VM
  • vagrant destroy - Deletes the VM

Working with the repository and the VM

Once the VM is up and running, any changes made to the /source/www/resources/ will be automatically compiled. To see the output of these changes, check grunt.log.

If for some reason, you suspect grunt is not running (i.e. grunt.log does not update, css does not compile, or pattern lab not generated) you can go into the VM by vagrant ssh then cd /vagrant_data. There, you can see if grunt is on, ps aux | grep grunt. If you see a process, you can stop it by kill [process id]. If you do not see grunt in process, you can either run bin/watch.sh or grunt watch.

For more information on grunt, read this excellent tutorial by Chris Coyer titled "Grunt for People Who Think Things Like Grunt are Weird and Hard"

daisy's People

Contributors

flagster76 avatar daigofuji avatar atogle avatar

Stargazers

Adam Detrick avatar Marc Runkel avatar Radium Zheng avatar Ara L Abcarians avatar Martin Maricak avatar Ικονικρε Ατρέας avatar Dinis Correia avatar Dat avatar  avatar Aaron Brown avatar Justin McCraw avatar Brian McCarthy avatar Søren Birkemeyer avatar Aaron Silber avatar Nico Schober avatar Dominik Ritter avatar Bill Abel avatar Neil Gardose avatar Krystian Tokarski avatar Nestor G Pestelos Jr avatar  avatar  avatar Angus H. avatar Ryan Adkins avatar John Egan avatar Salem Cobalt avatar Patrick Connors avatar Julia avatar Jean-Philippe Sirois avatar Aleksandr avatar Juergen Schilke avatar Corina Fong avatar jack avatar  avatar V. Mahir YILMAZ avatar Jeremy Page avatar Dave Olsen avatar Bobbie Tables avatar chris montgomery avatar Tim Bendt avatar Flowrence avatar Ian Soper avatar  avatar David Vasandani avatar Rocco Russo avatar Clay Sones avatar Hans Lemuet avatar Amy Sanders avatar Christoph Reinartz avatar Ken Nesbit avatar Michael Musgrove avatar Lee Xiang Wei avatar Bryan Noll avatar  avatar  avatar Alan Kash avatar  avatar Tim Gleeson avatar Masaaki Komori avatar Peter Shackelford avatar Jan Deppisch avatar Joe Wu avatar Yury Vetrov avatar Camilo Holguin avatar Dalton Rooney avatar Ryan Garcia avatar Barry Rhodes avatar  avatar Enric Girona avatar Chris Sundberg avatar Colin OBrien avatar Caleb Jenkins avatar wuworkshop avatar Sean Goresht avatar Daniel Lewandowski avatar Aftab Alam avatar Kirk McCutcheon avatar Cal Wilson avatar Matt Whipple avatar Beverly Guillermo avatar Manoj Singh avatar Alexander Khlebnikov avatar Roby Van Damme avatar Felix Dorner avatar Kianosh Pourian avatar Sean R Reid avatar Marcos avatar  avatar Gary Minnaert avatar Francesco Kirchhoff avatar Andressa avatar Luke Askew avatar Bruno Dulcetti avatar Michail avatar  avatar Julien Cabanès avatar Mike Jones avatar Roger Steve Ruiz avatar Hans verschooten avatar Dan Knisley avatar

Watchers

Dave Olsen avatar Caleb Jenkins avatar Mat Marquis avatar Andrew Hubbell avatar Kianosh Pourian avatar James Cloos avatar  avatar Jason Kalawe avatar Falk Döring avatar Bobbie Tables avatar Kevin Newman avatar  avatar  avatar Brian McCarthy avatar Lalande avatar  avatar Camilo Holguin avatar  avatar  avatar

daisy's Issues

Update daisy with Pattern Lab 2.0

I would like to use this issue as sort of road map/to do list for myself as we move forward with pattern lab 2.0. While @dmolsen is working hard to get PL2 to go live, I am playing with development version and liking what I am seeing so far -- very exciting. My hope is that it will be pretty seem-less upgrade for daisy users -- "composer" part is already done in repo, so users of daisy will almost not notice the change at all. Though some parts, like location of header/footer, which currently live in /www/source/_patterns/00-atoms/00-meta needs to be moved and stuff like that so I may need to ...

Here is my incomplete steps (a.k.a. plan of attack):

  • Add composer to box via puppet (so updates can be called from within VM)
  • run composer in www folder, and replace contents
  • restore source
  • perhaps daisy /www/source should be a separate repo as starterkit-mustache-foundation ?
  • make sure git remote issue is not problem
  • Update grunt with new generate command (changed from core/builder.php -g to php core/console -g
  • update readme with migration guide for 1.1 users.
  • test test test...

box url may have changed?

Noticed on the other VM that I am running: box file url that we have in Vagrantfile for daisy
https://vagrantcloud.com/puppetlabs/boxes/ubuntu-14.04-64-puppet/versions/1/providers/virtualbox.box
is now showing 404.

It appears that the new url (got it from here) may be

https://vagrantcloud.com/puppetlabs/boxes/ubuntu-14.04-64-puppet/versions/1.0.0/providers/virtualbox.box

I don't have the time right now to destroy and restart daisy. Can someone confirm? (Sorry!)

Linting SCSS

I would like to built-in scss linting such as causes/scss-lint but it requires ruby/sass.
Is there a libsass version of such tool out there?

"Warnings" while provisioning

When you run vagrant provision those errors always, almost without exception, show up:

Warning: Setting templatedir is deprecated. 
See http://links.puppetlabs.com/env-settings-deprecations
   (at /usr/lib/ruby/vendor_ruby/puppet/settings.rb:1117:in `issue_deprecation_warning')

and

Warning: Config file /etc/puppet/hiera.yaml not found, using Hiera defaults

Does anyone know how to suppress them?

styleguide.html is not being gereated

Hi,

Great stuff on getting a vagrant box ready to use! Saved allot of time.

I do have a question, in the master branch I see that the public directory is already generated, but the "public/styleguide/styleguide.html" is missing.

Even if I do a generate again with "php core/builder.php -g" I get a message saying "ERROR: the main style guide wasn't written out. make sure public/styleguide exists. can copy core/styleguide"

I can navigate properly to http://daisy.pattern.lab/ and see the page with a nice patternlab navigation bar, but also the message "The requested URL /styleguide/html/styleguide.html was not found on this server."

Am I doing something wrong, bad installation? Should this question go to https://github.com/pattern-lab/patternlab-php?

Many thx for any insight!

Tag with releases

Thinking about updating daisy with Pattern Lab 2.0. We should tag the releases. Thinking we should have the first public release (ruby sass version) as 1.0 and libsass version as 1.1.

Enabling your local domain of choice at install

Currently, daisy pattern lab sets itself at domain http://daisy.pattern.lab/

Readme reads like this:

Once you've got daisy up and running (see documentation below), you can view your published results at http://daisy.pattern.lab/ (we're working on enabling your local domain of choice).

We should either:

  • create an interface (perhaps daisy-init prompt?) to choose your own local domain, or
  • update Read Me with info on how to do this (without looking up, edit /etc/hosts and maybe a puppet file?)

Speeding up the build step when editing scss files

In our workflow, many of our saves are scss files which get picked up by the watch:css task. This task includes a full, rather slow, Pattern Lab build every time we save a scss file. This gets cumbersome rather quickly.

Since I'm not in a position to optimize Pattern Lab itself, I've been looking for a way to speed this up. One idea we're trying: Compile the scss into css, copy it into www/source/css/ and www/public/css/, and don't do a full Pattern Lab build. If I understand it correctly (which I may not!), copying it into www/public/css/ should accomplish the same things as copying to www/source/css/ and running a Pattern Lab build.

Here's what that looks like in our instance. CityOfPhiladelphia/patterns@ef8c690

Does this make sense, or is there a better way?

Update sass

How can update sass version?
In this moment have sass-3.2.19 but i need sass-3.3 +

Thanks.

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.