Introduction
When it comes to designing your site on Raisely, we try to do a lot of the work for you with our beautiful, ready-to-go campaigns. We also let you control a bunch of design-related properties like your brand colours, typography, and buttons, which you can update without having to touch any code.
However, sometimes you can't always get exactly what your after and you might start reaching for trusty 'ol CSS cracks knuckles. But wait, hold up! Whilst you can go ahead and write your own styles directly into Raisely, we've got a pile of ready-made, piping-hot class helpers, mixins, and functions, fresh out of the oven that might be able to save you writing a bunch of CSS.
Here's a little taster of what we've cooked up for you:
Class Helpers
Want to make a row full width? Or only show a block when a user is logged in? We've got you covered. Check out our list of class helpers that you can use to enhance your campaign.
Variables
Tired of declaring the same property over and over again, and then having to do a find-and-replace every time you want to update them ? Take a look at our built-in SCSS variables to see how you can speed up writing styles🏃🏽♀️💨
Theming Mixins
With our prebuilt campaign themes, we have done our best to make sure that each component will not only look great, but will also be meet accessibility standards. However, sometimes you might find yourself wanting to change the colours on the control panel, or perhaps the layout of the amount buttons on your donation form. With our suite of theming mixins, you can make sweeping changes like these with 1 line of code, all whilst ensuring accessibility 🙌
Utility Mixins
We've put together a library of utility mixins that you can use to do anything from adding a slant to your buttons or detecting a specific color shade, to writing IE specific styles or creating crazy 9 sided shape. Check out our full list and supercharge your CSS 💪
Functions
Our super powerful functions let you do things like ensure the accessibility of color combinations, manipulate colors, and access globally defined theme variables. We used functions like the accessible-color function all the time when writing our styles and you could even use it to write your own mixins 🔥
Updated almost 4 years ago