Small and Fast RWD front-end framework
CSS CoffeeScript
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
source
.gitignore
Gulpfile.coffee
LICENSE.md
README.md
favicon.ico
index.html
package.json

README.md

xpressio

Just a small and fast tool to design your website.

Getting started

Grid system

<div class="row">
  <div class="col3">col3</div>
  <div class="col3">col3</div>
  <div class="col3">col3</div>
  <div class="col3">col3</div>
</div>

<div class="row">
  <div class="col3">col3</div>
  <div class="col9">col3</div>
</div>

<div class="row">
  <div class="col6">col3</div>
  <div class="col6">col3</div>
</div>

Flexbox

<div class="flex auto">
  <div>box1</div>
  <div>box2</div>
  <div>box3</div>
</div>
<div class="flex">
  <div class="x2">box1</div>
  <div class="x1">box2</div>
  <div class="x1">box3</div>
</div>
<div class="flex column">
  <div>box1</div>
  <div>box2</div>
  <div>box3</div>
</div>
<div class="flex">
  <div class="order3">box1</div>
  <div class="order1">box2</div>
  <div class="order2">box3</div>
</div>
<div class="flex">
  <div>row align</div>
  <div class="flex column">
    <div>column align</div>
    <div>column align</div>
    <div>column align</div>
  </div>
  <div>row align</div>
</div>

Typography

<span class="color red">red</span>
<span class="color green">green</span>
<span class="text center">center</span>
<span class="text left">left</span>
<span class="text right">right</span>
<span class="text justify">justify</span>
<span class="text thin">thin</span>
<span class="text book">book</span>
<span class="text normal">normal</span>
<span class="text bold">bold</span>

<span class="text large">large</span>
<span class="text big">big</span>

Backgrounds

<div class="bck green">
  <span class="color white">Lorem ipsum</span>
</div>

<div class="bck black">
  <span class="color white">Lorem ipsum</span>
</div>

<div class="bck pink">
  <span class="color white">Lorem ipsum</span>
</div>

Borders

<div class="border solid all">
  <span>Lorem ipsum</span>
</div>

<div class="border dotted top">
  <span>Lorem ipsum</span>
</div>

<div class="border dashed bottom">
  <span>Lorem ipsum</span>
</div>

<div class="border solid left">
  <span>Lorem ipsum</span>
</div>

<div class="border radius solid all">
  <span>Lorem ipsum</span>
</div>

Build your theme

  1. Create your folder theme into source/themes/themename

  2. Add your __variables.styl file with the following lines

// IMPORTANT: import core variables on the top of this file
@import '../../stylesheets/__variables.styl'

// Rewrite the core variables to customize your theme
xpressio_grid = false
theme_main = #3C9ABD

// IMPORTANT: import xpressio core on the bottom of this file
@import '../../stylesheets/xpressio.styl'
  1. Add your xpressio.theme.default.styl file
// All your stuff here
// You can also add more files with the following names
// xpressio.theme.*.styl
  1. Add Gulp task
stylus = require "gulp-stylus"

source =
  theme: [
    'source/themes/themename/__variables.styl'
    'source/themes/themename/xpressio.theme.*.styl'
  ]

gulp.task "stylus", ->
  gulp.src source.theme
    .pipe concat 'xpressio.theme.themename.styl'
    .pipe stylus
      compress: true
      errors: true
    .pipe gulp.dest('build/')

Credits

Created by David Rey.

License

This software is free to use under the MIT license.