Skip to content

sayanee/timeline-css

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

15 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

#timeline-css Build Status Dependency Status

###DEMO

A SASS mixin to generate timeline / breadcrumbs CSS.

#pre-requisites

Install RubyGems SASS and Compass

gem install sass
gem install compass

Install NodeJS and NPM

#getting started

###install

  • with bower: bower install timeline-css
  • git clone: git clone git@github.com:sayanee/timeline-css.git

###html

Integrate the HTML code into your view files. The number of list items within the <li> tags is 4 by default. If you want to have more/less number of list-items, generate it with SCSS/SASS files.

<ul class="timeline">
  <li>apple</li>
  <li>banana</li>
  <li>pear</li>
  <li>orange</li>
</ul>

You can use either of the 3 syntaxes: CSS, SCSS or SASS

###generate css & scss by varying properties

  1. install relevant packages

    npm install
    
  2. change the mixin arguments and the class name in file sass/timeline

  3. run grunt to compile SASS to SCSS and CSS

###1. with css

  1. include the file css/timeline.css in your HTML file

###2. with SCSS

  1. include the files scss/timeline-mixin.scss as a mixin

  2. with reference to file scss/timeline.scss import compass and the timeline mixin

    @import "compass/css3";
    @import "timeline-mixin";
    
  3. call the mixin with a class name e.g. .breadcrumb

    .breadcrumb {
      @include timeline(50px, 10px, #c5e1e7, 20%, white, 10px, 4);
    }
    
  4. compile SCSS to CSS

###3. with sass

  1. include the files scss/timeline-mixin.sass as a mixin

  2. with reference to file scss/timeline.sass import compass and the timeline mixin

    @import "compass/css3"
    @import "timeline-mixin"
    
  3. call the mixin with a class name e.g. .breadcrumb

    .breadcrumb
      @include timeline(50px, 10px, #c5e1e7, 20%, white, 10px, 4)
    
  4. compile SASS to CSS

#options

The SASS mixin is defined with the following arguments:

@mixin timeline($height, $curved-corner, $background-color, $darkenby-percent, $textcolor, $seperation, $depth)
  1. by default

    // sass syntax
    .timeline
      @include timeline(50px, 10px, #c5e1e7, 20%, #fff, 10px, 4)
    
    // html syntax
    <ul class="timeline">
      <li>Baroque</li>
      <li>Classical</li>
      <li>Romantic</li>
      <li>Contemporary</li>
    </ul>
    

  2. change height from 50px to 30px

    .timeline
    	@include timeline(30px, 10px, #c5e1e7, 20%, #fff, 10px, 4)
    
  ![](img/eg2.png)

1. change curvature from `10px` to `15px`

  ```
  .timeline
		@include timeline(30px, 15px, #c5e1e7, 20%, #fff, 10px, 4)
![](img/eg3.png)
  1. change lightest background color from #c5e1e7 to coral

    .timeline
    	@include timeline(30px, 15px, coral, 20%, #fff, 10px, 4)
    
  ![](img/eg4.png)


1. change percentage darkened by from `20%` to `10%`

  ```
  .timeline
		@include timeline(30px, 15px, coral, 10%, #fff, 10px, 4)
![](img/eg5.png)
  1. change text color from #fff to #000

    .timeline
    	@include timeline(30px, 15px, coral, 10%, #000, 10px, 4)
    
  ![](img/eg6.png)


1. change seperation distance from `10px` to `5px`

  ```
  .timeline
		@include timeline(30px, 15px, coral, 10%, #000, 5px, 4)
![](img/eg7.png)
  1. change the number of items from 4 to 5

    .timeline
    	@include timeline(30px, 15px, coral, 10%, #000, 5px, 5)
    
    // html
    <ul class="timeline">
      <li>Baroque</li>
      <li>Classical</li>
      <li>Romantic</li>
      <li>Contemporary</li>
      <li>Modern</li>
    </ul>
    
  ![](img/eg8.png)




#credit

1. AngularJS and Color picker directive for demo page

# license

(C) Sayanee Basu 2014, released under an MIT license







About

A SASS mixin to generate timeline / breadcrumbs CSS.

Resources

License

Stars

Watchers

Forks

Packages

No packages published