Notifications
See all
  • Alice C. left a comment.

    1 hour ago

  • Joshua S. uploaded a file.

    2 hours ago

  • Tara S. sent you a message.

    2 hours ago

  • Melany W. left a comment.

    3 hours ago

Erik KovalskyProduct Manager
ProfileView your profile

ProjectsAll my projects
TeamManage your team

SettingsAccount settings

  • Erik KovalskyProduct Manager
    ProfileView your profile

    ProjectsAll my projects
    TeamManage your team

    SettingsAccount settings

Elements

  • Elements Hub
  • Colors
  • Helpers
  • Icons
  • Interaction
  • VDropdown
  • VLoader
  • VPlaceload v1.2
  • VPlaceloadText v1.2
  • VPlaceloadAvatar v1.2
  • VMessage v1.1
  • VModal
  • VProgress
  • VTootlip v1.1
  • Buttons
  • Forms v2.3
  • Switches
  • Addons

Select Language

Activity

  • Team
  • Projects
  • Schedule
Joshua S. Las Vegas, NV
Melany W. San Jose, CA
Esteban C. Miami, FL
Tara S. New York, NY
The slicer projectgetslicer.io
31%
5 / 24
Metamovies reworkedmetamovies.co
84%
28 / 31
Fast Pizza redesignfastpizza.com
60%
25 / 39

Call Danny at Colby's

Today - 11:30am

Meeting with Alice

Today - 01:00pm

Answer Annie's message

Today - 01:45pm

Send new campaign

Today - 02:30pm

Project review

Today - 03:30pm

Call Trisha Jackson

Today - 05:00pm

Write proposal for Don

Today - 06:00pm

Recently viewed

Browser SupportBlog post
Twitch APIBlog post
Browser SupportBlog post

Recent Members

Alice C.San Diego, CASoftware EngineerThis is a nice user description that we can use as demo content.
Alice C.Software Engineer
Tara S.New York, NYUI/UX DesignerThis is a nice user description that we can use as demo content.
Tara S.UI/UX Designer
Dwayne H.Los Angeles, CAProduct ManagerThis is a nice user description that we can use as demo content.
Jimmy H.Project Manager

Task Details

Overview

Build a desktop and mobile landing page wireframe

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Videmus igitur ut conquiescere ne infantes quidem possint. Duo Reges: constructio interrete... See More

Participants

Statistics

5 days
3 files
54
Add Checklist

Files

Preliminary Sketches3MB 5 days ago
DownloadDownload this file
View TaskView related task

UpdateUpload a new version
DeleteDelete this file
Project Budget0.6MB 8 days ago
DownloadDownload this file
View TaskView related task

UpdateUpload a new version
DeleteDelete this file
POC Demo8.75MB 8 days ago
DownloadDownload this file
View TaskView related task

UpdateUpload a new version
DeleteDelete this file

Messages

Send

Welcome

Notifications
See all
  • Alice C. left a comment.

    1 hour ago

  • Joshua S. uploaded a file.

    2 hours ago

  • Tara S. sent you a message.

    2 hours ago

  • Melany W. left a comment.

    3 hours ago

  • Elements
  • Colors

Theme Colors

While Vuero was previously using predefined SCSS color variables that could be used for customization before the Sass compilation. With Vuero 2.0, this is now over. We completely switched to a new native CSS Variables setup. First it means that you can dynamically change any color at runtime. It also means that you can scope those changes to one or several components. However each change has a cost. We had to switch to a new Bulma setup called Bulma CSS Vars, which completely rewrites Bulma variables to CSS variables.

var(--primary)
var(--secondary)
var(--dark)
var(--success)
var(--warning)
var(--danger)

Theming

Changing Vuero colors is now a bit more complicated than before but we will point you to the right files so everything remains as easy as before. To customize Vuero base colors, which are used to generate all derived ones, you need to edit src/bulma-css-vars.config.js. There you can edit all the primary and other related base variables. Please note that we also switched the base notation to HSL in replacement of HEX.

var(--purple)
var(--blue)
var(--light-blue)
var(--red)
var(--orange)
var(--yellow)
var(--pink)
var(--green)

Customizing CSS Variables

We created a new folder and some bew files in src/scss/css-variables. There, we use a new utility mixin src/scss/css-variables/_mixins.scss to generate all our colors in the other files. Please also note that you can also customize font variables and corner radiuses at runtime.

var(--primary-grey)
var(--placeholder)
var(--smoke-white)