xpressio

Just a small and fast tool to design your website.

A little exercise to try Stylus

Simple to use and customize

Don't worry about your CSS knowledge, just set your settings, colors and build your xpressio theme in less than 5 minutes.

CSS3 Powered

CSS3 it's fun, with powerful features that makes it easy to create a Web Site.

Built with Stylus

Preprocesors are great tools providing scalable and maintainable CSS.

Lightweight

High performance Web Sites are a plus so Xpressio is lightweight.

Borders

Multiple border classes

border dotted top
border solid right
border dashed bottom
border solid left
border solid all

Add to only show on...

.desktop

.tablet

.mobile

.desktop

.tablet

.mobile

Normalize styles

Reset and preserves useful defaults styles.

pre, code

<a class="btn" href="">Link</a>
<button class="btn" type="submit">Button</button>
<input class="btn" type="button" value="Input">
<input class="btn" type="submit" value="Submit">
def openFile(path):
    file = open(path, "r")
    content = file.read()
    file.close()
    return content

Tables

Table header 1 Table header 3 Table header 3
Table footer 1 Table footer 2 Table footer 3
File 1 - Table body cell 1 File 1 - Table body cell 2 File 1 - Table body cell 3
File 2 - Table body cell 1 File 2 - Table body cell 2 File 2 - Table body cell 3

List style (default)

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.

List style (.square)

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.

List style (.circle)

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Ordered list (default)

  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  2. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  3. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Paragraph test

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio totam fugit alias ipsa, maiores voluptas nostrum. Ipsa numquam, adipisci id repellendus nam reprehenderit! Vel quia ullam nihil officia. Doloribus, officia. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores et harum nesciunt repellat minima, ad ea voluptatem corrupti provident voluptas voluptatibus odit quos ipsam esse distinctio similique optio officia cumque.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores et harum nesciunt repellat minima, ad ea voluptatem corrupti provident voluptas voluptatibus odit quos ipsam esse distinctio similique optio officia cumque. Maiores et harum nesciunt repellat minima, ad ea voluptatem corrupti provident voluptas voluptatibus odit

Paragraph test

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio totam fugit alias ipsa, maiores voluptas nostrum. Ipsa numquam, adipisci id repellendus nam reprehenderit! Vel quia ullam nihil officia. Doloribus, officia.

  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio totam fugit alias ipsa, maiores voluptas nostrum.
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio totam fugit alias ipsa, maiores voluptas nostrum. Ipsa numquam, adipisci id repellendus nam reprehenderit! Vel quia ullam nihil officia.

Maiores et harum nesciunt repellat minima.

Images and border-radius examples

Awesome responsive images and beatiful border-radius.

border radius
border circle

Inputs & Buttons

Simple and beatifuls form components

Inputs

Forms

First Second Third
Yes No

Grid system

Flexible and fluid grid system (customizable to 16 columns max.)

Just remember the sum must be equal to your colums variable.
Example: columns = 12 | col4 + col4 + col4 = 12
col1
col1
col1
col1
col1
col1
col1
col1
col1
col1
col1
col1
col1
col11
col3
col3
col3
col3
col3
col9
col4
col4
col4
col6
col6

Flexbox (.flex)

Easy play with CSS3 Flexbox awesome feature

First flex container (.flex.auto)

.flex .column .x_center

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde tenetur distinctio odit rerum iure quas nihil neque a facilis quam tempora pariatur reprehenderit architecto cum beatae eaque quisquam rem veniam.

Flexbox inside flexbox (.flex .column)
div

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

div

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

div

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

.flex .column .x_center

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde tenetur distinctio odit rerum iure quas nihil neque a facilis quam tempora pariatur reprehenderit architecto cum beatae eaque quisquam rem veniam.

Second flex container (.flex)

.x1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde tenetur distinctio odit rerum iure quas nihil neque a facilis quam tempora pariatur reprehenderit architecto cum beatae eaque quisquam rem veniam.

.x1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde tenetur distinctio odit rerum iure quas nihil neque a facilis quam tempora pariatur reprehenderit architecto cum beatae eaque quisquam rem veniam.

Third flex container (.flex)

.x4

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde tenetur distinctio odit rerum iure quas nihil neque a facilis quam tempora pariatur reprehenderit architecto cum beatae eaque quisquam rem veniam.

.x1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde tenetur distinctio odit rerum iure quas nihil neque a facilis quam tempora pariatur reprehenderit architecto cum beatae eaque quisquam rem veniam.

Font colors & styles

Default useful typography styles that can be customized.

color

normal

white

black

blue

green

yellow

red

text [align]

left

center

right

justify

text [style]

thin

book

normal

bold

italic

uppercase

underline

text size

small

normal

large

big

Tooltips

Cool and helpful message

Tooltip description
Mouseover
Tooltip description
Just a demo tooltip

Dropdowns

Easy markup and classes for your dropdowns

Modals

Responsive CSS3 modals

Modal 1
Modal 2

Colorful backgrounds

bck yellow
bck orange
bck pink
bck red
bck blue
bck green
bck violet
bck black

Your own beatiful colors

theme main
theme background
theme title
theme subtitle
theme secondary
theme alternative