CoCreate CSS Parser Demo
+ +Usage and Configuration
++ To use the CoCreate CSS Parser, include the CoCreate.js + script in your HTML file. You can configure its behavior by + adding attributes to the script tag. +
+<script src="https://CoCreate.app/dist/CoCreate.js"></script>Configuration Attributes
+-
+
-
+ parse="false": By default (or with
+
parse="true"), the CSS parser + automatically scans the DOM on load and generates CSS. + Set this tofalseto prevent the initial + automatic parsing. +
+ -
+ save="false": By default, any CSS generated by
+ the parser is saved using CoCreate's CRUD functionality.
+ This persists the styles in your database so they are
+ available on subsequent page loads. Setting this to
+
falsewill prevent the generated CSS from + being saved, making the styles temporary for the + session. +
+
+ To enable saving, you must add a <link>
+ tag to your document. The parser will generate the CSS, and
+ CoCreate's backend will save it as a file. There are two
+ ways to configure this:
+
1. Using the `name` attribute:
+
+ The simplest method is to add a <link>
+ tag with a name attribute. The value of the
+ name attribute will be used as the filename for the saved
+ CSS.
+
<link name="styles.css" rel="stylesheet" type="text/css">2. Using CoCreate CRUD attributes:
++ Alternatively, you can use CoCreate's standard storage + attributes to specify where to save the CSS content within + your database. +
+<link array="files" object_id="some_unique_id" key="css" rel="stylesheet" type="text/css">+ Example of disabling automatic parsing and saving on the + script tag: +
+<script src="https://CoCreate.app/dist/CoCreate.js" parse="false" save="false"></script>1. Basic Styling
++ You can apply any CSS declaration directly within the class + attribute. The syntax is a simple `property:value` format. + This allows you to "freehand" your styles without writing + separate CSS files. +
++ If a CSS value contains spaces, simply replace each space + with an underscore (`_`). For example, to apply + `border: 1px solid black`, you would write the class + `border:1px_solid_black`. +
+2. Breakpoint-based Styling
++ Use predefined breakpoints (xs, sm, md, lg, xl) to apply + styles at different screen sizes. Resize your browser to see + the effect. +
+3. Height-based Styling
++ Apply styles based on the viewport height using height-based + breakpoints (e.g., `h-xs`, `h-sm`, `h-md`). This is useful + for adjusting layouts when vertical space is limited. +
+4. Orientation-based Styling
++ Apply styles based on the device orientation (portrait or + landscape). +
+5. Color Scheme Preference (Dark/Light Mode)
++ Use `dark` or `light` to style elements based on the user's + system preference. +
+6. Print and Screen Media Types
++ Apply styles specifically for printing or for screen + display. +
+7. Custom Media Queries
++ You can write your own media query conditions directly in + the class. +
+8. Combining Media Queries
++ Combine multiple conditions using `&`. This allows for + highly specific styling rules. +
+9. Using `OR` and `NOT` in Media Queries
++ The parser supports `OR` (using a comma `,`) and `NOT` + (using a `not_` prefix) logic in media queries. +
+10. Using className for Reusable Styles
+ + Group multiple atomic styles under a single reusable class + name using the `className` attribute. +
+11. Using `!important`
++ You can make a style declaration `!important` to override + other conflicting styles. Just append `!important` to the + class definition. According to CSS rules, `!important` gives + a style the highest priority, overriding other styles + regardless of specificity or source order. +
+12. Styling Pseudo-classes (e.g., :hover)
++ To style pseudo-classes like `:hover`, `:focus`, or + `:active`, define a style rule by attaching the + pseudo-class to the `className` attribute. This creates a + more specific CSS selector that applies during the specified + state (e.g., when hovering). You can also make these styles + `!important` to ensure they override any other conflicting + hover styles. +
+13. Complex Combined Queries
++ You can chain multiple media features together to create + very specific styling conditions. This example applies a + style only on medium-sized screens, in landscape mode, AND + when the user has a dark color scheme preference. +
+14. Advanced: Combining Pseudo-classes, Media Queries, and `!important`
++ You can combine pseudo-classes, media queries, and the + `!important` flag for highly specific and prioritized + styles. The parser handles the complexity of generating the + correct CSS rule, and the browser applies them based on + standard CSS precedence: `!important` wins first, then + selector specificity (a `:hover` selector is more specific), + then source order. +
+
- 
- 
- 
- 
- 
-