Do you use Slater for CSS? CSS support in Slater has always been somewhat of an afterthought—JavaScript is our love language! But sometimes, you need a simple way to add CSS to your project. Maybe you want to write a complex grid or use a CSS property that Webflow doesn't support. That's why we've decided to make CSS a first-class citizen.

We considered launching the new CSS functionality today, but we want to test it a bit more. Expect it early next week.

To prepare for the launch, let's highlight 3 CSS solutions found in the Community Library:

Community Library

🫵 Pointer events​
​​CSS classes to control pointer events: .pointer-events-off disables interactions, .pointer-events-on enables interactions.

… Ellipsis text​
​CSS class to truncate text with ellipsis when it overflows the container width.

📜 Hide scrollbars​
CSS class to hide scrollbars

Have you added a useful script to your library? Share it with us!

​

--

Javascript 101: CSS & JS

Let's stay on the subject of CSS. Combining CSS and JavaScript is a important way to create dynamic websites. In many cases, you’ll want to modify styles using JavaScript, either in response to user input or to create smooth animations. Let's look at some examples of how you can do this.

​

1. Inline Styles
​The easiest way to manipulate CSS with JavaScript is by modifying the inline styles of an element directly using the style property.

```
<button id="colorBtn">Change Background</button>
<div id="box" style="width: 100px; height: 100px; background-color: lightblue;"></div>

<script>
const button = document.getElementById('colorBtn');
const box = document.getElementById('box');

button.addEventListener('click', () => {
box.style.backgroundColor = 'tomato';
});
</script>

```
Here, clicking the button changes the background color of the div. This method works for directly applying or modifying individual CSS properties.

​

2. Manipulating CSS Classes
​Rather than directly manipulating individual CSS properties, a more maintainable approach is to add, remove, or toggle CSS classes using JavaScript. This way, you keep all your styles in a CSS file and simply tell JavaScript to apply or remove those classes.

```
<button id="toggleBtn">Toggle Dark Mode</button>
<div id="box" class="light-mode"></div>

<style>
.light-mode {
background-color: lightgray;
width: 100px;
height: 100px;
}
.dark-mode {
background-color: black;
color: white;
}
</style>

<script>
const toggleButton = document.getElementById('toggleBtn');
const box = document.getElementById('box');

toggleButton.addEventListener('click', () => {
box.classList.toggle('dark-mode');
});
</script>

```
Here, we use classList.toggle to switch between light and dark mode. This method is more scalable and easier to maintain because your styles are kept in CSS files.

​

3. Responsive Design
​CSS variables (–custom-property) allow you to define dynamic values that can be updated through JavaScript, making it an effective way to handle themes and responsive styles.

```
<style>
:root {
--box-color: pink;
}
.variable-box {
width: 100px;
height: 100px;
background-color: var(--box-color);
}
</style>
​
<div class="variable-box"></div>
<button id="changeColor">Change Color</button>
​
<script>
const button = document.getElementById('changeColor');
​
button.addEventListener('click', () => {
document.documentElement.style.setProperty('--box-color', 'skyblue');
});
</script>

```

In this example, we use JavaScript to update a CSS variable (–box-color) that controls the background color of the box. This approach is excellent for creating theme-able and responsive designs.

​

By combining CSS and JavaScript, you can build interactive user interfaces that react to user input and adapt to changing conditions. Remember to choose the right approach based on your use case. For simple changes, inline styles might suffice. For more scalable, maintainable code, manipulating CSS classes is the way to go. And if you need complete control, modifying CSS variables can offer flexibility.

Happy coding!

​

🤙 the Slater Team

​

​

If Slater helps you create better websites, please support the team behind it.