Skip to content

Structured Documentation Setup #79

@ajay-dhangar

Description

@ajay-dhangar

Created base files and folders for the documentation workspace where code examples will be written.

css
|--- introduction.mdx                          (Overview of CSS in Frontend Development)
|
|--- basics
|    |--- inline.mdx
|    |--- internal.mdx
|    |--- external.mdx
|    |--- cascading-order.mdx
|
|--- syntax-basics
|    |--- rules
|    |    |--- selector.mdx
|    |    |--- properties-and-values.mdx
|    |    |--- declaration.mdx
|    |--- comments.mdx
|
|--- selectors
|    |--- simple
|    |    |--- element.mdx
|    |    |--- class.mdx
|    |    |--- id.mdx
|    |    |--- universal.mdx
|    |    |--- grouping.mdx
|    |--- combinators
|    |    |--- descendant.mdx
|    |    |--- child.mdx
|    |    |--- adjacent-sibling.mdx
|    |    |--- general-sibling.mdx
|    |--- attribute-selectors.mdx
|    |--- pseudo-classes.mdx
|    |--- pseudo-elements.mdx
|
|--- typography
|    |--- fonts
|    |    |--- font-family.mdx
|    |    |--- font-style.mdx
|    |    |--- font-size.mdx
|    |    |--- font-shorthand.mdx
|    |    |--- google-fonts.mdx
|    |    |--- font-variant.mdx
|    |--- text-style
|    |    |--- color.mdx
|    |    |--- direction.mdx
|    |    |--- text-alignment.mdx
|    |    |--- text-decoration.mdx
|    |    |--- text-transform.mdx
|    |    |--- text-spacing.mdx
|    |    |--- line-height.mdx
|    |    |--- text-shadow.mdx
|    |    |--- word-wrap.mdx
|
|--- colors
|    |--- color-names.mdx
|    |--- rgb.mdx
|    |--- rgba.mdx
|    |--- hsl.mdx
|    |--- hsla.mdx
|    |--- gradients.mdx
|
|--- background
|    |--- background-color.mdx
|    |--- background-image.mdx
|    |--- background-gradient.mdx
|    |--- background-position.mdx
|    |--- background-size.mdx
|    |--- background-repeat.mdx
|    |--- background-attachment.mdx
|    |--- background-shorthand.mdx
|
|--- box-model
|    |--- margin.mdx
|    |--- padding.mdx
|    |--- border.mdx
|    |--- outline.mdx
|    |--- width.mdx
|    |--- height.mdx
|    |--- box-sizing.mdx
|    |--- box-shadow.mdx
|    |--- css-units
|    |    |--- absolute-vs-relative.mdx
|    |    |--- viewport-units.mdx
|    |    |--- units-with-functions.mdx
|
|--- layout
|    |--- display
|    |    |--- block.mdx
|    |    |--- inline.mdx
|    |    |--- inline-block.mdx
|    |    |--- none.mdx
|    |    |--- visibility.mdx
|    |--- position
|    |    |--- static.mdx
|    |    |--- relative.mdx
|    |    |--- absolute.mdx
|    |    |--- fixed.mdx
|    |    |--- sticky.mdx
|    |    |--- z-index.mdx (Stacking Context)
|    |--- float-and-clear.mdx
|    |--- overflow.mdx
|    |--- display-flow.mdx
|    |--- modern-layouts
|    |    |--- flexbox.mdx
|    |    |--- grid.mdx
|    |    |--- subgrid.mdx
|    |    |--- multi-column-layout.mdx
|    |    |--- container-queries.mdx
|    |    |--- nesting.mdx
|    |    |--- logical-properties.mdx
|
|--- effects
|    |--- opacity.mdx
|    |--- filters-and-blend.mdx
|    |--- clip-path.mdx
|    |--- mask.mdx
|    |--- backdrops.mdx
|
|--- transitions-and-animations
|    |--- transforms.mdx
|    |--- transitions.mdx
|    |--- keyframes.mdx
|    |--- animation-timing.mdx
|
|--- responsiveness
|    |--- media-queries.mdx
|    |--- container-queries.mdx
|    |--- responsive-images.mdx
|    |--- responsive-typography.mdx
|    |--- fluid-layouts.mdx
|
|--- advanced-features
|    |--- css-variables.mdx
|    |--- css-functions.mdx
|    |--- css-layers.mdx
|    |--- cascade-layers.mdx
|    |--- specificity.mdx
|    |--- inheritance.mdx
|    |--- shadow-dom.mdx
|
|--- utilities
|    |--- tables.mdx
|    |--- lists.mdx
|    |--- images.mdx
|    |--- icons.mdx
|
|--- best-practices
|    |--- performance.mdx
|    |--- accessibility.mdx
|    |--- maintainability.mdx
|    |--- scalability.mdx
|    |--- naming-conventions.mdx (BEM, OOCSS, SMACSS)
|
|--- css-frameworks
|    |--- tailwind-css.mdx
|    |--- bootstrap.mdx
|    |--- bulma.mdx
|    |--- foundation.mdx
|    |--- materialize.mdx
|
|--- modern-css-tools
|    |--- preprocessors
|    |    |--- sass.mdx
|    |    |--- less.mdx
|    |    |--- stylus.mdx
|    |--- postcss.mdx
|    |--- css-in-js.mdx
|    |--- browser-devtools.mdx
|
|--- project-practicals
|    |--- mini-projects.mdx
|    |--- layout-practice.mdx
|    |--- animation-practice.mdx
|    |--- responsive-design-practice.mdx
|    |--- performance-optimization.mdx

Metadata

Metadata

Assignees

Type

No type

Projects

Status

Done

Relationships

None yet

Development

No branches or pull requests

Issue actions