Easy Styling Without Classes
With Startr Style, you don't need to add any special classes or styles right away. When you include Startr Style in your project, it automatically applies nice styles to your regular HTML elements. It's as easy as that!
Here's how you can do it in your HTML:
<html>
<head>
<!-- Include Startr Style CSS -->
<link rel="stylesheet" href="https://startr.style/style.css">
</head>
<body>
<!-- Your HTML content -->
<p>This paragraph will look great without any extra effort!</p>
<button>This button will also have a nice style.</button>
</body>
</html>
Just include the link to the Startr Style CSS file in the <head> of your HTML,
and your basic elements like paragraphs and buttons will be automatically styled. No need to add any classes or
extra code!
Just ad one line of code and you are good to go.
<link rel="stylesheet" href="https://startr.style/style.css">It is all you need to get started. No need to compile anything, just add and start building. When you want to take advantage of the full power of Startr Style, you can start adding custom properties to your elements. This will allow you to customize your styles even further.
Utility Complete CSS
Wouldn't it be great if we could take the best parts of utility-first CSS frameworks and combine them with the best parts of traditional CSS frameworks? That's exactly what Startr Style does. It provides a complete set of utilities for the majority of CSS properties, making it easy to style your elements without leaving your HTML. This is perfect for super quick prototyping or when you want to keep your CSS size constant as your project grows.
In terms of CSS frameworks, utilities commonly refer to a CSS class which applies a single CSS property to an
element. For example a class name of .bg-green would apply background-color: green to
that element. A Utility Complete framework provide a complete set of utilities for the majority
of CSS properties.
- Super quick HTML prototyping
- No need to leave your HTML
- Style your elements fast
Components
The following are example components from our upcoming componet library.
Nullam malesuada erat
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis.
Isabelle Plante
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros.
Donec odio
Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis.
Jane Doe
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Viktor Jones
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Marcia Stanley
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Giovanni Santana
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Nullam malesuada erat
18 hours ago | EntertainmentIsabelle Plante
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque volutpat mattis eros.
Be Inspired
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque volutpat mattis eros.
Quisque volutpat mattis eros.
New Beginnings
Welcome
Quisque imperdiet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque volutpat mattis eros.
Quisque volutpat
€30.00
Lorem ipsum dolor sit amet
€90.00
Consectetuer adipiscing elit
€60.00
Quisque volutpat mattis
€120.00
Quisque volutpat
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Nunc dignissim risus
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Cras ornare tristique
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Praesent placerat
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Join us today!
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros.
Lorem ipsum dolor sit amet
January 18, 2020
Ut enim ad minim veniam
March 24, 2020
Nemo enim ipsam voluptatem
Arpil 04, 2020
Questions
Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu.
CULTURE
Lorem ipsum dolor
5.0 (48 Reviews)
Our site uses cookies. Learn more about our use of cookies: Cookie policy
Be Creative
Lorem ipsum dolor sit amet
Beautiful Designs
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo ex fugiat quisquam.
A Perfect Place
Get creative with Startr Style
Learn More
There is nothing new about the concept of utility complete CSS and today you will find any number of utility first frameworks to pick from. What is unique about Startr Style however, is how these utilities are implemented. Traditionally utility complete frameworks include a rule for every common CSS property/value combination.
Not only does this result in an incredibly large CSS file size it also means you are restricted to a set number of property/value combinations as defined by the framework developers. Startr Style uses a different approach. Instead utilities are defined by just the property and you the developer define the value.
The resulting CSS a fraction of the size & you also have full access to the CSS spec for each property.
Style based utilities
<div style="--bg:var(--dark)"><div>
<div style="--bg:#2A2A2A"><div>
<div style="--bg:rgb(42,42,42)"><div>
<div style="--bg:rgba(0,0,0,.8)"><div>Responsive Design and Media Queries
In situations where certain tools need to be used depending on the screen size, you can use them selectively for each size. This lets you use these tools for particular screen sizes, simplifying the process of creating adaptable designs.
By default, we set four predefined points for the most common device resolutions.
/* Small '-sm' */
@media (min-width: 640px) { ... }
/* Medium '-md' */
@media (min-width: 768px) { ... }
/* Large '-lg' */
@media (min-width: 1024px) { ... }
/* Extra Large '-xl' */
@media (min-width: 1280px) { ... }
To use our style utilites with different screen sizes, just add the tool's name along with a - and the
short name of the screen size you want. By default, media queries start with mobile screens and then adjust for
larger ones. This means we design for the smallest screens first and then go bigger from there.
Consider the following example where --d is the Startr Style utility for the display CSS
property. Button is display:block by default. display:none from medium size screens up.
<button style="--d:block; --d-md:none">Only visible on small screens</button>Discover limitless possibilities
Explore our lab of resources and experiment with the endless possibilities of Startr Style.
Brutalism · Modernism · Minimalism · Skeuomorphism · Neumorphism · More