Git Product home page Git Product logo

sass-strap's Introduction

sass-strap

sass-strap is a modification of bootstrap-sass which is ready to use with Prepros.

It comes with a preconfigured config.rb file which you can modify to specify the directories where your Sass files and sprites will be compiled to, it also has a dehash_sprite function which can be enabled to removes the hash of the generated sprite.

Prerequisites


Installation

Include the assets, dev-assets folder and the config.rb file into your project root directory and load the project into Prepros. All development assets are located in the dev-assets folder, all production files will be compiled into the assets folder.


Config.rb

The config.rb file holds all the settings that deal with sprite generation and scss files. The current settings are:

  • project_type
  • relative_assets
  • line_comments
  • output_style
  • dehash_sprite
  • sass_dir
  • css_dir
  • fonts_dir
  • images_dir
  • sprite_load_path
  • generated_images_dir
  • http_images_dir
  • http_path
  • http_css_path
  • http_fonts_path
  • http_images_path

You can find the description for all of these settings except for the dehash_sprite setting in the Compass Configuration Reference. The dehash_sprite sprite settings accepts a boolean value in order to enable/disable it.


Dev-Assets Folder Structure

The development folder consists of your source file directories, these are:

  • js: directory for js files, you can configure Prepros to compile them to the assets/js folder by changing your project settings.
    • bootstrap: folder which contains individual bootstrap js files.
  • scss: directory for Sass files. This directory can be changed by modifying the Sass_dir setting in the config.rb file.
    • bootstrap: folder which contains individual bootstrap Sass files.
  • sprites: directory for all images to be used for sprite generation. This directory can be changed by modifying the sprite_load_path setting in the config.rb file.

Assets Folder Structure

The assets folder is where all your files will be compiled to, folders included are:

  • css: where all your compiled css files will be stored. This path can be changed by modifying the css_dir setting in the config.rb file.
  • fonts: where your web fonts are stored. This path can be changed by modifying the fonts_dir setting in the config.rb file.
  • images: where all your generated sprites will be stored. This path can be changed by modifying the images_dir setting in the config.rb file.
  • js: directory for js files, you can configure Prepros to store the js files from your dev-assets/js folder here by modifying your projects settings.

Usage

Bootstrap Sass Usage

You can choose to remove any bootstrap css files you don't want to use in your project by commenting out the @import for each css module in the bootstrap.scss file located in the dev-assets/scss folder.

Overriding Bootstrap Defaults

The _variables.scss file located in the dev-assets/scss/bootstrap folder contains all the default Sass variables for Bootstrap.

If you want to change any of Bootstraps default settings you can do so by adding the Sass variable you want to override from the _variable.scss file to the _bootstrap-override.scss file located in the dev-assets/scss folder.

Generated CSS Output Style

You can specify how you want your output css to render by modifying the output_style setting in the config.rb file, you can choose from the following 4 options:

  • Nested (:nested)
  • Expanded (:expanded)
  • Compact (:compact)
  • Compressed (:compressed)

Bootstrap JS Usage

You can choose which js components you want to remove from your bootstrap.js file by removing the line where it is being imported in the bootstrap.js file located in the dev-assets/js folder.


Credits

sass-strap's People

Contributors

benmarte avatar

Stargazers

 avatar  avatar

Watchers

 avatar  avatar

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.