It is the universal and clean CSS style frame for websites or apps. Take it, remove the things you do not need, keep the rest. Add the missing parts from CSS examples. Save time and effort by the use of the hard mental work that others did before. Sweet social productivity in action :-)
See the LTS Flex theme alive in here: https://dorson.github.io/LTS-flex-css-style-theme-generator/
The main reason is to provide a better tool, frame and example that we can use to create beautiful websites and apps that are functional, simple, fast, useful, eye-friendly for most screens. Flexible on mobile, PC, tablet and TV screens too. We need this on our planet, if we want to have nice websites that work every time we need them.
In here there are basic rules and basic principles that make design decisions simple. Those principles can guide us to create the correct result, even if the future and technology will change. We can always go back to those simple principles, if in doubt.
-
0.0 LTS stands for long term support. We need this, because cities, hospitals, public services, and useful companies provide digital services. If those services fail, then people lose income and users are frustrated. Functioning websites are the basic necessity of our civilization.
-
0.1 Clear, helpful and simple for the user. We all like websites that are simple to use and easy to read. We help the people to do what they want to do on the website. When for examle the users want to search in the search box, then the size of the seach box increases a little, so that the users can use the search box faster for them. Or for example the munue links increase in size, when the people look inside of the menue. The LTS Flex CSS theme helps the uses to do what they want to do on the website they visit.
-
1.0 Flex = flexible and adaptable to any screen, website and app.
-
2.0 Vertical design layout. From top to bottom :-) Good for scrolling on mobile devices.
-
3.0 Minimal + structured, and then optimized too. We aim for the useful and clear structure of the CSS file, then we optimize it for efficiency, speed and size. During the development the code files are for reading. The optimized mini CSS file is optimized in a separate file. Efficiency and clear reading style of the code is a balance of compromise :-)
-
3.1 Global style and size settings first, then some exceptions to overwrite global settings. We do set all the basic CSS style rules for the HTML elements at the top first. If we need, then we overwrite those global CSS style properties in exceptional and individual cases. If we need to then with a global CSS class. If we need to then on the individual page, where we need individual CSS style setting. No need to create all the possible styles and classes in the global style.css file. It helps the browsers to paint websites faster !
-
3.2 Friendly pastel colors and optional dark mode too ! The colors are optimized to be friendly for billions of different eyes. We use soft and clean pastel colors, then we also use clean and dark pastel colors for the dark night mode of this LTS Flex theme. It's useful for eye health and sanity.
-
4.0 We use CSS style properties are like functions that paind the website, and the elements are the objects of the CSS rules. No need to invent 100X CSS class names for all the possible div boxes and exception cases. The style settings are set in the reverse logic format. Instead of setting the style setting for all elements one by one, we just treat the HTML elements as the properties of the CSS style. It's reverse logic. In short. The color or size owns the object in this theme :-)
Example: img, bla, bla2, bla5, input, iframe, .box {margin: 3px; } Instead of setting margins for all of them individually.
-
4.1 Sizes and margins first, then the colors and style. We help the apps to paint websites faster. First, we set sizes, madgins, borders, epaces, etc.. Then we set the colors and style details.
-
5.0 Maximum use of the standard HTML tags for style, instead of 100X custom CSS classes that will be forgotten in the future. We can use the HTML tags as if they were custom CSS classes. This LTS Flex theme is universal, it will work with all websites that use standard HTML tags, instead of custom CSS classes that often fail in the long time, when we forget why and what for they were created for. The HTML tags already give clarity and standards. We use them. When there are huge and important exceptions, then we can have some CSS classes in individual pages that will not break the global design of the website.
-
6.0 Test and then test again. A/B split testing of pages. We do test all CSS rule settings in an A/B test for usability, speed, browser compatibility, visibility, screen size flexibility on mobile, tablet, PC, TV, car screen, ebook readers, public kiosk service screens, etc..
-
7.0 Layout boxes and segments are optional. Delete the things you do not need. Keep the rest as you wish. Create your own version by reduction of the things you do not need. Which means that there are some elements, boxes or style rules that can be removed without breaking anything else.