Update SimpliCSS.css

Author: baidou5

SimpliCSS/SimpliCSS.css

@@ -23,6 +23,13 @@
   --flat-concrete: #95a5a6;
 }
 
+/* Typography */
+.font-sans { font-family: sans-serif; }
+.font-serif { font-family: serif; }
+.font-mono { font-family: monospace; }
+
+.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+
 /* Color Texts */
 .text-blue { color: var(--blue); }
 .text-green { color: var(--green); }
@@ -31,6 +38,7 @@
 .text-cyan { color: var(--cyan); }
 .text-light { color: var(--gray-light); }
 .text-dark { color: var(--gray-dark); }
+ 
 
 /* Flat UI Color Texts */
 .text-flat-turquoise { color: var(--flat-turquoise); }
@@ -52,6 +60,9 @@
 .bg-cyan { background-color: var(--cyan); }
 .bg-light { background-color: var(--gray-light); }
 .bg-dark { background-color: var(--gray-dark); }
+.bg-blue-100 { background-color: #bbdefb; }
+.bg-blue-200 { background-color: #90caf9; }
+.bg-blue-300 { background-color: #64b5f6; }
 
 /* Flat UI Background Colors */
 .bg-flat-turquoise { background-color: var(--flat-turquoise); }
@@ -69,7 +80,14 @@
 .rounded-sm { border-radius: 4px; }
 .rounded-md { border-radius: 8px; }
 .rounded-lg { border-radius: 12px; }
-.rounded-full { border-radius: 9999px; }
+.rounded-full { border-radius: 50%; }
+
+/* Width and Height */
+.w-1 { width: 10%; }
+.w-2 { width: 20%; }
+.w-3 { width: 30%; }
+.w-4 { width: 40%; }
+.w-5 { width: 50%; }
 
 /* Width and Height */
 .w-full { width: 100%; }
@@ -83,6 +101,7 @@
 .m-1 { margin: 8px; }
 .m-2 { margin: 16px; }
 .m-3 { margin: 24px; }
+.m-4 { margin: 16px; }
 
 .p-0 { padding: 0; }
 .p-1 { padding: 8px; }
@@ -100,6 +119,20 @@
 .items-center { align-items: center; }
 .items-end { align-items: flex-end; }
 
+/* Flexbox Enhancements */
+.flex-1 { flex: 1; }
+.flex-auto { flex: auto; }
+.flex-initial { flex: initial; }
+
+/* Grid Enhancements */
+.grid-cols-6 { grid-template-columns: repeat(6, 1fr); }
+.grid-cols-12 { grid-template-columns: repeat(12, 1fr); }
+
+/* Gap in grid and flex */
+.gap-1 { gap: 4px; }
+.gap-2 { gap: 8px; }
+ 
+
 /* Grid */
 .grid { display: grid; }
 .grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
@@ -117,16 +150,49 @@
 .text-left { text-align: left; }
 .text-right { text-align: right; }
 
+/* Hover, Focus, Active States */
+.hover\:text-blue-500:hover { color: #3498db; }
+.focus\:bg-green-500:focus { background-color: #2ecc71; }
+.active\:border-red-500:active { border-color: #e74c3c; }
+
 /* Transform */
 .scale:hover { transform: scale(1.05); transition: transform 0.2s ease-in-out; }
 .rotate-45 { transform: rotate(45deg); }
+/* Transitions and Animations */
+.transition { transition: all 0.3s ease-in-out; }
+.transition-colors { transition: color 0.3s ease-in-out; }
+.transition-bg { transition: background-color 0.3s ease-in-out; }
 
 /* Shadows */
 .shadow-sm { box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); }
 .shadow-md { box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); }
 .shadow-lg { box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.2); }
+/* Display */
+.hidden { display: none; }
+.block { display: block; }
+.inline { display: inline; }
+.inline-block { display: inline-block; }
+
+/* Visibility */
+.visible { visibility: visible; }
+.invisible { visibility: hidden; }
+
+/* Responsive Widths */
+.sm\:w-1 { width: 10%; }
+.sm\:w-2 { width: 20%; }
 
 /* Media Queries */
+@media (min-width: 640px) {
+  .sm\:w-full { width: 100%; }
+}
+@media (min-width: 768px) {
+  .md\:w-full { width: 100%; }
+}
+@media (min-width: 1024px) {
+  .lg\:w-full { width: 100%; }
+}
+
+
 @media (max-width: 640px) {
   .sm\:text-lg { font-size: 18px; }
   .sm\:w-full { width: 100%; }