Most of CSS frameworks are great for simple web applications. But none are looking good in the way modern sites are demanding.
So I decided to create Sirius wth a new concept of Layout First, which means that every element is built around its graphic in a structured layout.
Of course, taste is personal but why so many websites have the same functionalities?
Make it prettier
Don't you like the default theme? Sirius is built in order to easily change colors and rendering. Every variable is linked into the same scheme through all the SASS files, so you do not need to worry about changing every element of the UI.
For example, do you want to set all border radius to 0 px? Change the variable $border-radius to 0 px. Do you need more space between tiles? Increase the variable $gap.
You will find more variables into _config.sass, as well as inside each element.
Grid CSS plus Flexbox
In an early stage of development, everything was based on Flexbox, from elements to layouts. Then I changed my mind and I started using the popular Grid CSS: although Flexbox is part of the smaller elements, Grid provides an elegant solution for the general schema.
So you will find that each section and article is a grid, and you can define the widths and heights of the children tiles.
Colors are linked together
How many times did you find yourself browsing several websites for the right palette? I tried to simplify the process:
The greyscale is calculated accordingly to your choice. Be aware that $light and $dark are RGBA colors, and they are used just for lighter and darker elements over backgrounds. The lightest and the darkest colors are $white and $black.
Colors for success messages, warnings and errors are standardized to green, yellow and red.
Give credits to HTML5 tags
Tags are meaningful: applying CSS classes just for modifiers, almost every Sirius element resets the traditional HTML syntax. So if you need a button, type button. If you want a menu, type menu. A text input is input type="text", a header with a navigation bar will be a nav nested into a header, etc...
This is an example of this very section code:
Responsive Elements
I still do not understand why people declare a responsive design nowadays. Shouldn't it be the normality? Since smaller devices have less space, typography and some other elements are dynamically changing their size according to the screen. Here I said that.
Styles embedded into Vue Components?
No, thanks. This is a personal choice, not following any convention. I decided to separate the style from the template and script part of each Vue component.
The main reason is that since there are a lot of style connections, I needed to compile SASS files separately. Also, I like the idea of "component", but I prefer to insert only the structural logic in it.
