Last release: 0.5.7
Bodoke it's a CSS Front-end Framework created with SASS/SCSS, made for supporting multiple grids in a single project with a minimum of custom design. It's a layout starter project nice and ready for you to design with your own custom identity.
BodokeCSS was born as a testing project where i can try any new CSS feature and practice the CSSOOP model.
The base idea of this project is to be responsive and not visualy contaminated. It supports desktop, mobile and tablet websites using semantic clases in html.
- IE >= 8
- Firefox >= 30
- Chrome >= 34
- Safari >= 7
- Opera >= 23
- IOS >= 7
- Android >= 4.4
- Blackberry browser >= 10
The .container class is the one whe keeps the content centered and makes your site look beautiful. You need to place it right after the body tag if you want to prevent the content from touching the viewport.
Then you can put as many .rows as you want inside the .container and it's mandatory that you put at least one .col (or .column/.columns/.cols) inside of each one of them.
Set the column width using the column-size classes (eg: .c6-12 will make that block fill half of the .row available space)
<body>
<main class="container">
<div class="row">
<div class="c6-12 cols">Half row content</div>
<div class="c6-12 cols">Half row content</div>
</div>
</main>
</body>Changelog: Here
Project docs coming soon... But if you are brave enough, you can check the code for yourself (it's self documented!)
You need to have previously installed npm
npm install --save bodokecssClone the bodokecss from your node_modules folder into your assets or scss folder (preferably scss/) but it will depend on your project structure
<head>
<title>Bodoke Rocks \m/</title>
<link rel="stylesheet" type="text/css" href="css/bodoke.css">
</head>
<body>
<!-- What does 'Bodoke' means?, what was this guy thinking? -->
</body>Assuming your site structure it's something like this:
/project
|-- *.html
|-- *.php
|-- /node_modules
|-- bodokecss --> Copy this folder
|-- /src
|-- css
|-- js
|-- images
|-- /scss
|-- bodokecss --> And paste it here
| |-- app.scss
Then at the top of your main scss (eg. app.scss) file include the next line:
@import "build/src/bodoke";You can easily customize or expand Bodoke inside build/src/bodoke.scss by commenting or uncommenting each @import component. I do not recommend to uncomment the items before 5. (Compnents).
To make this work, you need to have already installed node and gulp
If you are a gulp user copy and paste this task into your gulpfile.js (see: blog.diegomarmol.com.ar)
After Node was installed, run:
npm install gulp gulp-sass gulp-autoprefixer --save-devvar gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
gulp.task('bdk', function () {
gulp.src( '.scss/**/*.scss' ) // Set this according the route to your project
.pipe(sass().on('error', sass.logError))
.pipe(autoprefixer({
browsers: AUTOPREFIXER_BROWSERS,
cascade: false
}))
.pipe(gulp.dest( './path/to/your/css/folder' ));
});Now Open the Terminal or CMD, run gulp bdk and your CSS will be up and running!