├── .gitignore ├── 5-1-settings-and-tools ├── .gitignore ├── .stylelintrc.json ├── README.md ├── index.html ├── package-lock.json ├── package.json └── scss │ ├── index.scss │ ├── settings │ ├── _colors.scss │ ├── _layout.scss │ ├── _typography.scss │ └── _z-index.scss │ └── tools │ ├── _justify.scss │ ├── _mixins.scss │ ├── _sidebar.scss │ └── _toRem.scss ├── 5-2-generic ├── .stylelintrc.json ├── README.md ├── index.html ├── package-lock.json ├── package.json └── scss │ ├── generic │ ├── _box-sizing.scss │ ├── _normalize.scss │ └── _reset.scss │ ├── index.scss │ ├── settings │ ├── _colors.scss │ ├── _layout.scss │ ├── _typography.scss │ └── _z-index.scss │ └── tools │ └── _justify.scss ├── 5-3-elements ├── .stylelintrc.json ├── README.md ├── index.html ├── package-lock.json ├── package.json └── scss │ ├── elements │ ├── _body.scss │ ├── _headings.scss │ ├── _img.scss │ └── _links.scss │ ├── generic │ ├── _box-sizing.scss │ ├── _normalize.scss │ └── _reset.scss │ ├── index.scss │ ├── settings │ ├── _colors.scss │ ├── _layout.scss │ ├── _typography.scss │ ├── _variables.scss │ └── _z-index.scss │ └── tools │ ├── _justify.scss │ ├── _mixins.scss │ ├── _sidebar.scss │ └── _toRem.scss ├── 6-1-objects-and-atoms ├── .stylelintrc.json ├── README.md ├── img │ ├── bg │ │ ├── cursos-codelytv-pro.png │ │ ├── kayak.jpg │ │ └── plant.jpg │ ├── cursos │ │ ├── arquitectura │ │ │ └── refactoring-bloater-code-smells.jpg │ │ ├── bash.jpg │ │ ├── buenas-practicas-bdd-cucumber-behat.jpg │ │ ├── comunicacion-microservicios.jpg │ │ ├── cqrs-event-sourcing-kotlin-axon-framework.jpg │ │ ├── curso-agile-retrospectivas.jpg │ │ ├── curso-api-http-scala.jpg │ │ ├── curso-app-mean-webpack.jpg │ │ ├── curso-app-vuejs-jest.jpg │ │ ├── curso-arquitectura-hexagonal.jpg │ │ ├── curso-aws-ec2.jpg │ │ ├── curso-aws-escalando-apps.jpg │ │ ├── curso-cqrs.jpg │ │ ├── curso-introduccion-scala.jpg │ │ ├── curso-screenshot-testing-android.jpg │ │ ├── curso-screenshot-testing-ios.jpg │ │ ├── curso-ui-testing-android.jpg │ │ ├── curso-ui-testing-ios.jpg │ │ ├── ddd-en-php.jpg │ │ ├── ddd-java.jpg │ │ ├── docker-desde-0.jpg │ │ ├── domain-driven-design.jpg │ │ ├── dotfiles.jpg │ │ ├── elastic-stack.jpg │ │ ├── git-introduccion-trabajo-en-equipo.jpg │ │ ├── github-actions-automatizacion.jpg │ │ ├── github-actions-integracion-continua.jpg │ │ ├── go-primera-app.jpg │ │ ├── grafana-prometheus.jpg │ │ ├── intellij.jpg │ │ ├── iterm-productividad.jpg │ │ ├── kubernetes-para-desarrolladores.jpg │ │ ├── layouts-css.jpg │ │ ├── makefiles.jpg │ │ ├── migracion-vuejs.jpg │ │ ├── notion.jpg │ │ ├── novedades-vue-3.jpg │ │ ├── programacion-funcional-refactor-typeclasses.jpg │ │ ├── prometheus.jpg │ │ ├── reactjs-de-0-a-deploy.jpg │ │ ├── solid.jpg │ │ ├── terminal-zsh.jpg │ │ ├── testing-introduccion-buenas-practicas.jpg │ │ ├── testing-vuex.jpg │ │ └── vistas-android.jpg │ ├── icons │ │ ├── facebook.svg │ │ ├── github.svg │ │ ├── instagram.svg │ │ ├── linkedin.svg │ │ ├── twitter.svg │ │ └── youtube.svg │ └── testimonios │ │ ├── antonio-manuel-rubio.jpg │ │ ├── dani-madurell.jpeg │ │ ├── edu-salguero.jpeg │ │ ├── fernando-ripoll.jpg │ │ ├── joan-miralles.jpg │ │ ├── luis-rodriguez.jpg │ │ ├── marc-monguio.jpg │ │ ├── miguel-angel-sanchez.jpg │ │ └── sergio-de-candelario.jpg ├── index.html ├── package-lock.json ├── package.json └── scss │ ├── atoms │ ├── _box.scss │ ├── _btn.scss │ ├── _cover-background.scss │ ├── _pill.scss │ └── _typography.scss │ ├── elements │ ├── _body.scss │ ├── _headings.scss │ ├── _img.scss │ └── _links.scss │ ├── generic │ ├── _box-sizing.scss │ └── _normalize.scss │ ├── index.scss │ ├── objects │ ├── _container.scss │ └── _ui-list.scss │ ├── settings │ ├── _colors.scss │ ├── _layout.scss │ ├── _typography.scss │ ├── _variables.scss │ └── _z-index.scss │ └── tools │ ├── _justify.scss │ ├── _mixins.scss │ ├── _sidebar.scss │ └── _toRem.scss ├── 6-2-molecules ├── .stylelintrc.json ├── README.md ├── img │ ├── bg │ │ ├── cursos-codelytv-pro.png │ │ ├── kayak.jpg │ │ └── plant.jpg │ ├── cursos │ │ ├── arquitectura │ │ │ └── refactoring-bloater-code-smells.jpg │ │ ├── bash.jpg │ │ ├── buenas-practicas-bdd-cucumber-behat.jpg │ │ ├── comunicacion-microservicios.jpg │ │ ├── cqrs-event-sourcing-kotlin-axon-framework.jpg │ │ ├── curso-agile-retrospectivas.jpg │ │ ├── curso-api-http-scala.jpg │ │ ├── curso-app-mean-webpack.jpg │ │ ├── curso-app-vuejs-jest.jpg │ │ ├── curso-arquitectura-hexagonal.jpg │ │ ├── curso-aws-ec2.jpg │ │ ├── curso-aws-escalando-apps.jpg │ │ ├── curso-cqrs.jpg │ │ ├── curso-introduccion-scala.jpg │ │ ├── curso-screenshot-testing-android.jpg │ │ ├── curso-screenshot-testing-ios.jpg │ │ ├── curso-ui-testing-android.jpg │ │ ├── curso-ui-testing-ios.jpg │ │ ├── ddd-en-php.jpg │ │ ├── ddd-java.jpg │ │ ├── docker-desde-0.jpg │ │ ├── domain-driven-design.jpg │ │ ├── dotfiles.jpg │ │ ├── elastic-stack.jpg │ │ ├── git-introduccion-trabajo-en-equipo.jpg │ │ ├── github-actions-automatizacion.jpg │ │ ├── github-actions-integracion-continua.jpg │ │ ├── go-primera-app.jpg │ │ ├── grafana-prometheus.jpg │ │ ├── intellij.jpg │ │ ├── iterm-productividad.jpg │ │ ├── kubernetes-para-desarrolladores.jpg │ │ ├── layouts-css.jpg │ │ ├── makefiles.jpg │ │ ├── migracion-vuejs.jpg │ │ ├── notion.jpg │ │ ├── novedades-vue-3.jpg │ │ ├── programacion-funcional-refactor-typeclasses.jpg │ │ ├── prometheus.jpg │ │ ├── reactjs-de-0-a-deploy.jpg │ │ ├── solid.jpg │ │ ├── terminal-zsh.jpg │ │ ├── testing-introduccion-buenas-practicas.jpg │ │ ├── testing-vuex.jpg │ │ └── vistas-android.jpg │ ├── icons │ │ ├── facebook.svg │ │ ├── github.svg │ │ ├── instagram.svg │ │ ├── linkedin.svg │ │ ├── twitter.svg │ │ └── youtube.svg │ └── testimonios │ │ ├── antonio-manuel-rubio.jpg │ │ ├── dani-madurell.jpeg │ │ ├── edu-salguero.jpeg │ │ ├── fernando-ripoll.jpg │ │ ├── joan-miralles.jpg │ │ ├── luis-rodriguez.jpg │ │ ├── marc-monguio.jpg │ │ ├── miguel-angel-sanchez.jpg │ │ └── sergio-de-candelario.jpg ├── index.html ├── package-lock.json ├── package.json └── scss │ ├── atoms │ ├── _box.scss │ ├── _btn.scss │ ├── _cover-background.scss │ ├── _pill.scss │ └── _typography.scss │ ├── elements │ ├── _body.scss │ ├── _headings.scss │ ├── _img.scss │ └── _links.scss │ ├── generic │ ├── _box-sizing.scss │ └── _normalize.scss │ ├── index.scss │ ├── molecules │ ├── _card.scss │ ├── _cta-box.scss │ ├── _dropdown.scss │ ├── _quote.scss │ └── _video-thumbnail.scss │ ├── objects │ ├── _container.scss │ └── _ui-list.scss │ ├── settings │ ├── _colors.scss │ ├── _layout.scss │ ├── _typography.scss │ ├── _variables.scss │ └── _z-index.scss │ └── tools │ ├── _justify.scss │ ├── _mixins.scss │ ├── _sidebar.scss │ └── _toRem.scss ├── 6-3-organisms ├── .stylelintrc.json ├── README.md ├── img │ ├── bg │ │ ├── cursos-codelytv-pro.png │ │ ├── kayak.jpg │ │ └── plant.jpg │ ├── cursos │ │ ├── arquitectura │ │ │ └── refactoring-bloater-code-smells.jpg │ │ ├── bash.jpg │ │ ├── buenas-practicas-bdd-cucumber-behat.jpg │ │ ├── comunicacion-microservicios.jpg │ │ ├── cqrs-event-sourcing-kotlin-axon-framework.jpg │ │ ├── curso-agile-retrospectivas.jpg │ │ ├── curso-api-http-scala.jpg │ │ ├── curso-app-mean-webpack.jpg │ │ ├── curso-app-vuejs-jest.jpg │ │ ├── curso-arquitectura-hexagonal.jpg │ │ ├── curso-aws-ec2.jpg │ │ ├── curso-aws-escalando-apps.jpg │ │ ├── curso-cqrs.jpg │ │ ├── curso-introduccion-scala.jpg │ │ ├── curso-screenshot-testing-android.jpg │ │ ├── curso-screenshot-testing-ios.jpg │ │ ├── curso-ui-testing-android.jpg │ │ ├── curso-ui-testing-ios.jpg │ │ ├── ddd-en-php.jpg │ │ ├── ddd-java.jpg │ │ ├── docker-desde-0.jpg │ │ ├── domain-driven-design.jpg │ │ ├── dotfiles.jpg │ │ ├── elastic-stack.jpg │ │ ├── git-introduccion-trabajo-en-equipo.jpg │ │ ├── github-actions-automatizacion.jpg │ │ ├── github-actions-integracion-continua.jpg │ │ ├── go-primera-app.jpg │ │ ├── grafana-prometheus.jpg │ │ ├── intellij.jpg │ │ ├── iterm-productividad.jpg │ │ ├── kubernetes-para-desarrolladores.jpg │ │ ├── layouts-css.jpg │ │ ├── makefiles.jpg │ │ ├── migracion-vuejs.jpg │ │ ├── notion.jpg │ │ ├── novedades-vue-3.jpg │ │ ├── programacion-funcional-refactor-typeclasses.jpg │ │ ├── prometheus.jpg │ │ ├── reactjs-de-0-a-deploy.jpg │ │ ├── solid.jpg │ │ ├── terminal-zsh.jpg │ │ ├── testing-introduccion-buenas-practicas.jpg │ │ ├── testing-vuex.jpg │ │ └── vistas-android.jpg │ ├── icons │ │ ├── facebook.svg │ │ ├── github.svg │ │ ├── instagram.svg │ │ ├── linkedin.svg │ │ ├── twitter.svg │ │ └── youtube.svg │ └── testimonios │ │ ├── antonio-manuel-rubio.jpg │ │ ├── dani-madurell.jpeg │ │ ├── edu-salguero.jpeg │ │ ├── fernando-ripoll.jpg │ │ ├── joan-miralles.jpg │ │ ├── luis-rodriguez.jpg │ │ ├── marc-monguio.jpg │ │ ├── miguel-angel-sanchez.jpg │ │ └── sergio-de-candelario.jpg ├── index.html ├── package-lock.json ├── package.json ├── scss │ ├── atoms │ │ ├── _box.scss │ │ ├── _btn.scss │ │ ├── _cover-background.scss │ │ ├── _pill.scss │ │ └── _typography.scss │ ├── elements │ │ ├── _body.scss │ │ ├── _headings.scss │ │ ├── _img.scss │ │ └── _links.scss │ ├── generic │ │ ├── _box-sizing.scss │ │ └── _normalize.scss │ ├── index.scss │ ├── molecules │ │ ├── _card.scss │ │ ├── _cta-box.scss │ │ ├── _dropdown.scss │ │ ├── _quote.scss │ │ └── _video-thumbnail.scss │ ├── objects │ │ ├── _container.scss │ │ └── _ui-list.scss │ ├── organisms │ │ ├── _business-callout.scss │ │ ├── _courses.scss │ │ ├── _cta.scss │ │ ├── _footer.scss │ │ ├── _header.scss │ │ ├── _hero.scss │ │ ├── _partners.scss │ │ ├── _subscribe.scss │ │ └── _testimonials.scss │ ├── settings │ │ ├── _colors.scss │ │ ├── _layout.scss │ │ ├── _typography.scss │ │ ├── _variables.scss │ │ └── _z-index.scss │ ├── tools │ │ ├── _justify.scss │ │ ├── _mixins.scss │ │ ├── _sidebar.scss │ │ └── _toRem.scss │ └── utilities │ │ └── _error.scss └── styleguide.html ├── 7-3-vue-app ├── .gitignore ├── README.md ├── babel.config.js ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ ├── img │ │ ├── bg │ │ │ ├── cursos-codelytv-pro.png │ │ │ ├── kayak.jpg │ │ │ └── plant.jpg │ │ ├── cursos │ │ │ ├── arquitectura │ │ │ │ └── refactoring-bloater-code-smells.jpg │ │ │ ├── bash.jpg │ │ │ ├── buenas-practicas-bdd-cucumber-behat.jpg │ │ │ ├── comunicacion-microservicios.jpg │ │ │ ├── cqrs-event-sourcing-kotlin-axon-framework.jpg │ │ │ ├── curso-agile-retrospectivas.jpg │ │ │ ├── curso-api-http-scala.jpg │ │ │ ├── curso-app-mean-webpack.jpg │ │ │ ├── curso-app-vuejs-jest.jpg │ │ │ ├── curso-arquitectura-hexagonal.jpg │ │ │ ├── curso-aws-ec2.jpg │ │ │ ├── curso-aws-escalando-apps.jpg │ │ │ ├── curso-cqrs.jpg │ │ │ ├── curso-introduccion-scala.jpg │ │ │ ├── curso-screenshot-testing-android.jpg │ │ │ ├── curso-screenshot-testing-ios.jpg │ │ │ ├── curso-ui-testing-android.jpg │ │ │ ├── curso-ui-testing-ios.jpg │ │ │ ├── ddd-en-php.jpg │ │ │ ├── ddd-java.jpg │ │ │ ├── docker-desde-0.jpg │ │ │ ├── domain-driven-design.jpg │ │ │ ├── dotfiles.jpg │ │ │ ├── elastic-stack.jpg │ │ │ ├── git-introduccion-trabajo-en-equipo.jpg │ │ │ ├── github-actions-automatizacion.jpg │ │ │ ├── github-actions-integracion-continua.jpg │ │ │ ├── go-primera-app.jpg │ │ │ ├── grafana-prometheus.jpg │ │ │ ├── intellij.jpg │ │ │ ├── iterm-productividad.jpg │ │ │ ├── kubernetes-para-desarrolladores.jpg │ │ │ ├── layouts-css.jpg │ │ │ ├── makefiles.jpg │ │ │ ├── migracion-vuejs.jpg │ │ │ ├── notion.jpg │ │ │ ├── novedades-vue-3.jpg │ │ │ ├── programacion-funcional-refactor-typeclasses.jpg │ │ │ ├── prometheus.jpg │ │ │ ├── reactjs-de-0-a-deploy.jpg │ │ │ ├── solid.jpg │ │ │ ├── terminal-zsh.jpg │ │ │ ├── testing-introduccion-buenas-practicas.jpg │ │ │ ├── testing-vuex.jpg │ │ │ └── vistas-android.jpg │ │ ├── icons │ │ │ ├── facebook.svg │ │ │ ├── github.svg │ │ │ ├── instagram.svg │ │ │ ├── linkedin.svg │ │ │ ├── twitter.svg │ │ │ └── youtube.svg │ │ └── testimonios │ │ │ ├── antonio-manuel-rubio.jpg │ │ │ ├── dani-madurell.jpeg │ │ │ ├── edu-salguero.jpeg │ │ │ ├── fernando-ripoll.jpg │ │ │ ├── joan-miralles.jpg │ │ │ ├── luis-rodriguez.jpg │ │ │ ├── marc-monguio.jpg │ │ │ ├── miguel-angel-sanchez.jpg │ │ │ └── sergio-de-candelario.jpg │ └── index.html ├── src │ ├── App.vue │ ├── assets │ │ ├── logo.png │ │ └── styles │ │ │ ├── elements │ │ │ ├── _body.scss │ │ │ ├── _headings.scss │ │ │ ├── _img.scss │ │ │ └── _links.scss │ │ │ ├── generic │ │ │ ├── _box-sizing.scss │ │ │ └── _normalize.scss │ │ │ ├── index.scss │ │ │ ├── settings │ │ │ ├── _colors.scss │ │ │ ├── _layout.scss │ │ │ ├── _typography.scss │ │ │ ├── _variables.scss │ │ │ └── _z-index.scss │ │ │ ├── tools │ │ │ ├── _justify.scss │ │ │ ├── _mixins.scss │ │ │ ├── _sidebar.scss │ │ │ └── _toRem.scss │ │ │ └── utilities │ │ │ └── _error.scss │ ├── components │ │ ├── common │ │ │ ├── BusinessCallout.vue │ │ │ ├── Footer.vue │ │ │ ├── Header.vue │ │ │ ├── Partners.vue │ │ │ └── Testimonials.vue │ │ ├── courses │ │ │ ├── Collection.vue │ │ │ └── Hero.vue │ │ ├── subscription │ │ │ ├── Cta.vue │ │ │ └── Subscribe.vue │ │ └── ui │ │ │ ├── atoms │ │ │ ├── Box.vue │ │ │ ├── Button.vue │ │ │ ├── CoverBackground.vue │ │ │ ├── Lead.vue │ │ │ ├── Pill.vue │ │ │ └── Title.vue │ │ │ ├── molecules │ │ │ ├── Card.vue │ │ │ ├── CtaBox.vue │ │ │ ├── Dropdown.vue │ │ │ ├── Quote.vue │ │ │ └── VideoThumbnail.vue │ │ │ └── objects │ │ │ ├── Container.vue │ │ │ └── UiList.vue │ ├── main.js │ ├── router │ │ └── index.js │ ├── services │ │ ├── api.js │ │ └── courses.json │ └── views │ │ └── Courses.vue └── stylelint.config.js ├── 8-1-tailwind ├── .gitignore ├── README.md ├── babel.config.js ├── package-lock.json ├── package.json ├── postcss.config.js ├── public │ ├── favicon.ico │ ├── img │ │ ├── bg │ │ │ ├── cursos-codelytv-pro.png │ │ │ ├── kayak.jpg │ │ │ └── plant.jpg │ │ ├── cursos │ │ │ ├── arquitectura │ │ │ │ └── refactoring-bloater-code-smells.jpg │ │ │ ├── bash.jpg │ │ │ ├── buenas-practicas-bdd-cucumber-behat.jpg │ │ │ ├── comunicacion-microservicios.jpg │ │ │ ├── cqrs-event-sourcing-kotlin-axon-framework.jpg │ │ │ ├── curso-agile-retrospectivas.jpg │ │ │ ├── curso-api-http-scala.jpg │ │ │ ├── curso-app-mean-webpack.jpg │ │ │ ├── curso-app-vuejs-jest.jpg │ │ │ ├── curso-arquitectura-hexagonal.jpg │ │ │ ├── curso-aws-ec2.jpg │ │ │ ├── curso-aws-escalando-apps.jpg │ │ │ ├── curso-cqrs.jpg │ │ │ ├── curso-introduccion-scala.jpg │ │ │ ├── curso-screenshot-testing-android.jpg │ │ │ ├── curso-screenshot-testing-ios.jpg │ │ │ ├── curso-ui-testing-android.jpg │ │ │ ├── curso-ui-testing-ios.jpg │ │ │ ├── ddd-en-php.jpg │ │ │ ├── ddd-java.jpg │ │ │ ├── docker-desde-0.jpg │ │ │ ├── domain-driven-design.jpg │ │ │ ├── dotfiles.jpg │ │ │ ├── elastic-stack.jpg │ │ │ ├── git-introduccion-trabajo-en-equipo.jpg │ │ │ ├── github-actions-automatizacion.jpg │ │ │ ├── github-actions-integracion-continua.jpg │ │ │ ├── go-primera-app.jpg │ │ │ ├── grafana-prometheus.jpg │ │ │ ├── intellij.jpg │ │ │ ├── iterm-productividad.jpg │ │ │ ├── kubernetes-para-desarrolladores.jpg │ │ │ ├── layouts-css.jpg │ │ │ ├── makefiles.jpg │ │ │ ├── migracion-vuejs.jpg │ │ │ ├── notion.jpg │ │ │ ├── novedades-vue-3.jpg │ │ │ ├── programacion-funcional-refactor-typeclasses.jpg │ │ │ ├── prometheus.jpg │ │ │ ├── reactjs-de-0-a-deploy.jpg │ │ │ ├── solid.jpg │ │ │ ├── terminal-zsh.jpg │ │ │ ├── testing-introduccion-buenas-practicas.jpg │ │ │ ├── testing-vuex.jpg │ │ │ └── vistas-android.jpg │ │ ├── icons │ │ │ ├── facebook.svg │ │ │ ├── github.svg │ │ │ ├── instagram.svg │ │ │ ├── linkedin.svg │ │ │ ├── twitter.svg │ │ │ └── youtube.svg │ │ └── testimonios │ │ │ ├── antonio-manuel-rubio.jpg │ │ │ ├── dani-madurell.jpeg │ │ │ ├── edu-salguero.jpeg │ │ │ ├── fernando-ripoll.jpg │ │ │ ├── joan-miralles.jpg │ │ │ ├── luis-rodriguez.jpg │ │ │ ├── marc-monguio.jpg │ │ │ ├── miguel-angel-sanchez.jpg │ │ │ └── sergio-de-candelario.jpg │ └── index.html ├── src │ ├── App.vue │ ├── assets │ │ ├── index.css │ │ └── logo.png │ ├── components │ │ ├── common │ │ │ ├── BusinessCallout.vue │ │ │ ├── Footer.vue │ │ │ ├── Header.vue │ │ │ ├── Partners.vue │ │ │ └── Testimonials.vue │ │ ├── courses │ │ │ ├── Collection.vue │ │ │ └── Hero.vue │ │ ├── subscription │ │ │ ├── Cta.vue │ │ │ └── Subscribe.vue │ │ └── ui │ │ │ ├── atoms │ │ │ ├── Box.vue │ │ │ ├── Button.vue │ │ │ ├── CoverBackground.vue │ │ │ ├── Lead.vue │ │ │ ├── Pill.vue │ │ │ └── Title.vue │ │ │ ├── molecules │ │ │ ├── Card.vue │ │ │ ├── CtaBox.vue │ │ │ ├── Dropdown.vue │ │ │ ├── Quote.vue │ │ │ └── VideoThumbnail.vue │ │ │ └── objects │ │ │ └── Container.vue │ ├── main.js │ ├── router │ │ └── index.js │ ├── services │ │ ├── api.js │ │ └── courses.json │ └── views │ │ └── Courses.vue ├── stylelint.config.js └── tailwind.config.js ├── 8-2-styled-components ├── .gitignore ├── README.md ├── package.json ├── public │ ├── favicon.ico │ ├── img │ │ ├── bg │ │ │ ├── cursos-codelytv-pro.png │ │ │ ├── kayak.jpg │ │ │ └── plant.jpg │ │ ├── cursos │ │ │ ├── arquitectura │ │ │ │ └── refactoring-bloater-code-smells.jpg │ │ │ ├── bash.jpg │ │ │ ├── buenas-practicas-bdd-cucumber-behat.jpg │ │ │ ├── comunicacion-microservicios.jpg │ │ │ ├── cqrs-event-sourcing-kotlin-axon-framework.jpg │ │ │ ├── curso-agile-retrospectivas.jpg │ │ │ ├── curso-api-http-scala.jpg │ │ │ ├── curso-app-mean-webpack.jpg │ │ │ ├── curso-app-vuejs-jest.jpg │ │ │ ├── curso-arquitectura-hexagonal.jpg │ │ │ ├── curso-aws-ec2.jpg │ │ │ ├── curso-aws-escalando-apps.jpg │ │ │ ├── curso-cqrs.jpg │ │ │ ├── curso-introduccion-scala.jpg │ │ │ ├── curso-screenshot-testing-android.jpg │ │ │ ├── curso-screenshot-testing-ios.jpg │ │ │ ├── curso-ui-testing-android.jpg │ │ │ ├── curso-ui-testing-ios.jpg │ │ │ ├── ddd-en-php.jpg │ │ │ ├── ddd-java.jpg │ │ │ ├── docker-desde-0.jpg │ │ │ ├── domain-driven-design.jpg │ │ │ ├── dotfiles.jpg │ │ │ ├── elastic-stack.jpg │ │ │ ├── git-introduccion-trabajo-en-equipo.jpg │ │ │ ├── github-actions-automatizacion.jpg │ │ │ ├── github-actions-integracion-continua.jpg │ │ │ ├── go-primera-app.jpg │ │ │ ├── grafana-prometheus.jpg │ │ │ ├── intellij.jpg │ │ │ ├── iterm-productividad.jpg │ │ │ ├── kubernetes-para-desarrolladores.jpg │ │ │ ├── layouts-css.jpg │ │ │ ├── makefiles.jpg │ │ │ ├── migracion-vuejs.jpg │ │ │ ├── notion.jpg │ │ │ ├── novedades-vue-3.jpg │ │ │ ├── programacion-funcional-refactor-typeclasses.jpg │ │ │ ├── prometheus.jpg │ │ │ ├── reactjs-de-0-a-deploy.jpg │ │ │ ├── solid.jpg │ │ │ ├── terminal-zsh.jpg │ │ │ ├── testing-introduccion-buenas-practicas.jpg │ │ │ ├── testing-vuex.jpg │ │ │ └── vistas-android.jpg │ │ ├── icons │ │ │ ├── facebook.svg │ │ │ ├── github.svg │ │ │ ├── instagram.svg │ │ │ ├── linkedin.svg │ │ │ ├── twitter.svg │ │ │ └── youtube.svg │ │ └── testimonios │ │ │ ├── antonio-manuel-rubio.jpg │ │ │ ├── dani-madurell.jpeg │ │ │ ├── edu-salguero.jpeg │ │ │ ├── fernando-ripoll.jpg │ │ │ ├── joan-miralles.jpg │ │ │ ├── luis-rodriguez.jpg │ │ │ ├── marc-monguio.jpg │ │ │ ├── miguel-angel-sanchez.jpg │ │ │ └── sergio-de-candelario.jpg │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt ├── src │ ├── App.js │ ├── App.test.js │ ├── components │ │ ├── common │ │ │ ├── BusinessCallout.js │ │ │ ├── Footer.js │ │ │ ├── Header.js │ │ │ ├── Partners.js │ │ │ └── Testimonials.js │ │ ├── courses │ │ │ ├── Collection.js │ │ │ └── Hero.js │ │ ├── subscription │ │ │ ├── Cta.js │ │ │ └── Subscribe.js │ │ └── ui │ │ │ ├── atoms │ │ │ ├── Box.js │ │ │ ├── Button.js │ │ │ ├── CoverBackground.js │ │ │ ├── Lead.js │ │ │ ├── Pill.js │ │ │ └── Title.js │ │ │ ├── molecules │ │ │ ├── Card.js │ │ │ ├── CtaBox.js │ │ │ ├── Dropdown.js │ │ │ ├── Quote.js │ │ │ └── VideoThumbnail.js │ │ │ ├── objects │ │ │ ├── Container.js │ │ │ ├── Justify.js │ │ │ ├── Sidebar.js │ │ │ └── UiList.js │ │ │ └── utils │ │ │ └── includeSidebar.js │ ├── index.css │ ├── index.js │ ├── reportWebVitals.js │ ├── services │ │ ├── api.js │ │ └── courses.json │ ├── setupTests.js │ └── styles │ │ ├── elements │ │ ├── _body.scss │ │ ├── _headings.scss │ │ ├── _img.scss │ │ └── _links.scss │ │ ├── generic │ │ ├── _box-sizing.scss │ │ └── _normalize.scss │ │ ├── index.scss │ │ ├── settings │ │ ├── _colors.scss │ │ ├── _layout.scss │ │ ├── _typography.scss │ │ ├── _variables.scss │ │ └── _z-index.scss │ │ └── utilities │ │ └── _error.scss └── yarn.lock └── README.md /5-1-settings-and-tools/.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": ["stylelint-scss"], 3 | "extends": ["stylelint-config-standard", "stylelint-config-idiomatic-order"], 4 | "rules": { 5 | "at-rule-no-unknown": null, 6 | "scss/at-rule-no-unknown": true 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /5-1-settings-and-tools/README.md: -------------------------------------------------------------------------------- 1 | # Settings and Tools 2 | 3 | ## To run this project 4 | 5 | ```bash 6 | npm install 7 | 8 | # To watch scss files 9 | npm run watch 10 | 11 | # To compile scss files 12 | npm run build 13 | ``` 14 | -------------------------------------------------------------------------------- /5-1-settings-and-tools/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "css-architecture-course", 3 | "version": "1.0.0", 4 | "description": "", 5 | "scripts": { 6 | "build": "sass scss:css", 7 | "watch": "sass scss:css --watch" 8 | }, 9 | "devDependencies": { 10 | "sass": "^1.29.0", 11 | "stylelint": "^13.8.0", 12 | "stylelint-config-idiomatic-order": "^8.1.0", 13 | "stylelint-config-standard": "^20.0.0", 14 | "stylelint-scss": "^3.18.0" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /5-1-settings-and-tools/scss/index.scss: -------------------------------------------------------------------------------- 1 | // Settings 2 | @import "settings/colors"; 3 | @import "settings/layout"; 4 | @import "settings/typography"; 5 | @import "settings/z-index"; 6 | 7 | // Tools 8 | @import "tools/justify"; 9 | @import "tools/sidebar"; 10 | -------------------------------------------------------------------------------- /5-1-settings-and-tools/scss/settings/_layout.scss: -------------------------------------------------------------------------------- 1 | $max-width: 71.25rem; 2 | 3 | // Spacing 4 | $spacing-s: 1rem; 5 | $spacing: 1.6rem; 6 | $spacing-l: 3.25rem; 7 | -------------------------------------------------------------------------------- /5-1-settings-and-tools/scss/settings/_typography.scss: -------------------------------------------------------------------------------- 1 | $font-family: "Open Sans", sans-serif; 2 | 3 | // Typography scale 4 | $fs-base: 16; 5 | 6 | $_fs-9: 9 / $fs-base + rem; 7 | $_fs-12: 12 / $fs-base + rem; 8 | $_fs-14: 14 / $fs-base + rem; 9 | $_fs-19: 19 / $fs-base + rem; 10 | $_fs-25: 25 / $fs-base + rem; 11 | $_fs-33: 33 / $fs-base + rem; 12 | $_fs-44: 44 / $fs-base + rem; 13 | 14 | // Typography applications 15 | $fs-pill: $_fs-9; 16 | $fs-btn: $_fs-12; 17 | $fs-footer: $_fs-12; 18 | $fs-menu: $_fs-14; 19 | $fs-body: $_fs-14; 20 | $fs-lead: $_fs-19; 21 | $fs-title-s: $_fs-25; 22 | $fs-title-m: $_fs-33; 23 | $fs-title-l: $_fs-44; 24 | -------------------------------------------------------------------------------- /5-1-settings-and-tools/scss/settings/_z-index.scss: -------------------------------------------------------------------------------- 1 | $_z1: 1; 2 | $_z2: 2; 3 | $_z3: 3; 4 | $_z4: 4; 5 | $_z5: 5; 6 | $_z6: 6; 7 | $_z7: 7; 8 | $_z8: 8; 9 | $_z9: 9; 10 | $_z10: 10; 11 | 12 | $z-menu: $_z9; 13 | -------------------------------------------------------------------------------- /5-1-settings-and-tools/scss/tools/_justify.scss: -------------------------------------------------------------------------------- 1 | @mixin justify($vertical-align: center) { 2 | display: flex; 3 | flex-wrap: wrap; 4 | align-items: $vertical-align; 5 | justify-content: space-between; 6 | } 7 | -------------------------------------------------------------------------------- /5-1-settings-and-tools/scss/tools/_mixins.scss: -------------------------------------------------------------------------------- 1 | @forward "./justify"; 2 | @forward "./sidebar"; 3 | -------------------------------------------------------------------------------- /5-1-settings-and-tools/scss/tools/_sidebar.scss: -------------------------------------------------------------------------------- 1 | @mixin sidebar( 2 | $sidebar-position: "last-child", 3 | $side-width: auto, 4 | $min-width: 50%, 5 | $gap: 1rem 6 | ) { 7 | display: flex; 8 | flex-wrap: wrap; 9 | gap: $gap; 10 | 11 | > * { 12 | flex-basis: $side-width; 13 | flex-grow: 1; 14 | } 15 | 16 | > :#{$sidebar-position} { 17 | min-width: $min-width; 18 | flex-basis: 0; 19 | flex-grow: 999; 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /5-1-settings-and-tools/scss/tools/_toRem.scss: -------------------------------------------------------------------------------- 1 | @function toRem($size) { 2 | $remSize: $size / $fs-base; 3 | 4 | @return $remSize * 1rem; 5 | } 6 | -------------------------------------------------------------------------------- /5-2-generic/.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": ["stylelint-scss"], 3 | "extends": ["stylelint-config-standard", "stylelint-config-idiomatic-order"], 4 | "rules": { 5 | "at-rule-no-unknown": null, 6 | "scss/at-rule-no-unknown": true 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /5-2-generic/README.md: -------------------------------------------------------------------------------- 1 | # Generic styles and Elements 2 | 3 | ## To run this project 4 | 5 | ```bash 6 | npm install 7 | 8 | # To watch scss files 9 | npm run watch 10 | 11 | # To compile scss files 12 | npm run build 13 | ``` 14 | -------------------------------------------------------------------------------- /5-2-generic/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "css-architecture-course", 3 | "version": "1.0.0", 4 | "description": "", 5 | "scripts": { 6 | "build": "sass scss:css", 7 | "watch": "sass scss:css --watch" 8 | }, 9 | "devDependencies": { 10 | "sass": "^1.29.0", 11 | "stylelint": "^13.8.0", 12 | "stylelint-config-idiomatic-order": "^8.1.0", 13 | "stylelint-config-standard": "^20.0.0", 14 | "stylelint-scss": "^3.18.0" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /5-2-generic/scss/generic/_box-sizing.scss: -------------------------------------------------------------------------------- 1 | *, 2 | *::before, 3 | *::after { 4 | box-sizing: border-box; 5 | } 6 | -------------------------------------------------------------------------------- /5-2-generic/scss/index.scss: -------------------------------------------------------------------------------- 1 | // Settings 2 | @import "settings/colors"; 3 | @import "settings/layout"; 4 | @import "settings/typography"; 5 | @import "settings/z-index"; 6 | 7 | // Tools 8 | @import "tools/justify"; 9 | 10 | // Generic 11 | @import "generic/normalize"; 12 | @import "generic/box-sizing"; 13 | -------------------------------------------------------------------------------- /5-2-generic/scss/settings/_colors.scss: -------------------------------------------------------------------------------- 1 | $_eucalyptus: #289f5f; 2 | $_green-pea: #19623b; 3 | $_baltic-sea: #282729; 4 | $_cod-gray: #181818; 5 | $_dove-gray: #666; 6 | $_boulder: #777; 7 | $_white: #fff; 8 | $_alabaster: #fafafa; 9 | $_gallery: #ececec; 10 | 11 | $primary-color: $_eucalyptus; 12 | $primary-dark-color: $_green-pea; 13 | 14 | $background-dark-color: $_baltic-sea; 15 | $background-darker-color: $_cod-gray; 16 | $background-light-color: $_alabaster; 17 | $background-lighter-color: $_white; 18 | 19 | $text-color: $_cod-gray; 20 | $text-muted-color: $_dove-gray; 21 | $text-inverted-color: $_white; 22 | 23 | $border-color: $_dove-gray; 24 | $border-inverted-color: $_gallery; 25 | -------------------------------------------------------------------------------- /5-2-generic/scss/settings/_layout.scss: -------------------------------------------------------------------------------- 1 | $max-width: 71.25rem; 2 | 3 | // Spacing 4 | $spacing-s: 1rem; 5 | $spacing: 1.6rem; 6 | $spacing-l: 3.25rem; 7 | -------------------------------------------------------------------------------- /5-2-generic/scss/settings/_typography.scss: -------------------------------------------------------------------------------- 1 | $font-family: "Open Sans", sans-serif; 2 | 3 | // Typography scale 4 | $fs-base: 16; 5 | 6 | $_fs-9: 9 / $fs-base + rem; 7 | $_fs-12: 12 / $fs-base + rem; 8 | $_fs-14: 14 / $fs-base + rem; 9 | $_fs-19: 19 / $fs-base + rem; 10 | $_fs-25: 25 / $fs-base + rem; 11 | $_fs-33: 33 / $fs-base + rem; 12 | $_fs-44: 44 / $fs-base + rem; 13 | 14 | // Typography applications 15 | $fs-pill: $_fs-9; 16 | $fs-btn: $_fs-12; 17 | $fs-footer: $_fs-12; 18 | $fs-menu: $_fs-14; 19 | $fs-body: $_fs-14; 20 | $fs-lead: $_fs-19; 21 | $fs-title-s: $_fs-25; 22 | $fs-title-m: $_fs-33; 23 | $fs-title-l: $_fs-44; 24 | -------------------------------------------------------------------------------- /5-2-generic/scss/settings/_z-index.scss: -------------------------------------------------------------------------------- 1 | $_z1: 1; 2 | $_z2: 2; 3 | $_z3: 3; 4 | $_z4: 4; 5 | $_z5: 5; 6 | $_z6: 6; 7 | $_z7: 7; 8 | $_z8: 8; 9 | $_z9: 9; 10 | $_z10: 10; 11 | 12 | $z-menu: $_z9; 13 | -------------------------------------------------------------------------------- /5-2-generic/scss/tools/_justify.scss: -------------------------------------------------------------------------------- 1 | @mixin justify($vertical-align: center) { 2 | display: flex; 3 | flex-wrap: wrap; 4 | align-items: $vertical-align; 5 | justify-content: space-between; 6 | } 7 | -------------------------------------------------------------------------------- /5-3-elements/.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": ["stylelint-scss"], 3 | "extends": ["stylelint-config-standard", "stylelint-config-idiomatic-order"], 4 | "rules": { 5 | "at-rule-no-unknown": null, 6 | "scss/at-rule-no-unknown": true 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /5-3-elements/README.md: -------------------------------------------------------------------------------- 1 | # Generic styles and Elements 2 | 3 | ## To run this project 4 | 5 | ```bash 6 | npm install 7 | 8 | # To watch scss files 9 | npm run watch 10 | 11 | # To compile scss files 12 | npm run build 13 | ``` 14 | -------------------------------------------------------------------------------- /5-3-elements/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "css-architecture-course", 3 | "version": "1.0.0", 4 | "description": "", 5 | "scripts": { 6 | "build": "sass scss:css", 7 | "watch": "sass scss:css --watch" 8 | }, 9 | "devDependencies": { 10 | "sass": "^1.29.0", 11 | "stylelint": "^13.8.0", 12 | "stylelint-config-idiomatic-order": "^8.1.0", 13 | "stylelint-config-standard": "^20.0.0", 14 | "stylelint-scss": "^3.18.0" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /5-3-elements/scss/elements/_body.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | 3 | body { 4 | color: variables.$text-color; 5 | font-family: variables.$font-family; 6 | font-size: variables.$fs-body; 7 | line-height: 1.8; 8 | } 9 | -------------------------------------------------------------------------------- /5-3-elements/scss/elements/_headings.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | 3 | h1, 4 | h2, 5 | h3 { 6 | font-weight: 300; 7 | line-height: 1.13; 8 | } 9 | 10 | h1 { 11 | font-size: variables.$fs-title-l; 12 | } 13 | 14 | h2 { 15 | font-size: variables.$fs-title-m; 16 | } 17 | 18 | h3 { 19 | font-size: variables.$fs-title-s; 20 | } 21 | -------------------------------------------------------------------------------- /5-3-elements/scss/elements/_img.scss: -------------------------------------------------------------------------------- 1 | img { 2 | max-width: 100%; 3 | } 4 | -------------------------------------------------------------------------------- /5-3-elements/scss/elements/_links.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | 3 | a { 4 | color: variables.$primary-color; 5 | text-decoration: underline; 6 | 7 | &:hover, 8 | &:focus { 9 | color: variables.$primary-dark-color; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /5-3-elements/scss/generic/_box-sizing.scss: -------------------------------------------------------------------------------- 1 | *, 2 | *::before, 3 | *::after { 4 | box-sizing: border-box; 5 | } 6 | -------------------------------------------------------------------------------- /5-3-elements/scss/index.scss: -------------------------------------------------------------------------------- 1 | // Generic 2 | @use "generic/normalize"; 3 | @use "generic/box-sizing"; 4 | 5 | // Elements 6 | @use "elements/body"; 7 | @use "elements/headings"; 8 | @use "elements/img"; 9 | @use "elements/links"; 10 | -------------------------------------------------------------------------------- /5-3-elements/scss/settings/_colors.scss: -------------------------------------------------------------------------------- 1 | $_eucalyptus: #289f5f; 2 | $_green-pea: #19623b; 3 | $_baltic-sea: #282729; 4 | $_cod-gray: #181818; 5 | $_dove-gray: #666; 6 | $_boulder: #777; 7 | $_white: #fff; 8 | $_alabaster: #fafafa; 9 | $_gallery: #ececec; 10 | 11 | $primary-color: $_eucalyptus; 12 | $primary-dark-color: $_green-pea; 13 | 14 | $background-dark-color: $_baltic-sea; 15 | $background-darker-color: $_cod-gray; 16 | $background-light-color: $_alabaster; 17 | $background-lighter-color: $_white; 18 | 19 | $text-color: $_cod-gray; 20 | $text-muted-color: $_dove-gray; 21 | $text-inverted-color: $_white; 22 | 23 | $border-color: $_dove-gray; 24 | $border-inverted-color: $_gallery; 25 | -------------------------------------------------------------------------------- /5-3-elements/scss/settings/_layout.scss: -------------------------------------------------------------------------------- 1 | $max-width: 71.25rem; 2 | 3 | // Spacing 4 | $spacing-s: 1rem; 5 | $spacing: 1.6rem; 6 | $spacing-l: 3.25rem; 7 | -------------------------------------------------------------------------------- /5-3-elements/scss/settings/_typography.scss: -------------------------------------------------------------------------------- 1 | $font-family: "Open Sans", sans-serif; 2 | 3 | // Typography scale 4 | $fs-base: 16; 5 | 6 | $_fs-9: 9 / $fs-base + rem; 7 | $_fs-12: 12 / $fs-base + rem; 8 | $_fs-14: 14 / $fs-base + rem; 9 | $_fs-19: 19 / $fs-base + rem; 10 | $_fs-25: 25 / $fs-base + rem; 11 | $_fs-33: 33 / $fs-base + rem; 12 | $_fs-44: 44 / $fs-base + rem; 13 | 14 | // Typography applications 15 | $fs-pill: $_fs-9; 16 | $fs-btn: $_fs-12; 17 | $fs-footer: $_fs-12; 18 | $fs-menu: $_fs-14; 19 | $fs-body: $_fs-14; 20 | $fs-lead: $_fs-19; 21 | $fs-title-s: $_fs-25; 22 | $fs-title-m: $_fs-33; 23 | $fs-title-l: $_fs-44; 24 | -------------------------------------------------------------------------------- /5-3-elements/scss/settings/_variables.scss: -------------------------------------------------------------------------------- 1 | @forward "./colors"; 2 | @forward "./layout"; 3 | @forward "./typography"; 4 | @forward "./z-index"; 5 | -------------------------------------------------------------------------------- /5-3-elements/scss/settings/_z-index.scss: -------------------------------------------------------------------------------- 1 | $_z1: 1; 2 | $_z2: 2; 3 | $_z3: 3; 4 | $_z4: 4; 5 | $_z5: 5; 6 | $_z6: 6; 7 | $_z7: 7; 8 | $_z8: 8; 9 | $_z9: 9; 10 | $_z10: 10; 11 | 12 | $z-menu: $_z9; 13 | -------------------------------------------------------------------------------- /5-3-elements/scss/tools/_justify.scss: -------------------------------------------------------------------------------- 1 | @mixin justify($vertical-align: center) { 2 | display: flex; 3 | flex-wrap: wrap; 4 | align-items: $vertical-align; 5 | justify-content: space-between; 6 | } 7 | -------------------------------------------------------------------------------- /5-3-elements/scss/tools/_mixins.scss: -------------------------------------------------------------------------------- 1 | @forward "./justify"; 2 | @forward "./sidebar"; 3 | -------------------------------------------------------------------------------- /5-3-elements/scss/tools/_sidebar.scss: -------------------------------------------------------------------------------- 1 | @mixin sidebar( 2 | $sidebar-position: "last-child", 3 | $side-width: auto, 4 | $min-width: 50%, 5 | $gap: 1rem 6 | ) { 7 | display: flex; 8 | flex-wrap: wrap; 9 | gap: $gap; 10 | 11 | > * { 12 | flex-basis: $side-width; 13 | flex-grow: 1; 14 | } 15 | 16 | > :#{$sidebar-position} { 17 | min-width: $min-width; 18 | flex-basis: 0; 19 | flex-grow: 999; 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /5-3-elements/scss/tools/_toRem.scss: -------------------------------------------------------------------------------- 1 | @function toRem($size) { 2 | $remSize: $size / $fs-base; 3 | 4 | @return $remSize * 1rem; 5 | } 6 | -------------------------------------------------------------------------------- /6-1-objects-and-atoms/.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": ["stylelint-scss"], 3 | "extends": ["stylelint-config-standard", "stylelint-config-idiomatic-order"], 4 | "rules": { 5 | "at-rule-no-unknown": null, 6 | "scss/at-rule-no-unknown": true 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /6-1-objects-and-atoms/README.md: -------------------------------------------------------------------------------- 1 | # Objects and Atoms 2 | 3 | ## To run this project 4 | 5 | ```bash 6 | npm install 7 | 8 | # To watch scss files 9 | npm run watch 10 | 11 | # To compile scss files 12 | npm run build 13 | ``` 14 | -------------------------------------------------------------------------------- /6-1-objects-and-atoms/img/bg/cursos-codelytv-pro.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-1-objects-and-atoms/img/bg/cursos-codelytv-pro.png -------------------------------------------------------------------------------- /6-1-objects-and-atoms/img/bg/kayak.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-1-objects-and-atoms/img/bg/kayak.jpg -------------------------------------------------------------------------------- /6-1-objects-and-atoms/img/bg/plant.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-1-objects-and-atoms/img/bg/plant.jpg -------------------------------------------------------------------------------- /6-1-objects-and-atoms/img/cursos/arquitectura/refactoring-bloater-code-smells.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-1-objects-and-atoms/img/cursos/arquitectura/refactoring-bloater-code-smells.jpg -------------------------------------------------------------------------------- /6-1-objects-and-atoms/img/cursos/bash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-1-objects-and-atoms/img/cursos/bash.jpg -------------------------------------------------------------------------------- /6-1-objects-and-atoms/img/cursos/buenas-practicas-bdd-cucumber-behat.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-1-objects-and-atoms/img/cursos/buenas-practicas-bdd-cucumber-behat.jpg -------------------------------------------------------------------------------- /6-1-objects-and-atoms/img/cursos/comunicacion-microservicios.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-1-objects-and-atoms/img/cursos/comunicacion-microservicios.jpg -------------------------------------------------------------------------------- /6-1-objects-and-atoms/img/cursos/cqrs-event-sourcing-kotlin-axon-framework.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-1-objects-and-atoms/img/cursos/cqrs-event-sourcing-kotlin-axon-framework.jpg -------------------------------------------------------------------------------- /6-1-objects-and-atoms/img/cursos/curso-agile-retrospectivas.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-1-objects-and-atoms/img/cursos/curso-agile-retrospectivas.jpg -------------------------------------------------------------------------------- /6-1-objects-and-atoms/img/cursos/curso-api-http-scala.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-1-objects-and-atoms/img/cursos/curso-api-http-scala.jpg -------------------------------------------------------------------------------- /6-1-objects-and-atoms/img/cursos/curso-app-mean-webpack.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-1-objects-and-atoms/img/cursos/curso-app-mean-webpack.jpg -------------------------------------------------------------------------------- /6-1-objects-and-atoms/img/cursos/curso-app-vuejs-jest.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-1-objects-and-atoms/img/cursos/curso-app-vuejs-jest.jpg -------------------------------------------------------------------------------- /6-1-objects-and-atoms/img/cursos/curso-arquitectura-hexagonal.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-1-objects-and-atoms/img/cursos/curso-arquitectura-hexagonal.jpg -------------------------------------------------------------------------------- /6-1-objects-and-atoms/img/cursos/curso-aws-ec2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-1-objects-and-atoms/img/cursos/curso-aws-ec2.jpg -------------------------------------------------------------------------------- /6-1-objects-and-atoms/img/cursos/curso-aws-escalando-apps.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-1-objects-and-atoms/img/cursos/curso-aws-escalando-apps.jpg -------------------------------------------------------------------------------- /6-1-objects-and-atoms/img/cursos/curso-cqrs.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-1-objects-and-atoms/img/cursos/curso-cqrs.jpg -------------------------------------------------------------------------------- /6-1-objects-and-atoms/img/cursos/curso-introduccion-scala.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-1-objects-and-atoms/img/cursos/curso-introduccion-scala.jpg -------------------------------------------------------------------------------- /6-1-objects-and-atoms/img/cursos/curso-screenshot-testing-android.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-1-objects-and-atoms/img/cursos/curso-screenshot-testing-android.jpg -------------------------------------------------------------------------------- /6-1-objects-and-atoms/img/cursos/curso-screenshot-testing-ios.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-1-objects-and-atoms/img/cursos/curso-screenshot-testing-ios.jpg -------------------------------------------------------------------------------- /6-1-objects-and-atoms/img/cursos/curso-ui-testing-android.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-1-objects-and-atoms/img/cursos/curso-ui-testing-android.jpg -------------------------------------------------------------------------------- /6-1-objects-and-atoms/img/cursos/curso-ui-testing-ios.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-1-objects-and-atoms/img/cursos/curso-ui-testing-ios.jpg -------------------------------------------------------------------------------- /6-1-objects-and-atoms/img/cursos/ddd-en-php.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-1-objects-and-atoms/img/cursos/ddd-en-php.jpg -------------------------------------------------------------------------------- /6-1-objects-and-atoms/img/cursos/ddd-java.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-1-objects-and-atoms/img/cursos/ddd-java.jpg -------------------------------------------------------------------------------- /6-1-objects-and-atoms/img/cursos/docker-desde-0.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-1-objects-and-atoms/img/cursos/docker-desde-0.jpg -------------------------------------------------------------------------------- /6-1-objects-and-atoms/img/cursos/domain-driven-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-1-objects-and-atoms/img/cursos/domain-driven-design.jpg -------------------------------------------------------------------------------- /6-1-objects-and-atoms/img/cursos/dotfiles.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-1-objects-and-atoms/img/cursos/dotfiles.jpg -------------------------------------------------------------------------------- /6-1-objects-and-atoms/img/cursos/elastic-stack.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-1-objects-and-atoms/img/cursos/elastic-stack.jpg -------------------------------------------------------------------------------- /6-1-objects-and-atoms/img/cursos/git-introduccion-trabajo-en-equipo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-1-objects-and-atoms/img/cursos/git-introduccion-trabajo-en-equipo.jpg -------------------------------------------------------------------------------- /6-1-objects-and-atoms/img/cursos/github-actions-automatizacion.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-1-objects-and-atoms/img/cursos/github-actions-automatizacion.jpg -------------------------------------------------------------------------------- /6-1-objects-and-atoms/img/cursos/github-actions-integracion-continua.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-1-objects-and-atoms/img/cursos/github-actions-integracion-continua.jpg -------------------------------------------------------------------------------- /6-1-objects-and-atoms/img/cursos/go-primera-app.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-1-objects-and-atoms/img/cursos/go-primera-app.jpg -------------------------------------------------------------------------------- /6-1-objects-and-atoms/img/cursos/grafana-prometheus.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-1-objects-and-atoms/img/cursos/grafana-prometheus.jpg -------------------------------------------------------------------------------- /6-1-objects-and-atoms/img/cursos/intellij.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-1-objects-and-atoms/img/cursos/intellij.jpg -------------------------------------------------------------------------------- /6-1-objects-and-atoms/img/cursos/iterm-productividad.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-1-objects-and-atoms/img/cursos/iterm-productividad.jpg -------------------------------------------------------------------------------- /6-1-objects-and-atoms/img/cursos/kubernetes-para-desarrolladores.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-1-objects-and-atoms/img/cursos/kubernetes-para-desarrolladores.jpg -------------------------------------------------------------------------------- /6-1-objects-and-atoms/img/cursos/layouts-css.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-1-objects-and-atoms/img/cursos/layouts-css.jpg -------------------------------------------------------------------------------- /6-1-objects-and-atoms/img/cursos/makefiles.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-1-objects-and-atoms/img/cursos/makefiles.jpg -------------------------------------------------------------------------------- /6-1-objects-and-atoms/img/cursos/migracion-vuejs.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-1-objects-and-atoms/img/cursos/migracion-vuejs.jpg -------------------------------------------------------------------------------- /6-1-objects-and-atoms/img/cursos/notion.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-1-objects-and-atoms/img/cursos/notion.jpg -------------------------------------------------------------------------------- /6-1-objects-and-atoms/img/cursos/novedades-vue-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-1-objects-and-atoms/img/cursos/novedades-vue-3.jpg -------------------------------------------------------------------------------- /6-1-objects-and-atoms/img/cursos/programacion-funcional-refactor-typeclasses.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-1-objects-and-atoms/img/cursos/programacion-funcional-refactor-typeclasses.jpg -------------------------------------------------------------------------------- /6-1-objects-and-atoms/img/cursos/prometheus.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-1-objects-and-atoms/img/cursos/prometheus.jpg -------------------------------------------------------------------------------- /6-1-objects-and-atoms/img/cursos/reactjs-de-0-a-deploy.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-1-objects-and-atoms/img/cursos/reactjs-de-0-a-deploy.jpg -------------------------------------------------------------------------------- /6-1-objects-and-atoms/img/cursos/solid.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-1-objects-and-atoms/img/cursos/solid.jpg -------------------------------------------------------------------------------- /6-1-objects-and-atoms/img/cursos/terminal-zsh.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-1-objects-and-atoms/img/cursos/terminal-zsh.jpg -------------------------------------------------------------------------------- /6-1-objects-and-atoms/img/cursos/testing-introduccion-buenas-practicas.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-1-objects-and-atoms/img/cursos/testing-introduccion-buenas-practicas.jpg -------------------------------------------------------------------------------- /6-1-objects-and-atoms/img/cursos/testing-vuex.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-1-objects-and-atoms/img/cursos/testing-vuex.jpg -------------------------------------------------------------------------------- /6-1-objects-and-atoms/img/cursos/vistas-android.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-1-objects-and-atoms/img/cursos/vistas-android.jpg -------------------------------------------------------------------------------- /6-1-objects-and-atoms/img/icons/facebook.svg: -------------------------------------------------------------------------------- 1 | Facebook icon -------------------------------------------------------------------------------- /6-1-objects-and-atoms/img/icons/linkedin.svg: -------------------------------------------------------------------------------- 1 | LinkedIn icon -------------------------------------------------------------------------------- /6-1-objects-and-atoms/img/icons/twitter.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /6-1-objects-and-atoms/img/icons/youtube.svg: -------------------------------------------------------------------------------- 1 | YouTube icon -------------------------------------------------------------------------------- /6-1-objects-and-atoms/img/testimonios/antonio-manuel-rubio.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-1-objects-and-atoms/img/testimonios/antonio-manuel-rubio.jpg -------------------------------------------------------------------------------- /6-1-objects-and-atoms/img/testimonios/dani-madurell.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-1-objects-and-atoms/img/testimonios/dani-madurell.jpeg -------------------------------------------------------------------------------- /6-1-objects-and-atoms/img/testimonios/edu-salguero.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-1-objects-and-atoms/img/testimonios/edu-salguero.jpeg -------------------------------------------------------------------------------- /6-1-objects-and-atoms/img/testimonios/fernando-ripoll.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-1-objects-and-atoms/img/testimonios/fernando-ripoll.jpg -------------------------------------------------------------------------------- /6-1-objects-and-atoms/img/testimonios/joan-miralles.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-1-objects-and-atoms/img/testimonios/joan-miralles.jpg -------------------------------------------------------------------------------- /6-1-objects-and-atoms/img/testimonios/luis-rodriguez.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-1-objects-and-atoms/img/testimonios/luis-rodriguez.jpg -------------------------------------------------------------------------------- /6-1-objects-and-atoms/img/testimonios/marc-monguio.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-1-objects-and-atoms/img/testimonios/marc-monguio.jpg -------------------------------------------------------------------------------- /6-1-objects-and-atoms/img/testimonios/miguel-angel-sanchez.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-1-objects-and-atoms/img/testimonios/miguel-angel-sanchez.jpg -------------------------------------------------------------------------------- /6-1-objects-and-atoms/img/testimonios/sergio-de-candelario.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-1-objects-and-atoms/img/testimonios/sergio-de-candelario.jpg -------------------------------------------------------------------------------- /6-1-objects-and-atoms/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "css-architecture-course", 3 | "version": "1.0.0", 4 | "description": "", 5 | "scripts": { 6 | "build": "sass scss:css", 7 | "watch": "sass scss:css --watch" 8 | }, 9 | "devDependencies": { 10 | "sass": "^1.29.0", 11 | "stylelint": "^13.8.0", 12 | "stylelint-config-idiomatic-order": "^8.1.0", 13 | "stylelint-config-standard": "^20.0.0", 14 | "stylelint-scss": "^3.18.0" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /6-1-objects-and-atoms/scss/atoms/_box.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | 3 | .a-box { 4 | padding: 1.63rem; 5 | background: rgba(variables.$background-darker-color, 0.3); 6 | border-radius: 0.37rem; 7 | color: variables.$text-inverted-color; 8 | } 9 | -------------------------------------------------------------------------------- /6-1-objects-and-atoms/scss/atoms/_cover-background.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | 3 | .a-cover-background { 4 | background-attachment: fixed; 5 | background-color: variables.$background-dark-color; 6 | background-position: center; 7 | background-repeat: no-repeat; 8 | background-size: cover; 9 | color: variables.$text-inverted-color; 10 | 11 | &--plant { 12 | background-image: url("../../img/bg/plant.jpg"); 13 | } 14 | 15 | &--kayak { 16 | background-image: url("../../img/bg/kayak.jpg"); 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /6-1-objects-and-atoms/scss/atoms/_pill.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | 3 | .a-pill { 4 | display: inline-block; 5 | padding: 0.5rem 0.65rem; 6 | background: variables.$background-darker-color; 7 | border-radius: 50px; 8 | color: variables.$text-inverted-color; 9 | font-size: variables.$fs-pill; 10 | font-weight: 700; 11 | letter-spacing: 0.5px; 12 | text-align: center; 13 | text-transform: uppercase; 14 | } 15 | -------------------------------------------------------------------------------- /6-1-objects-and-atoms/scss/atoms/_typography.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | 3 | .a-lead { 4 | font-size: variables.$fs-lead; 5 | line-height: 1.65; 6 | } 7 | 8 | .a-title { 9 | font-size: variables.$fs-title-l; 10 | } 11 | -------------------------------------------------------------------------------- /6-1-objects-and-atoms/scss/elements/_body.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | 3 | body { 4 | color: variables.$text-color; 5 | font-family: variables.$font-family; 6 | font-size: variables.$fs-body; 7 | line-height: 1.8; 8 | } 9 | -------------------------------------------------------------------------------- /6-1-objects-and-atoms/scss/elements/_headings.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | 3 | h1, 4 | h2, 5 | h3 { 6 | font-weight: 300; 7 | line-height: 1.13; 8 | } 9 | 10 | h1 { 11 | font-size: variables.$fs-title-l; 12 | } 13 | 14 | h2 { 15 | font-size: variables.$fs-title-m; 16 | } 17 | 18 | h3 { 19 | font-size: variables.$fs-title-s; 20 | } 21 | -------------------------------------------------------------------------------- /6-1-objects-and-atoms/scss/elements/_img.scss: -------------------------------------------------------------------------------- 1 | img { 2 | max-width: 100%; 3 | } 4 | -------------------------------------------------------------------------------- /6-1-objects-and-atoms/scss/elements/_links.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | 3 | a { 4 | color: variables.$primary-color; 5 | text-decoration: underline; 6 | 7 | &:hover, 8 | &:focus { 9 | color: variables.$primary-dark-color; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /6-1-objects-and-atoms/scss/generic/_box-sizing.scss: -------------------------------------------------------------------------------- 1 | *, 2 | *::before, 3 | *::after { 4 | box-sizing: border-box; 5 | } 6 | -------------------------------------------------------------------------------- /6-1-objects-and-atoms/scss/index.scss: -------------------------------------------------------------------------------- 1 | // Generic 2 | @use "generic/normalize"; 3 | @use "generic/box-sizing"; 4 | 5 | // Elements 6 | @use "elements/body"; 7 | @use "elements/headings"; 8 | @use "elements/img"; 9 | @use "elements/links"; 10 | 11 | // Objects 12 | @use "objects/container"; 13 | @use "objects/ui-list"; 14 | 15 | // Atoms 16 | @use "atoms/box"; 17 | @use "atoms/btn"; 18 | @use "atoms/cover-background"; 19 | @use "atoms/pill"; 20 | @use "atoms/typography"; 21 | -------------------------------------------------------------------------------- /6-1-objects-and-atoms/scss/objects/_container.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | 3 | .o-container { 4 | max-width: variables.$max-width; 5 | padding: variables.$spacing variables.$spacing-s; 6 | margin: 0 auto; 7 | } 8 | -------------------------------------------------------------------------------- /6-1-objects-and-atoms/scss/objects/_ui-list.scss: -------------------------------------------------------------------------------- 1 | .o-ui-list { 2 | padding: 0; 3 | margin: 0; 4 | list-style: none; 5 | 6 | &--horizontal { 7 | display: flex; 8 | flex-wrap: wrap; 9 | align-items: center; 10 | gap: 1rem; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /6-1-objects-and-atoms/scss/settings/_layout.scss: -------------------------------------------------------------------------------- 1 | $max-width: 71.25rem; 2 | 3 | // Spacing 4 | $spacing-s: 1rem; 5 | $spacing: 1.6rem; 6 | $spacing-l: 3.25rem; 7 | -------------------------------------------------------------------------------- /6-1-objects-and-atoms/scss/settings/_typography.scss: -------------------------------------------------------------------------------- 1 | $font-family: "Open Sans", sans-serif; 2 | 3 | // Typography scale 4 | $fs-base: 16; 5 | 6 | $_fs-9: 9 / $fs-base + rem; 7 | $_fs-12: 12 / $fs-base + rem; 8 | $_fs-14: 14 / $fs-base + rem; 9 | $_fs-19: 19 / $fs-base + rem; 10 | $_fs-25: 25 / $fs-base + rem; 11 | $_fs-33: 33 / $fs-base + rem; 12 | $_fs-44: 44 / $fs-base + rem; 13 | 14 | // Typography applications 15 | $fs-pill: $_fs-9; 16 | $fs-btn: $_fs-12; 17 | $fs-footer: $_fs-12; 18 | $fs-menu: $_fs-14; 19 | $fs-body: $_fs-14; 20 | $fs-lead: $_fs-19; 21 | $fs-title-s: $_fs-25; 22 | $fs-title-m: $_fs-33; 23 | $fs-title-l: $_fs-44; 24 | -------------------------------------------------------------------------------- /6-1-objects-and-atoms/scss/settings/_variables.scss: -------------------------------------------------------------------------------- 1 | @forward "./colors"; 2 | @forward "./layout"; 3 | @forward "./typography"; 4 | @forward "./z-index"; 5 | -------------------------------------------------------------------------------- /6-1-objects-and-atoms/scss/settings/_z-index.scss: -------------------------------------------------------------------------------- 1 | $_z1: 1; 2 | $_z2: 2; 3 | $_z3: 3; 4 | $_z4: 4; 5 | $_z5: 5; 6 | $_z6: 6; 7 | $_z7: 7; 8 | $_z8: 8; 9 | $_z9: 9; 10 | $_z10: 10; 11 | 12 | $z-menu: $_z9; 13 | -------------------------------------------------------------------------------- /6-1-objects-and-atoms/scss/tools/_justify.scss: -------------------------------------------------------------------------------- 1 | @mixin justify($vertical-align: center) { 2 | display: flex; 3 | flex-wrap: wrap; 4 | align-items: $vertical-align; 5 | justify-content: space-between; 6 | } 7 | -------------------------------------------------------------------------------- /6-1-objects-and-atoms/scss/tools/_mixins.scss: -------------------------------------------------------------------------------- 1 | @forward "./justify"; 2 | @forward "./sidebar"; 3 | -------------------------------------------------------------------------------- /6-1-objects-and-atoms/scss/tools/_sidebar.scss: -------------------------------------------------------------------------------- 1 | @mixin sidebar( 2 | $sidebar-position: "last-child", 3 | $side-width: auto, 4 | $min-width: 50%, 5 | $gap: 1rem 6 | ) { 7 | display: flex; 8 | flex-wrap: wrap; 9 | gap: $gap; 10 | 11 | > * { 12 | flex-basis: $side-width; 13 | flex-grow: 1; 14 | } 15 | 16 | > :#{$sidebar-position} { 17 | min-width: $min-width; 18 | flex-basis: 0; 19 | flex-grow: 999; 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /6-1-objects-and-atoms/scss/tools/_toRem.scss: -------------------------------------------------------------------------------- 1 | @function toRem($size) { 2 | $remSize: $size / $fs-base; 3 | 4 | @return $remSize * 1rem; 5 | } 6 | -------------------------------------------------------------------------------- /6-2-molecules/.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": ["stylelint-scss"], 3 | "extends": ["stylelint-config-standard", "stylelint-config-idiomatic-order"], 4 | "rules": { 5 | "at-rule-no-unknown": null, 6 | "scss/at-rule-no-unknown": true 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /6-2-molecules/README.md: -------------------------------------------------------------------------------- 1 | # Molecules 2 | 3 | ## To run this project 4 | 5 | ```bash 6 | npm install 7 | 8 | # To watch scss files 9 | npm run watch 10 | 11 | # To compile scss files 12 | npm run build 13 | ``` 14 | -------------------------------------------------------------------------------- /6-2-molecules/img/bg/cursos-codelytv-pro.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-2-molecules/img/bg/cursos-codelytv-pro.png -------------------------------------------------------------------------------- /6-2-molecules/img/bg/kayak.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-2-molecules/img/bg/kayak.jpg -------------------------------------------------------------------------------- /6-2-molecules/img/bg/plant.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-2-molecules/img/bg/plant.jpg -------------------------------------------------------------------------------- /6-2-molecules/img/cursos/arquitectura/refactoring-bloater-code-smells.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-2-molecules/img/cursos/arquitectura/refactoring-bloater-code-smells.jpg -------------------------------------------------------------------------------- /6-2-molecules/img/cursos/bash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-2-molecules/img/cursos/bash.jpg -------------------------------------------------------------------------------- /6-2-molecules/img/cursos/buenas-practicas-bdd-cucumber-behat.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-2-molecules/img/cursos/buenas-practicas-bdd-cucumber-behat.jpg -------------------------------------------------------------------------------- /6-2-molecules/img/cursos/comunicacion-microservicios.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-2-molecules/img/cursos/comunicacion-microservicios.jpg -------------------------------------------------------------------------------- /6-2-molecules/img/cursos/cqrs-event-sourcing-kotlin-axon-framework.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-2-molecules/img/cursos/cqrs-event-sourcing-kotlin-axon-framework.jpg -------------------------------------------------------------------------------- /6-2-molecules/img/cursos/curso-agile-retrospectivas.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-2-molecules/img/cursos/curso-agile-retrospectivas.jpg -------------------------------------------------------------------------------- /6-2-molecules/img/cursos/curso-api-http-scala.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-2-molecules/img/cursos/curso-api-http-scala.jpg -------------------------------------------------------------------------------- /6-2-molecules/img/cursos/curso-app-mean-webpack.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-2-molecules/img/cursos/curso-app-mean-webpack.jpg -------------------------------------------------------------------------------- /6-2-molecules/img/cursos/curso-app-vuejs-jest.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-2-molecules/img/cursos/curso-app-vuejs-jest.jpg -------------------------------------------------------------------------------- /6-2-molecules/img/cursos/curso-arquitectura-hexagonal.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-2-molecules/img/cursos/curso-arquitectura-hexagonal.jpg -------------------------------------------------------------------------------- /6-2-molecules/img/cursos/curso-aws-ec2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-2-molecules/img/cursos/curso-aws-ec2.jpg -------------------------------------------------------------------------------- /6-2-molecules/img/cursos/curso-aws-escalando-apps.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-2-molecules/img/cursos/curso-aws-escalando-apps.jpg -------------------------------------------------------------------------------- /6-2-molecules/img/cursos/curso-cqrs.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-2-molecules/img/cursos/curso-cqrs.jpg -------------------------------------------------------------------------------- /6-2-molecules/img/cursos/curso-introduccion-scala.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-2-molecules/img/cursos/curso-introduccion-scala.jpg -------------------------------------------------------------------------------- /6-2-molecules/img/cursos/curso-screenshot-testing-android.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-2-molecules/img/cursos/curso-screenshot-testing-android.jpg -------------------------------------------------------------------------------- /6-2-molecules/img/cursos/curso-screenshot-testing-ios.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-2-molecules/img/cursos/curso-screenshot-testing-ios.jpg -------------------------------------------------------------------------------- /6-2-molecules/img/cursos/curso-ui-testing-android.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-2-molecules/img/cursos/curso-ui-testing-android.jpg -------------------------------------------------------------------------------- /6-2-molecules/img/cursos/curso-ui-testing-ios.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-2-molecules/img/cursos/curso-ui-testing-ios.jpg -------------------------------------------------------------------------------- /6-2-molecules/img/cursos/ddd-en-php.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-2-molecules/img/cursos/ddd-en-php.jpg -------------------------------------------------------------------------------- /6-2-molecules/img/cursos/ddd-java.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-2-molecules/img/cursos/ddd-java.jpg -------------------------------------------------------------------------------- /6-2-molecules/img/cursos/docker-desde-0.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-2-molecules/img/cursos/docker-desde-0.jpg -------------------------------------------------------------------------------- /6-2-molecules/img/cursos/domain-driven-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-2-molecules/img/cursos/domain-driven-design.jpg -------------------------------------------------------------------------------- /6-2-molecules/img/cursos/dotfiles.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-2-molecules/img/cursos/dotfiles.jpg -------------------------------------------------------------------------------- /6-2-molecules/img/cursos/elastic-stack.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-2-molecules/img/cursos/elastic-stack.jpg -------------------------------------------------------------------------------- /6-2-molecules/img/cursos/git-introduccion-trabajo-en-equipo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-2-molecules/img/cursos/git-introduccion-trabajo-en-equipo.jpg -------------------------------------------------------------------------------- /6-2-molecules/img/cursos/github-actions-automatizacion.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-2-molecules/img/cursos/github-actions-automatizacion.jpg -------------------------------------------------------------------------------- /6-2-molecules/img/cursos/github-actions-integracion-continua.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-2-molecules/img/cursos/github-actions-integracion-continua.jpg -------------------------------------------------------------------------------- /6-2-molecules/img/cursos/go-primera-app.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-2-molecules/img/cursos/go-primera-app.jpg -------------------------------------------------------------------------------- /6-2-molecules/img/cursos/grafana-prometheus.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-2-molecules/img/cursos/grafana-prometheus.jpg -------------------------------------------------------------------------------- /6-2-molecules/img/cursos/intellij.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-2-molecules/img/cursos/intellij.jpg -------------------------------------------------------------------------------- /6-2-molecules/img/cursos/iterm-productividad.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-2-molecules/img/cursos/iterm-productividad.jpg -------------------------------------------------------------------------------- /6-2-molecules/img/cursos/kubernetes-para-desarrolladores.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-2-molecules/img/cursos/kubernetes-para-desarrolladores.jpg -------------------------------------------------------------------------------- /6-2-molecules/img/cursos/layouts-css.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-2-molecules/img/cursos/layouts-css.jpg -------------------------------------------------------------------------------- /6-2-molecules/img/cursos/makefiles.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-2-molecules/img/cursos/makefiles.jpg -------------------------------------------------------------------------------- /6-2-molecules/img/cursos/migracion-vuejs.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-2-molecules/img/cursos/migracion-vuejs.jpg -------------------------------------------------------------------------------- /6-2-molecules/img/cursos/notion.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-2-molecules/img/cursos/notion.jpg -------------------------------------------------------------------------------- /6-2-molecules/img/cursos/novedades-vue-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-2-molecules/img/cursos/novedades-vue-3.jpg -------------------------------------------------------------------------------- /6-2-molecules/img/cursos/programacion-funcional-refactor-typeclasses.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-2-molecules/img/cursos/programacion-funcional-refactor-typeclasses.jpg -------------------------------------------------------------------------------- /6-2-molecules/img/cursos/prometheus.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-2-molecules/img/cursos/prometheus.jpg -------------------------------------------------------------------------------- /6-2-molecules/img/cursos/reactjs-de-0-a-deploy.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-2-molecules/img/cursos/reactjs-de-0-a-deploy.jpg -------------------------------------------------------------------------------- /6-2-molecules/img/cursos/solid.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-2-molecules/img/cursos/solid.jpg -------------------------------------------------------------------------------- /6-2-molecules/img/cursos/terminal-zsh.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-2-molecules/img/cursos/terminal-zsh.jpg -------------------------------------------------------------------------------- /6-2-molecules/img/cursos/testing-introduccion-buenas-practicas.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-2-molecules/img/cursos/testing-introduccion-buenas-practicas.jpg -------------------------------------------------------------------------------- /6-2-molecules/img/cursos/testing-vuex.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-2-molecules/img/cursos/testing-vuex.jpg -------------------------------------------------------------------------------- /6-2-molecules/img/cursos/vistas-android.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-2-molecules/img/cursos/vistas-android.jpg -------------------------------------------------------------------------------- /6-2-molecules/img/icons/facebook.svg: -------------------------------------------------------------------------------- 1 | Facebook icon -------------------------------------------------------------------------------- /6-2-molecules/img/icons/linkedin.svg: -------------------------------------------------------------------------------- 1 | LinkedIn icon -------------------------------------------------------------------------------- /6-2-molecules/img/icons/twitter.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /6-2-molecules/img/icons/youtube.svg: -------------------------------------------------------------------------------- 1 | YouTube icon -------------------------------------------------------------------------------- /6-2-molecules/img/testimonios/antonio-manuel-rubio.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-2-molecules/img/testimonios/antonio-manuel-rubio.jpg -------------------------------------------------------------------------------- /6-2-molecules/img/testimonios/dani-madurell.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-2-molecules/img/testimonios/dani-madurell.jpeg -------------------------------------------------------------------------------- /6-2-molecules/img/testimonios/edu-salguero.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-2-molecules/img/testimonios/edu-salguero.jpeg -------------------------------------------------------------------------------- /6-2-molecules/img/testimonios/fernando-ripoll.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-2-molecules/img/testimonios/fernando-ripoll.jpg -------------------------------------------------------------------------------- /6-2-molecules/img/testimonios/joan-miralles.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-2-molecules/img/testimonios/joan-miralles.jpg -------------------------------------------------------------------------------- /6-2-molecules/img/testimonios/luis-rodriguez.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-2-molecules/img/testimonios/luis-rodriguez.jpg -------------------------------------------------------------------------------- /6-2-molecules/img/testimonios/marc-monguio.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-2-molecules/img/testimonios/marc-monguio.jpg -------------------------------------------------------------------------------- /6-2-molecules/img/testimonios/miguel-angel-sanchez.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-2-molecules/img/testimonios/miguel-angel-sanchez.jpg -------------------------------------------------------------------------------- /6-2-molecules/img/testimonios/sergio-de-candelario.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-2-molecules/img/testimonios/sergio-de-candelario.jpg -------------------------------------------------------------------------------- /6-2-molecules/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "css-architecture-course", 3 | "version": "1.0.0", 4 | "description": "", 5 | "scripts": { 6 | "build": "sass scss:css", 7 | "watch": "sass scss:css --watch" 8 | }, 9 | "devDependencies": { 10 | "sass": "^1.29.0", 11 | "stylelint": "^13.8.0", 12 | "stylelint-config-idiomatic-order": "^8.1.0", 13 | "stylelint-config-standard": "^20.0.0", 14 | "stylelint-scss": "^3.18.0" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /6-2-molecules/scss/atoms/_box.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | 3 | .a-box { 4 | padding: 1.63rem; 5 | background: rgba(variables.$background-darker-color, 0.3); 6 | border-radius: 0.37rem; 7 | color: variables.$text-inverted-color; 8 | } 9 | -------------------------------------------------------------------------------- /6-2-molecules/scss/atoms/_cover-background.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | 3 | .a-cover-background { 4 | background-attachment: fixed; 5 | background-color: variables.$background-dark-color; 6 | background-position: center; 7 | background-repeat: no-repeat; 8 | background-size: cover; 9 | color: variables.$text-inverted-color; 10 | 11 | &--plant { 12 | background-image: url("../../img/bg/plant.jpg"); 13 | } 14 | 15 | &--kayak { 16 | background-image: url("../../img/bg/kayak.jpg"); 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /6-2-molecules/scss/atoms/_pill.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | 3 | .a-pill { 4 | display: inline-block; 5 | padding: 0.5rem 0.65rem; 6 | background: variables.$background-darker-color; 7 | border-radius: 50px; 8 | color: variables.$text-inverted-color; 9 | font-size: variables.$fs-pill; 10 | font-weight: 700; 11 | letter-spacing: 0.5px; 12 | text-align: center; 13 | text-transform: uppercase; 14 | } 15 | -------------------------------------------------------------------------------- /6-2-molecules/scss/atoms/_typography.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | 3 | .a-lead { 4 | font-size: variables.$fs-lead; 5 | line-height: 1.65; 6 | } 7 | 8 | .a-title { 9 | font-size: variables.$fs-title-l; 10 | } 11 | -------------------------------------------------------------------------------- /6-2-molecules/scss/elements/_body.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | 3 | body { 4 | color: variables.$text-color; 5 | font-family: variables.$font-family; 6 | font-size: variables.$fs-body; 7 | line-height: 1.8; 8 | } 9 | -------------------------------------------------------------------------------- /6-2-molecules/scss/elements/_headings.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | 3 | h1, 4 | h2, 5 | h3 { 6 | font-weight: 300; 7 | line-height: 1.13; 8 | } 9 | 10 | h1 { 11 | font-size: variables.$fs-title-l; 12 | } 13 | 14 | h2 { 15 | font-size: variables.$fs-title-m; 16 | } 17 | 18 | h3 { 19 | font-size: variables.$fs-title-s; 20 | } 21 | -------------------------------------------------------------------------------- /6-2-molecules/scss/elements/_img.scss: -------------------------------------------------------------------------------- 1 | img { 2 | max-width: 100%; 3 | } 4 | -------------------------------------------------------------------------------- /6-2-molecules/scss/elements/_links.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | 3 | a { 4 | color: variables.$primary-color; 5 | text-decoration: underline; 6 | 7 | &:hover, 8 | &:focus { 9 | color: variables.$primary-dark-color; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /6-2-molecules/scss/generic/_box-sizing.scss: -------------------------------------------------------------------------------- 1 | *, 2 | *::before, 3 | *::after { 4 | box-sizing: border-box; 5 | } 6 | -------------------------------------------------------------------------------- /6-2-molecules/scss/index.scss: -------------------------------------------------------------------------------- 1 | // Generic 2 | @use "generic/normalize"; 3 | @use "generic/box-sizing"; 4 | 5 | // Elements 6 | @use "elements/body"; 7 | @use "elements/headings"; 8 | @use "elements/img"; 9 | @use "elements/links"; 10 | 11 | // Objects 12 | @use "objects/container"; 13 | @use "objects/ui-list"; 14 | 15 | // Atoms 16 | @use "atoms/box"; 17 | @use "atoms/btn"; 18 | @use "atoms/cover-background"; 19 | @use "atoms/pill"; 20 | @use "atoms/typography"; 21 | 22 | // Molecules 23 | @use "molecules/card"; 24 | @use "molecules/cta-box"; 25 | @use "molecules/dropdown"; 26 | @use "molecules/quote"; 27 | @use "molecules/video-thumbnail"; 28 | -------------------------------------------------------------------------------- /6-2-molecules/scss/molecules/_quote.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | @use "../tools/mixins"; 3 | 4 | .m-quote { 5 | &__attribution { 6 | @include mixins.sidebar($side-width: 3.25rem, $gap: 1.62rem); 7 | 8 | align-items: flex-start; 9 | margin-top: 1rem; 10 | } 11 | 12 | &__author { 13 | margin: 0; 14 | font-size: variables.$fs-body; 15 | font-weight: 600; 16 | } 17 | 18 | &__image { 19 | max-width: 3.25rem; 20 | border-radius: 50%; 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /6-2-molecules/scss/objects/_container.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | 3 | .o-container { 4 | max-width: variables.$max-width; 5 | padding: variables.$spacing variables.$spacing-s; 6 | margin: 0 auto; 7 | } 8 | -------------------------------------------------------------------------------- /6-2-molecules/scss/objects/_ui-list.scss: -------------------------------------------------------------------------------- 1 | .o-ui-list { 2 | padding: 0; 3 | margin: 0; 4 | list-style: none; 5 | 6 | &--horizontal { 7 | display: flex; 8 | flex-wrap: wrap; 9 | align-items: center; 10 | gap: 1rem; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /6-2-molecules/scss/settings/_colors.scss: -------------------------------------------------------------------------------- 1 | $_eucalyptus: #289f5f; 2 | $_green-pea: #19623b; 3 | $_baltic-sea: #282729; 4 | $_cod-gray: #181818; 5 | $_dove-gray: #666; 6 | $_boulder: #777; 7 | $_white: #fff; 8 | $_alabaster: #fafafa; 9 | $_gallery: #ececec; 10 | 11 | $primary-color: $_eucalyptus; 12 | $primary-dark-color: $_green-pea; 13 | 14 | $background-dark-color: $_baltic-sea; 15 | $background-darker-color: $_cod-gray; 16 | $background-light-color: $_alabaster; 17 | $background-lighter-color: $_white; 18 | 19 | $text-color: $_cod-gray; 20 | $text-muted-color: $_dove-gray; 21 | $text-inverted-color: $_white; 22 | 23 | $border-color: $_dove-gray; 24 | $border-inverted-color: $_gallery; 25 | -------------------------------------------------------------------------------- /6-2-molecules/scss/settings/_layout.scss: -------------------------------------------------------------------------------- 1 | $max-width: 71.25rem; 2 | 3 | // Spacing 4 | $spacing-s: 1rem; 5 | $spacing: 1.6rem; 6 | $spacing-l: 3.25rem; 7 | -------------------------------------------------------------------------------- /6-2-molecules/scss/settings/_typography.scss: -------------------------------------------------------------------------------- 1 | $font-family: "Open Sans", sans-serif; 2 | 3 | // Typography scale 4 | $fs-base: 16; 5 | 6 | $_fs-9: 9 / $fs-base + rem; 7 | $_fs-12: 12 / $fs-base + rem; 8 | $_fs-14: 14 / $fs-base + rem; 9 | $_fs-19: 19 / $fs-base + rem; 10 | $_fs-25: 25 / $fs-base + rem; 11 | $_fs-33: 33 / $fs-base + rem; 12 | $_fs-44: 44 / $fs-base + rem; 13 | 14 | // Typography applications 15 | $fs-pill: $_fs-9; 16 | $fs-btn: $_fs-12; 17 | $fs-footer: $_fs-12; 18 | $fs-menu: $_fs-14; 19 | $fs-body: $_fs-14; 20 | $fs-lead: $_fs-19; 21 | $fs-title-s: $_fs-25; 22 | $fs-title-m: $_fs-33; 23 | $fs-title-l: $_fs-44; 24 | -------------------------------------------------------------------------------- /6-2-molecules/scss/settings/_variables.scss: -------------------------------------------------------------------------------- 1 | @forward "./colors"; 2 | @forward "./layout"; 3 | @forward "./typography"; 4 | @forward "./z-index"; 5 | -------------------------------------------------------------------------------- /6-2-molecules/scss/settings/_z-index.scss: -------------------------------------------------------------------------------- 1 | $_z1: 1; 2 | $_z2: 2; 3 | $_z3: 3; 4 | $_z4: 4; 5 | $_z5: 5; 6 | $_z6: 6; 7 | $_z7: 7; 8 | $_z8: 8; 9 | $_z9: 9; 10 | $_z10: 10; 11 | 12 | $z-menu: $_z9; 13 | -------------------------------------------------------------------------------- /6-2-molecules/scss/tools/_justify.scss: -------------------------------------------------------------------------------- 1 | @mixin justify($vertical-align: center) { 2 | display: flex; 3 | flex-wrap: wrap; 4 | align-items: $vertical-align; 5 | justify-content: space-between; 6 | } 7 | -------------------------------------------------------------------------------- /6-2-molecules/scss/tools/_mixins.scss: -------------------------------------------------------------------------------- 1 | @forward "./justify"; 2 | @forward "./sidebar"; 3 | -------------------------------------------------------------------------------- /6-2-molecules/scss/tools/_sidebar.scss: -------------------------------------------------------------------------------- 1 | @mixin sidebar( 2 | $sidebar-position: "last-child", 3 | $side-width: auto, 4 | $min-width: 50%, 5 | $gap: 1rem 6 | ) { 7 | display: flex; 8 | flex-wrap: wrap; 9 | gap: $gap; 10 | 11 | > * { 12 | flex-basis: $side-width; 13 | flex-grow: 1; 14 | } 15 | 16 | > :#{$sidebar-position} { 17 | min-width: $min-width; 18 | flex-basis: 0; 19 | flex-grow: 999; 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /6-2-molecules/scss/tools/_toRem.scss: -------------------------------------------------------------------------------- 1 | @function toRem($size) { 2 | $remSize: $size / $fs-base; 3 | 4 | @return $remSize * 1rem; 5 | } 6 | -------------------------------------------------------------------------------- /6-3-organisms/.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": ["stylelint-scss"], 3 | "extends": ["stylelint-config-standard", "stylelint-config-idiomatic-order"], 4 | "rules": { 5 | "at-rule-no-unknown": null, 6 | "scss/at-rule-no-unknown": true 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /6-3-organisms/README.md: -------------------------------------------------------------------------------- 1 | # Organisms 2 | 3 | ## To run this project 4 | 5 | ```bash 6 | npm install 7 | 8 | # To watch scss files 9 | npm run watch 10 | 11 | # To compile scss files 12 | npm run build 13 | ``` 14 | -------------------------------------------------------------------------------- /6-3-organisms/img/bg/cursos-codelytv-pro.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-3-organisms/img/bg/cursos-codelytv-pro.png -------------------------------------------------------------------------------- /6-3-organisms/img/bg/kayak.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-3-organisms/img/bg/kayak.jpg -------------------------------------------------------------------------------- /6-3-organisms/img/bg/plant.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-3-organisms/img/bg/plant.jpg -------------------------------------------------------------------------------- /6-3-organisms/img/cursos/arquitectura/refactoring-bloater-code-smells.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-3-organisms/img/cursos/arquitectura/refactoring-bloater-code-smells.jpg -------------------------------------------------------------------------------- /6-3-organisms/img/cursos/bash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-3-organisms/img/cursos/bash.jpg -------------------------------------------------------------------------------- /6-3-organisms/img/cursos/buenas-practicas-bdd-cucumber-behat.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-3-organisms/img/cursos/buenas-practicas-bdd-cucumber-behat.jpg -------------------------------------------------------------------------------- /6-3-organisms/img/cursos/comunicacion-microservicios.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-3-organisms/img/cursos/comunicacion-microservicios.jpg -------------------------------------------------------------------------------- /6-3-organisms/img/cursos/cqrs-event-sourcing-kotlin-axon-framework.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-3-organisms/img/cursos/cqrs-event-sourcing-kotlin-axon-framework.jpg -------------------------------------------------------------------------------- /6-3-organisms/img/cursos/curso-agile-retrospectivas.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-3-organisms/img/cursos/curso-agile-retrospectivas.jpg -------------------------------------------------------------------------------- /6-3-organisms/img/cursos/curso-api-http-scala.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-3-organisms/img/cursos/curso-api-http-scala.jpg -------------------------------------------------------------------------------- /6-3-organisms/img/cursos/curso-app-mean-webpack.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-3-organisms/img/cursos/curso-app-mean-webpack.jpg -------------------------------------------------------------------------------- /6-3-organisms/img/cursos/curso-app-vuejs-jest.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-3-organisms/img/cursos/curso-app-vuejs-jest.jpg -------------------------------------------------------------------------------- /6-3-organisms/img/cursos/curso-arquitectura-hexagonal.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-3-organisms/img/cursos/curso-arquitectura-hexagonal.jpg -------------------------------------------------------------------------------- /6-3-organisms/img/cursos/curso-aws-ec2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-3-organisms/img/cursos/curso-aws-ec2.jpg -------------------------------------------------------------------------------- /6-3-organisms/img/cursos/curso-aws-escalando-apps.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-3-organisms/img/cursos/curso-aws-escalando-apps.jpg -------------------------------------------------------------------------------- /6-3-organisms/img/cursos/curso-cqrs.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-3-organisms/img/cursos/curso-cqrs.jpg -------------------------------------------------------------------------------- /6-3-organisms/img/cursos/curso-introduccion-scala.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-3-organisms/img/cursos/curso-introduccion-scala.jpg -------------------------------------------------------------------------------- /6-3-organisms/img/cursos/curso-screenshot-testing-android.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-3-organisms/img/cursos/curso-screenshot-testing-android.jpg -------------------------------------------------------------------------------- /6-3-organisms/img/cursos/curso-screenshot-testing-ios.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-3-organisms/img/cursos/curso-screenshot-testing-ios.jpg -------------------------------------------------------------------------------- /6-3-organisms/img/cursos/curso-ui-testing-android.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-3-organisms/img/cursos/curso-ui-testing-android.jpg -------------------------------------------------------------------------------- /6-3-organisms/img/cursos/curso-ui-testing-ios.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-3-organisms/img/cursos/curso-ui-testing-ios.jpg -------------------------------------------------------------------------------- /6-3-organisms/img/cursos/ddd-en-php.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-3-organisms/img/cursos/ddd-en-php.jpg -------------------------------------------------------------------------------- /6-3-organisms/img/cursos/ddd-java.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-3-organisms/img/cursos/ddd-java.jpg -------------------------------------------------------------------------------- /6-3-organisms/img/cursos/docker-desde-0.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-3-organisms/img/cursos/docker-desde-0.jpg -------------------------------------------------------------------------------- /6-3-organisms/img/cursos/domain-driven-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-3-organisms/img/cursos/domain-driven-design.jpg -------------------------------------------------------------------------------- /6-3-organisms/img/cursos/dotfiles.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-3-organisms/img/cursos/dotfiles.jpg -------------------------------------------------------------------------------- /6-3-organisms/img/cursos/elastic-stack.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-3-organisms/img/cursos/elastic-stack.jpg -------------------------------------------------------------------------------- /6-3-organisms/img/cursos/git-introduccion-trabajo-en-equipo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-3-organisms/img/cursos/git-introduccion-trabajo-en-equipo.jpg -------------------------------------------------------------------------------- /6-3-organisms/img/cursos/github-actions-automatizacion.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-3-organisms/img/cursos/github-actions-automatizacion.jpg -------------------------------------------------------------------------------- /6-3-organisms/img/cursos/github-actions-integracion-continua.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-3-organisms/img/cursos/github-actions-integracion-continua.jpg -------------------------------------------------------------------------------- /6-3-organisms/img/cursos/go-primera-app.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-3-organisms/img/cursos/go-primera-app.jpg -------------------------------------------------------------------------------- /6-3-organisms/img/cursos/grafana-prometheus.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-3-organisms/img/cursos/grafana-prometheus.jpg -------------------------------------------------------------------------------- /6-3-organisms/img/cursos/intellij.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-3-organisms/img/cursos/intellij.jpg -------------------------------------------------------------------------------- /6-3-organisms/img/cursos/iterm-productividad.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-3-organisms/img/cursos/iterm-productividad.jpg -------------------------------------------------------------------------------- /6-3-organisms/img/cursos/kubernetes-para-desarrolladores.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-3-organisms/img/cursos/kubernetes-para-desarrolladores.jpg -------------------------------------------------------------------------------- /6-3-organisms/img/cursos/layouts-css.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-3-organisms/img/cursos/layouts-css.jpg -------------------------------------------------------------------------------- /6-3-organisms/img/cursos/makefiles.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-3-organisms/img/cursos/makefiles.jpg -------------------------------------------------------------------------------- /6-3-organisms/img/cursos/migracion-vuejs.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-3-organisms/img/cursos/migracion-vuejs.jpg -------------------------------------------------------------------------------- /6-3-organisms/img/cursos/notion.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-3-organisms/img/cursos/notion.jpg -------------------------------------------------------------------------------- /6-3-organisms/img/cursos/novedades-vue-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-3-organisms/img/cursos/novedades-vue-3.jpg -------------------------------------------------------------------------------- /6-3-organisms/img/cursos/programacion-funcional-refactor-typeclasses.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-3-organisms/img/cursos/programacion-funcional-refactor-typeclasses.jpg -------------------------------------------------------------------------------- /6-3-organisms/img/cursos/prometheus.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-3-organisms/img/cursos/prometheus.jpg -------------------------------------------------------------------------------- /6-3-organisms/img/cursos/reactjs-de-0-a-deploy.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-3-organisms/img/cursos/reactjs-de-0-a-deploy.jpg -------------------------------------------------------------------------------- /6-3-organisms/img/cursos/solid.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-3-organisms/img/cursos/solid.jpg -------------------------------------------------------------------------------- /6-3-organisms/img/cursos/terminal-zsh.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-3-organisms/img/cursos/terminal-zsh.jpg -------------------------------------------------------------------------------- /6-3-organisms/img/cursos/testing-introduccion-buenas-practicas.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-3-organisms/img/cursos/testing-introduccion-buenas-practicas.jpg -------------------------------------------------------------------------------- /6-3-organisms/img/cursos/testing-vuex.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-3-organisms/img/cursos/testing-vuex.jpg -------------------------------------------------------------------------------- /6-3-organisms/img/cursos/vistas-android.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-3-organisms/img/cursos/vistas-android.jpg -------------------------------------------------------------------------------- /6-3-organisms/img/icons/facebook.svg: -------------------------------------------------------------------------------- 1 | Facebook icon -------------------------------------------------------------------------------- /6-3-organisms/img/icons/linkedin.svg: -------------------------------------------------------------------------------- 1 | LinkedIn icon -------------------------------------------------------------------------------- /6-3-organisms/img/icons/twitter.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /6-3-organisms/img/icons/youtube.svg: -------------------------------------------------------------------------------- 1 | YouTube icon -------------------------------------------------------------------------------- /6-3-organisms/img/testimonios/antonio-manuel-rubio.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-3-organisms/img/testimonios/antonio-manuel-rubio.jpg -------------------------------------------------------------------------------- /6-3-organisms/img/testimonios/dani-madurell.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-3-organisms/img/testimonios/dani-madurell.jpeg -------------------------------------------------------------------------------- /6-3-organisms/img/testimonios/edu-salguero.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-3-organisms/img/testimonios/edu-salguero.jpeg -------------------------------------------------------------------------------- /6-3-organisms/img/testimonios/fernando-ripoll.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-3-organisms/img/testimonios/fernando-ripoll.jpg -------------------------------------------------------------------------------- /6-3-organisms/img/testimonios/joan-miralles.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-3-organisms/img/testimonios/joan-miralles.jpg -------------------------------------------------------------------------------- /6-3-organisms/img/testimonios/luis-rodriguez.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-3-organisms/img/testimonios/luis-rodriguez.jpg -------------------------------------------------------------------------------- /6-3-organisms/img/testimonios/marc-monguio.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-3-organisms/img/testimonios/marc-monguio.jpg -------------------------------------------------------------------------------- /6-3-organisms/img/testimonios/miguel-angel-sanchez.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-3-organisms/img/testimonios/miguel-angel-sanchez.jpg -------------------------------------------------------------------------------- /6-3-organisms/img/testimonios/sergio-de-candelario.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/6-3-organisms/img/testimonios/sergio-de-candelario.jpg -------------------------------------------------------------------------------- /6-3-organisms/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "css-architecture-course", 3 | "version": "1.0.0", 4 | "description": "", 5 | "scripts": { 6 | "build": "sass scss:css", 7 | "watch": "sass scss:css --watch" 8 | }, 9 | "devDependencies": { 10 | "sass": "^1.29.0", 11 | "stylelint": "^13.8.0", 12 | "stylelint-config-idiomatic-order": "^8.1.0", 13 | "stylelint-config-standard": "^20.0.0", 14 | "stylelint-scss": "^3.18.0" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /6-3-organisms/scss/atoms/_box.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | 3 | .a-box { 4 | padding: 1.63rem; 5 | background: rgba(variables.$background-darker-color, 0.3); 6 | border-radius: 0.37rem; 7 | color: variables.$text-inverted-color; 8 | } 9 | -------------------------------------------------------------------------------- /6-3-organisms/scss/atoms/_cover-background.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | 3 | .a-cover-background { 4 | background-attachment: fixed; 5 | background-color: variables.$background-dark-color; 6 | background-position: center; 7 | background-repeat: no-repeat; 8 | background-size: cover; 9 | color: variables.$text-inverted-color; 10 | 11 | &--plant { 12 | background-image: url("../../img/bg/plant.jpg"); 13 | } 14 | 15 | &--kayak { 16 | background-image: url("../../img/bg/kayak.jpg"); 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /6-3-organisms/scss/atoms/_pill.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | 3 | .a-pill { 4 | display: inline-block; 5 | padding: 0.5rem 0.65rem; 6 | background: variables.$background-darker-color; 7 | border-radius: 50px; 8 | color: variables.$text-inverted-color; 9 | font-size: variables.$fs-pill; 10 | font-weight: 700; 11 | letter-spacing: 0.5px; 12 | text-align: center; 13 | text-transform: uppercase; 14 | } 15 | -------------------------------------------------------------------------------- /6-3-organisms/scss/atoms/_typography.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | 3 | .a-lead { 4 | font-size: variables.$fs-lead; 5 | line-height: 1.65; 6 | } 7 | 8 | .a-title { 9 | font-size: variables.$fs-title-l; 10 | } 11 | -------------------------------------------------------------------------------- /6-3-organisms/scss/elements/_body.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | 3 | body { 4 | color: variables.$text-color; 5 | font-family: variables.$font-family; 6 | font-size: variables.$fs-body; 7 | line-height: 1.8; 8 | } 9 | -------------------------------------------------------------------------------- /6-3-organisms/scss/elements/_headings.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | 3 | h1, 4 | h2, 5 | h3 { 6 | font-weight: 300; 7 | line-height: 1.13; 8 | } 9 | 10 | h1 { 11 | font-size: variables.$fs-title-l; 12 | } 13 | 14 | h2 { 15 | font-size: variables.$fs-title-m; 16 | } 17 | 18 | h3 { 19 | font-size: variables.$fs-title-s; 20 | } 21 | -------------------------------------------------------------------------------- /6-3-organisms/scss/elements/_img.scss: -------------------------------------------------------------------------------- 1 | img { 2 | max-width: 100%; 3 | } 4 | -------------------------------------------------------------------------------- /6-3-organisms/scss/elements/_links.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | 3 | a { 4 | color: variables.$primary-color; 5 | text-decoration: underline; 6 | 7 | &:hover, 8 | &:focus { 9 | color: variables.$primary-dark-color; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /6-3-organisms/scss/generic/_box-sizing.scss: -------------------------------------------------------------------------------- 1 | *, 2 | *::before, 3 | *::after { 4 | box-sizing: border-box; 5 | } 6 | -------------------------------------------------------------------------------- /6-3-organisms/scss/molecules/_quote.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | @use "../tools/mixins"; 3 | 4 | .m-quote { 5 | &__attribution { 6 | @include mixins.sidebar($side-width: 3.25rem, $gap: 1.62rem); 7 | 8 | align-items: flex-start; 9 | margin-top: 1rem; 10 | } 11 | 12 | &__author { 13 | margin: 0; 14 | font-size: variables.$fs-body; 15 | font-weight: 600; 16 | } 17 | 18 | &__image { 19 | max-width: 3.25rem; 20 | border-radius: 50%; 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /6-3-organisms/scss/objects/_container.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | 3 | .o-container { 4 | max-width: variables.$max-width; 5 | padding: variables.$spacing variables.$spacing-s; 6 | margin: 0 auto; 7 | } 8 | -------------------------------------------------------------------------------- /6-3-organisms/scss/objects/_ui-list.scss: -------------------------------------------------------------------------------- 1 | .o-ui-list { 2 | padding: 0; 3 | margin: 0; 4 | list-style: none; 5 | 6 | &--horizontal { 7 | display: flex; 8 | flex-wrap: wrap; 9 | align-items: center; 10 | gap: 1rem; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /6-3-organisms/scss/organisms/_business-callout.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | 3 | .g-business-callout { 4 | display: flex; 5 | flex-wrap: wrap; 6 | align-items: center; 7 | justify-content: center; 8 | color: variables.$text-muted-color; 9 | gap: 1rem; 10 | } 11 | -------------------------------------------------------------------------------- /6-3-organisms/scss/organisms/_courses.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | 3 | .g-courses { 4 | border-bottom: 1px solid variables.$border-inverted-color; 5 | background: variables.$background-light-color; 6 | 7 | &__filters { 8 | margin-bottom: 3rem; 9 | } 10 | 11 | &__grid { 12 | column-width: 18rem; 13 | gap: 1.87rem; 14 | } 15 | 16 | &__item { 17 | margin-bottom: 1.87rem; 18 | break-inside: avoid; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /6-3-organisms/scss/organisms/_cta.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | @use "../tools/mixins"; 3 | 4 | .g-cta { 5 | @include mixins.justify; 6 | 7 | padding-top: variables.$spacing-l; 8 | padding-bottom: variables.$spacing-l; 9 | 10 | &__title { 11 | margin: 0; 12 | font-size: variables.$fs-lead; 13 | font-weight: 400; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /6-3-organisms/scss/organisms/_hero.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | @use "../tools/mixins"; 3 | 4 | .g-hero { 5 | @include mixins.sidebar($sidebar-position: "first-child"); 6 | 7 | padding-top: variables.$spacing-l; 8 | padding-bottom: variables.$spacing-l; 9 | 10 | &__info { 11 | padding-right: 2rem; 12 | font-size: variables.$fs-lead; 13 | } 14 | 15 | &__media { 16 | max-width: 33rem; 17 | margin: 0 auto; 18 | } 19 | 20 | p { 21 | opacity: 0.9; 22 | } 23 | 24 | .btn { 25 | margin-top: 1rem; 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /6-3-organisms/scss/organisms/_partners.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | @use "../tools/mixins"; 3 | 4 | .g-partners { 5 | @include mixins.justify; 6 | 7 | padding-top: variables.$spacing-l; 8 | padding-bottom: variables.$spacing-l; 9 | 10 | &__title { 11 | margin: 0; 12 | color: gray; 13 | } 14 | 15 | &__logo { 16 | display: block; 17 | max-height: 1.6rem; 18 | } 19 | 20 | .ui-list--horizontal { 21 | gap: 3.25rem; 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /6-3-organisms/scss/organisms/_subscribe.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | @use "../tools/mixins"; 3 | 4 | .g-subscribe { 5 | @include mixins.sidebar( 6 | $sidebar-position: "first-child", 7 | $min-width: 60%, 8 | $side-width: 25rem 9 | ); 10 | 11 | padding-top: variables.$spacing-l; 12 | padding-bottom: 5rem; 13 | 14 | > :first-child { 15 | padding-right: 10vw; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /6-3-organisms/scss/organisms/_testimonials.scss: -------------------------------------------------------------------------------- 1 | .g-testimonials { 2 | padding-top: 6.5rem; 3 | padding-bottom: 6.5rem; 4 | 5 | &__grid { 6 | display: grid; 7 | gap: 1.87rem; 8 | grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /6-3-organisms/scss/settings/_colors.scss: -------------------------------------------------------------------------------- 1 | $_eucalyptus: #289f5f; 2 | $_green-pea: #19623b; 3 | $_baltic-sea: #282729; 4 | $_cod-gray: #181818; 5 | $_dove-gray: #666; 6 | $_boulder: #777; 7 | $_white: #fff; 8 | $_alabaster: #fafafa; 9 | $_gallery: #ececec; 10 | 11 | $primary-color: $_eucalyptus; 12 | $primary-dark-color: $_green-pea; 13 | 14 | $background-dark-color: $_baltic-sea; 15 | $background-darker-color: $_cod-gray; 16 | $background-light-color: $_alabaster; 17 | $background-lighter-color: $_white; 18 | 19 | $text-color: $_cod-gray; 20 | $text-muted-color: $_dove-gray; 21 | $text-inverted-color: $_white; 22 | 23 | $border-color: $_dove-gray; 24 | $border-inverted-color: $_gallery; 25 | -------------------------------------------------------------------------------- /6-3-organisms/scss/settings/_layout.scss: -------------------------------------------------------------------------------- 1 | $max-width: 71.25rem; 2 | 3 | // Spacing 4 | $spacing-s: 1rem; 5 | $spacing: 1.6rem; 6 | $spacing-l: 3.25rem; 7 | -------------------------------------------------------------------------------- /6-3-organisms/scss/settings/_typography.scss: -------------------------------------------------------------------------------- 1 | $font-family: "Open Sans", sans-serif; 2 | 3 | // Typography scale 4 | $fs-base: 16; 5 | 6 | $_fs-9: 9 / $fs-base + rem; 7 | $_fs-12: 12 / $fs-base + rem; 8 | $_fs-14: 14 / $fs-base + rem; 9 | $_fs-19: 19 / $fs-base + rem; 10 | $_fs-25: 25 / $fs-base + rem; 11 | $_fs-33: 33 / $fs-base + rem; 12 | $_fs-44: 44 / $fs-base + rem; 13 | 14 | // Typography applications 15 | $fs-pill: $_fs-9; 16 | $fs-btn: $_fs-12; 17 | $fs-footer: $_fs-12; 18 | $fs-menu: $_fs-14; 19 | $fs-body: $_fs-14; 20 | $fs-lead: $_fs-19; 21 | $fs-title-s: $_fs-25; 22 | $fs-title-m: $_fs-33; 23 | $fs-title-l: $_fs-44; 24 | -------------------------------------------------------------------------------- /6-3-organisms/scss/settings/_variables.scss: -------------------------------------------------------------------------------- 1 | @forward "./colors"; 2 | @forward "./layout"; 3 | @forward "./typography"; 4 | @forward "./z-index"; 5 | -------------------------------------------------------------------------------- /6-3-organisms/scss/settings/_z-index.scss: -------------------------------------------------------------------------------- 1 | $_z1: 1; 2 | $_z2: 2; 3 | $_z3: 3; 4 | $_z4: 4; 5 | $_z5: 5; 6 | $_z6: 6; 7 | $_z7: 7; 8 | $_z8: 8; 9 | $_z9: 9; 10 | $_z10: 10; 11 | 12 | $z-menu: $_z9; 13 | -------------------------------------------------------------------------------- /6-3-organisms/scss/tools/_justify.scss: -------------------------------------------------------------------------------- 1 | @mixin justify($vertical-align: center) { 2 | display: flex; 3 | flex-wrap: wrap; 4 | align-items: $vertical-align; 5 | justify-content: space-between; 6 | } 7 | -------------------------------------------------------------------------------- /6-3-organisms/scss/tools/_mixins.scss: -------------------------------------------------------------------------------- 1 | @forward "./justify"; 2 | @forward "./sidebar"; 3 | -------------------------------------------------------------------------------- /6-3-organisms/scss/tools/_sidebar.scss: -------------------------------------------------------------------------------- 1 | @mixin sidebar( 2 | $sidebar-position: "last-child", 3 | $side-width: auto, 4 | $min-width: 50%, 5 | $gap: 1rem 6 | ) { 7 | display: flex; 8 | flex-wrap: wrap; 9 | gap: $gap; 10 | 11 | > * { 12 | flex-basis: $side-width; 13 | flex-grow: 1; 14 | } 15 | 16 | > :#{$sidebar-position} { 17 | min-width: $min-width; 18 | flex-basis: 0; 19 | flex-grow: 999; 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /6-3-organisms/scss/tools/_toRem.scss: -------------------------------------------------------------------------------- 1 | @function toRem($size) { 2 | $remSize: $size / $fs-base; 3 | 4 | @return $remSize * 1rem; 5 | } 6 | -------------------------------------------------------------------------------- /6-3-organisms/scss/utilities/_error.scss: -------------------------------------------------------------------------------- 1 | .is-error { 2 | color: tomato !important; 3 | } 4 | -------------------------------------------------------------------------------- /7-3-vue-app/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | 6 | # local env files 7 | .env.local 8 | .env.*.local 9 | 10 | # Log files 11 | npm-debug.log* 12 | yarn-debug.log* 13 | yarn-error.log* 14 | pnpm-debug.log* 15 | 16 | # Editor directories and files 17 | .idea 18 | .vscode 19 | *.suo 20 | *.ntvs* 21 | *.njsproj 22 | *.sln 23 | *.sw? 24 | -------------------------------------------------------------------------------- /7-3-vue-app/README.md: -------------------------------------------------------------------------------- 1 | # ATOMITCSS Architecture with Vue 2 | 3 | ## Project setup 4 | 5 | ``` 6 | npm install 7 | ``` 8 | 9 | ### Compiles and hot-reloads for development 10 | 11 | ``` 12 | npm run serve 13 | ``` 14 | 15 | ### Compiles and minifies for production 16 | 17 | ``` 18 | npm run build 19 | ``` 20 | 21 | ### Lints and fixes files 22 | 23 | ``` 24 | npm run lint 25 | ``` 26 | 27 | ### Customize configuration 28 | 29 | See [Configuration Reference](https://cli.vuejs.org/config/). 30 | -------------------------------------------------------------------------------- /7-3-vue-app/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ["@vue/cli-plugin-babel/preset"] 3 | }; 4 | -------------------------------------------------------------------------------- /7-3-vue-app/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/7-3-vue-app/public/favicon.ico -------------------------------------------------------------------------------- /7-3-vue-app/public/img/bg/cursos-codelytv-pro.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/7-3-vue-app/public/img/bg/cursos-codelytv-pro.png -------------------------------------------------------------------------------- /7-3-vue-app/public/img/bg/kayak.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/7-3-vue-app/public/img/bg/kayak.jpg -------------------------------------------------------------------------------- /7-3-vue-app/public/img/bg/plant.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/7-3-vue-app/public/img/bg/plant.jpg -------------------------------------------------------------------------------- /7-3-vue-app/public/img/cursos/arquitectura/refactoring-bloater-code-smells.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/7-3-vue-app/public/img/cursos/arquitectura/refactoring-bloater-code-smells.jpg -------------------------------------------------------------------------------- /7-3-vue-app/public/img/cursos/bash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/7-3-vue-app/public/img/cursos/bash.jpg -------------------------------------------------------------------------------- /7-3-vue-app/public/img/cursos/buenas-practicas-bdd-cucumber-behat.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/7-3-vue-app/public/img/cursos/buenas-practicas-bdd-cucumber-behat.jpg -------------------------------------------------------------------------------- /7-3-vue-app/public/img/cursos/comunicacion-microservicios.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/7-3-vue-app/public/img/cursos/comunicacion-microservicios.jpg -------------------------------------------------------------------------------- /7-3-vue-app/public/img/cursos/cqrs-event-sourcing-kotlin-axon-framework.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/7-3-vue-app/public/img/cursos/cqrs-event-sourcing-kotlin-axon-framework.jpg -------------------------------------------------------------------------------- /7-3-vue-app/public/img/cursos/curso-agile-retrospectivas.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/7-3-vue-app/public/img/cursos/curso-agile-retrospectivas.jpg -------------------------------------------------------------------------------- /7-3-vue-app/public/img/cursos/curso-api-http-scala.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/7-3-vue-app/public/img/cursos/curso-api-http-scala.jpg -------------------------------------------------------------------------------- /7-3-vue-app/public/img/cursos/curso-app-mean-webpack.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/7-3-vue-app/public/img/cursos/curso-app-mean-webpack.jpg -------------------------------------------------------------------------------- /7-3-vue-app/public/img/cursos/curso-app-vuejs-jest.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/7-3-vue-app/public/img/cursos/curso-app-vuejs-jest.jpg -------------------------------------------------------------------------------- /7-3-vue-app/public/img/cursos/curso-arquitectura-hexagonal.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/7-3-vue-app/public/img/cursos/curso-arquitectura-hexagonal.jpg -------------------------------------------------------------------------------- /7-3-vue-app/public/img/cursos/curso-aws-ec2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/7-3-vue-app/public/img/cursos/curso-aws-ec2.jpg -------------------------------------------------------------------------------- /7-3-vue-app/public/img/cursos/curso-aws-escalando-apps.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/7-3-vue-app/public/img/cursos/curso-aws-escalando-apps.jpg -------------------------------------------------------------------------------- /7-3-vue-app/public/img/cursos/curso-cqrs.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/7-3-vue-app/public/img/cursos/curso-cqrs.jpg -------------------------------------------------------------------------------- /7-3-vue-app/public/img/cursos/curso-introduccion-scala.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/7-3-vue-app/public/img/cursos/curso-introduccion-scala.jpg -------------------------------------------------------------------------------- /7-3-vue-app/public/img/cursos/curso-screenshot-testing-android.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/7-3-vue-app/public/img/cursos/curso-screenshot-testing-android.jpg -------------------------------------------------------------------------------- /7-3-vue-app/public/img/cursos/curso-screenshot-testing-ios.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/7-3-vue-app/public/img/cursos/curso-screenshot-testing-ios.jpg -------------------------------------------------------------------------------- /7-3-vue-app/public/img/cursos/curso-ui-testing-android.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/7-3-vue-app/public/img/cursos/curso-ui-testing-android.jpg -------------------------------------------------------------------------------- /7-3-vue-app/public/img/cursos/curso-ui-testing-ios.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/7-3-vue-app/public/img/cursos/curso-ui-testing-ios.jpg -------------------------------------------------------------------------------- /7-3-vue-app/public/img/cursos/ddd-en-php.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/7-3-vue-app/public/img/cursos/ddd-en-php.jpg -------------------------------------------------------------------------------- /7-3-vue-app/public/img/cursos/ddd-java.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/7-3-vue-app/public/img/cursos/ddd-java.jpg -------------------------------------------------------------------------------- /7-3-vue-app/public/img/cursos/docker-desde-0.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/7-3-vue-app/public/img/cursos/docker-desde-0.jpg -------------------------------------------------------------------------------- /7-3-vue-app/public/img/cursos/domain-driven-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/7-3-vue-app/public/img/cursos/domain-driven-design.jpg -------------------------------------------------------------------------------- /7-3-vue-app/public/img/cursos/dotfiles.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/7-3-vue-app/public/img/cursos/dotfiles.jpg -------------------------------------------------------------------------------- /7-3-vue-app/public/img/cursos/elastic-stack.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/7-3-vue-app/public/img/cursos/elastic-stack.jpg -------------------------------------------------------------------------------- /7-3-vue-app/public/img/cursos/git-introduccion-trabajo-en-equipo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/7-3-vue-app/public/img/cursos/git-introduccion-trabajo-en-equipo.jpg -------------------------------------------------------------------------------- /7-3-vue-app/public/img/cursos/github-actions-automatizacion.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/7-3-vue-app/public/img/cursos/github-actions-automatizacion.jpg -------------------------------------------------------------------------------- /7-3-vue-app/public/img/cursos/github-actions-integracion-continua.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/7-3-vue-app/public/img/cursos/github-actions-integracion-continua.jpg -------------------------------------------------------------------------------- /7-3-vue-app/public/img/cursos/go-primera-app.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/7-3-vue-app/public/img/cursos/go-primera-app.jpg -------------------------------------------------------------------------------- /7-3-vue-app/public/img/cursos/grafana-prometheus.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/7-3-vue-app/public/img/cursos/grafana-prometheus.jpg -------------------------------------------------------------------------------- /7-3-vue-app/public/img/cursos/intellij.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/7-3-vue-app/public/img/cursos/intellij.jpg -------------------------------------------------------------------------------- /7-3-vue-app/public/img/cursos/iterm-productividad.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/7-3-vue-app/public/img/cursos/iterm-productividad.jpg -------------------------------------------------------------------------------- /7-3-vue-app/public/img/cursos/kubernetes-para-desarrolladores.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/7-3-vue-app/public/img/cursos/kubernetes-para-desarrolladores.jpg -------------------------------------------------------------------------------- /7-3-vue-app/public/img/cursos/layouts-css.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/7-3-vue-app/public/img/cursos/layouts-css.jpg -------------------------------------------------------------------------------- /7-3-vue-app/public/img/cursos/makefiles.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/7-3-vue-app/public/img/cursos/makefiles.jpg -------------------------------------------------------------------------------- /7-3-vue-app/public/img/cursos/migracion-vuejs.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/7-3-vue-app/public/img/cursos/migracion-vuejs.jpg -------------------------------------------------------------------------------- /7-3-vue-app/public/img/cursos/notion.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/7-3-vue-app/public/img/cursos/notion.jpg -------------------------------------------------------------------------------- /7-3-vue-app/public/img/cursos/novedades-vue-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/7-3-vue-app/public/img/cursos/novedades-vue-3.jpg -------------------------------------------------------------------------------- /7-3-vue-app/public/img/cursos/programacion-funcional-refactor-typeclasses.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/7-3-vue-app/public/img/cursos/programacion-funcional-refactor-typeclasses.jpg -------------------------------------------------------------------------------- /7-3-vue-app/public/img/cursos/prometheus.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/7-3-vue-app/public/img/cursos/prometheus.jpg -------------------------------------------------------------------------------- /7-3-vue-app/public/img/cursos/reactjs-de-0-a-deploy.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/7-3-vue-app/public/img/cursos/reactjs-de-0-a-deploy.jpg -------------------------------------------------------------------------------- /7-3-vue-app/public/img/cursos/solid.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/7-3-vue-app/public/img/cursos/solid.jpg -------------------------------------------------------------------------------- /7-3-vue-app/public/img/cursos/terminal-zsh.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/7-3-vue-app/public/img/cursos/terminal-zsh.jpg -------------------------------------------------------------------------------- /7-3-vue-app/public/img/cursos/testing-introduccion-buenas-practicas.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/7-3-vue-app/public/img/cursos/testing-introduccion-buenas-practicas.jpg -------------------------------------------------------------------------------- /7-3-vue-app/public/img/cursos/testing-vuex.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/7-3-vue-app/public/img/cursos/testing-vuex.jpg -------------------------------------------------------------------------------- /7-3-vue-app/public/img/cursos/vistas-android.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/7-3-vue-app/public/img/cursos/vistas-android.jpg -------------------------------------------------------------------------------- /7-3-vue-app/public/img/icons/facebook.svg: -------------------------------------------------------------------------------- 1 | Facebook icon -------------------------------------------------------------------------------- /7-3-vue-app/public/img/icons/linkedin.svg: -------------------------------------------------------------------------------- 1 | LinkedIn icon -------------------------------------------------------------------------------- /7-3-vue-app/public/img/icons/twitter.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /7-3-vue-app/public/img/icons/youtube.svg: -------------------------------------------------------------------------------- 1 | YouTube icon -------------------------------------------------------------------------------- /7-3-vue-app/public/img/testimonios/antonio-manuel-rubio.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/7-3-vue-app/public/img/testimonios/antonio-manuel-rubio.jpg -------------------------------------------------------------------------------- /7-3-vue-app/public/img/testimonios/dani-madurell.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/7-3-vue-app/public/img/testimonios/dani-madurell.jpeg -------------------------------------------------------------------------------- /7-3-vue-app/public/img/testimonios/edu-salguero.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/7-3-vue-app/public/img/testimonios/edu-salguero.jpeg -------------------------------------------------------------------------------- /7-3-vue-app/public/img/testimonios/fernando-ripoll.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/7-3-vue-app/public/img/testimonios/fernando-ripoll.jpg -------------------------------------------------------------------------------- /7-3-vue-app/public/img/testimonios/joan-miralles.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/7-3-vue-app/public/img/testimonios/joan-miralles.jpg -------------------------------------------------------------------------------- /7-3-vue-app/public/img/testimonios/luis-rodriguez.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/7-3-vue-app/public/img/testimonios/luis-rodriguez.jpg -------------------------------------------------------------------------------- /7-3-vue-app/public/img/testimonios/marc-monguio.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/7-3-vue-app/public/img/testimonios/marc-monguio.jpg -------------------------------------------------------------------------------- /7-3-vue-app/public/img/testimonios/miguel-angel-sanchez.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/7-3-vue-app/public/img/testimonios/miguel-angel-sanchez.jpg -------------------------------------------------------------------------------- /7-3-vue-app/public/img/testimonios/sergio-de-candelario.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/7-3-vue-app/public/img/testimonios/sergio-de-candelario.jpg -------------------------------------------------------------------------------- /7-3-vue-app/src/App.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 20 | -------------------------------------------------------------------------------- /7-3-vue-app/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/7-3-vue-app/src/assets/logo.png -------------------------------------------------------------------------------- /7-3-vue-app/src/assets/styles/elements/_body.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | 3 | body { 4 | color: variables.$text-color; 5 | font-family: variables.$font-family; 6 | font-size: variables.$fs-body; 7 | line-height: 1.8; 8 | } 9 | -------------------------------------------------------------------------------- /7-3-vue-app/src/assets/styles/elements/_headings.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | 3 | h1, 4 | h2, 5 | h3 { 6 | font-weight: 300; 7 | line-height: 1.13; 8 | } 9 | 10 | h1 { 11 | font-size: variables.$fs-title-l; 12 | } 13 | 14 | h2 { 15 | font-size: variables.$fs-title-m; 16 | } 17 | 18 | h3 { 19 | font-size: variables.$fs-title-s; 20 | } 21 | -------------------------------------------------------------------------------- /7-3-vue-app/src/assets/styles/elements/_img.scss: -------------------------------------------------------------------------------- 1 | img { 2 | max-width: 100%; 3 | } 4 | -------------------------------------------------------------------------------- /7-3-vue-app/src/assets/styles/elements/_links.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | 3 | a { 4 | color: variables.$primary-color; 5 | text-decoration: underline; 6 | 7 | &:hover, 8 | &:focus { 9 | color: variables.$primary-dark-color; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /7-3-vue-app/src/assets/styles/generic/_box-sizing.scss: -------------------------------------------------------------------------------- 1 | *, 2 | *::before, 3 | *::after { 4 | box-sizing: border-box; 5 | } 6 | -------------------------------------------------------------------------------- /7-3-vue-app/src/assets/styles/index.scss: -------------------------------------------------------------------------------- 1 | // Generic 2 | @use "generic/normalize"; 3 | @use "generic/box-sizing"; 4 | 5 | // Elements 6 | @use "elements/body"; 7 | @use "elements/headings"; 8 | @use "elements/img"; 9 | @use "elements/links"; 10 | 11 | // Objects 12 | // @use "objects/container"; 13 | // @use "objects/ui-list"; 14 | 15 | // Utilities 16 | @use "utilities/error"; 17 | -------------------------------------------------------------------------------- /7-3-vue-app/src/assets/styles/settings/_layout.scss: -------------------------------------------------------------------------------- 1 | $max-width: 71.25rem; 2 | 3 | // Spacing 4 | $spacing-s: 1rem; 5 | $spacing: 1.6rem; 6 | $spacing-l: 3.25rem; 7 | -------------------------------------------------------------------------------- /7-3-vue-app/src/assets/styles/settings/_typography.scss: -------------------------------------------------------------------------------- 1 | $font-family: "Open Sans", sans-serif; 2 | 3 | // Typography scale 4 | $fs-base: 16; 5 | 6 | $_fs-9: 9 / $fs-base + rem; 7 | $_fs-12: 12 / $fs-base + rem; 8 | $_fs-14: 14 / $fs-base + rem; 9 | $_fs-19: 19 / $fs-base + rem; 10 | $_fs-25: 25 / $fs-base + rem; 11 | $_fs-33: 33 / $fs-base + rem; 12 | $_fs-44: 44 / $fs-base + rem; 13 | 14 | // Typography applications 15 | $fs-pill: $_fs-9; 16 | $fs-btn: $_fs-12; 17 | $fs-footer: $_fs-12; 18 | $fs-menu: $_fs-14; 19 | $fs-body: $_fs-14; 20 | $fs-lead: $_fs-19; 21 | $fs-title-s: $_fs-25; 22 | $fs-title-m: $_fs-33; 23 | $fs-title-l: $_fs-44; 24 | -------------------------------------------------------------------------------- /7-3-vue-app/src/assets/styles/settings/_variables.scss: -------------------------------------------------------------------------------- 1 | @forward "./colors"; 2 | @forward "./layout"; 3 | @forward "./typography"; 4 | @forward "./z-index"; 5 | -------------------------------------------------------------------------------- /7-3-vue-app/src/assets/styles/settings/_z-index.scss: -------------------------------------------------------------------------------- 1 | $_z1: 1; 2 | $_z2: 2; 3 | $_z3: 3; 4 | $_z4: 4; 5 | $_z5: 5; 6 | $_z6: 6; 7 | $_z7: 7; 8 | $_z8: 8; 9 | $_z9: 9; 10 | $_z10: 10; 11 | 12 | $z-menu: $_z9; 13 | -------------------------------------------------------------------------------- /7-3-vue-app/src/assets/styles/tools/_justify.scss: -------------------------------------------------------------------------------- 1 | @mixin justify($vertical-align: center) { 2 | display: flex; 3 | flex-wrap: wrap; 4 | align-items: $vertical-align; 5 | justify-content: space-between; 6 | } 7 | -------------------------------------------------------------------------------- /7-3-vue-app/src/assets/styles/tools/_mixins.scss: -------------------------------------------------------------------------------- 1 | @forward "./justify"; 2 | @forward "./sidebar"; 3 | -------------------------------------------------------------------------------- /7-3-vue-app/src/assets/styles/tools/_sidebar.scss: -------------------------------------------------------------------------------- 1 | @mixin sidebar( 2 | $sidebar-position: "last-child", 3 | $side-width: auto, 4 | $min-width: 50%, 5 | $gap: 1rem 6 | ) { 7 | display: flex; 8 | flex-wrap: wrap; 9 | gap: $gap; 10 | 11 | > * { 12 | flex-basis: $side-width; 13 | flex-grow: 1; 14 | } 15 | 16 | > :#{$sidebar-position} { 17 | min-width: $min-width; 18 | flex-basis: 0; 19 | flex-grow: 999; 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /7-3-vue-app/src/assets/styles/tools/_toRem.scss: -------------------------------------------------------------------------------- 1 | @function toRem($size) { 2 | $remSize: $size / $fs-base; 3 | 4 | @return $remSize * 1rem; 5 | } 6 | -------------------------------------------------------------------------------- /7-3-vue-app/src/assets/styles/utilities/_error.scss: -------------------------------------------------------------------------------- 1 | .is-error { 2 | color: tomato !important; 3 | } 4 | -------------------------------------------------------------------------------- /7-3-vue-app/src/components/ui/atoms/Box.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 17 | -------------------------------------------------------------------------------- /7-3-vue-app/src/components/ui/atoms/Lead.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 15 | -------------------------------------------------------------------------------- /7-3-vue-app/src/components/ui/atoms/Pill.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 8 | 9 | 25 | -------------------------------------------------------------------------------- /7-3-vue-app/src/components/ui/atoms/Title.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 20 | 21 | 28 | -------------------------------------------------------------------------------- /7-3-vue-app/src/components/ui/objects/Container.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 17 | 18 | 27 | -------------------------------------------------------------------------------- /7-3-vue-app/src/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from "vue"; 2 | import App from "./App.vue"; 3 | import router from "./router"; 4 | import "./assets/styles/index.scss"; 5 | 6 | createApp(App) 7 | .use(router) 8 | .mount("#app"); 9 | -------------------------------------------------------------------------------- /7-3-vue-app/src/router/index.js: -------------------------------------------------------------------------------- 1 | import { createRouter, createWebHistory } from "vue-router"; 2 | import Courses from "../views/Courses.vue"; 3 | 4 | const routes = [ 5 | { 6 | path: "/", 7 | name: "Courses", 8 | component: Courses, 9 | }, 10 | ]; 11 | 12 | const router = createRouter({ 13 | history: createWebHistory(process.env.BASE_URL), 14 | routes, 15 | }); 16 | 17 | export default router; 18 | -------------------------------------------------------------------------------- /7-3-vue-app/src/services/api.js: -------------------------------------------------------------------------------- 1 | import courses from "./courses.json"; 2 | 3 | export const api = { 4 | getCourses() { 5 | return new Promise((resolve) => { 6 | resolve(courses); 7 | }); 8 | }, 9 | }; 10 | -------------------------------------------------------------------------------- /7-3-vue-app/stylelint.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: [ 3 | "stylelint-config-standard", 4 | "stylelint-config-rational-order", 5 | "stylelint-prettier/recommended", 6 | ], 7 | plugins: ["stylelint-scss", "stylelint-prettier"], 8 | rules: { 9 | "prettier/prettier": true, 10 | "at-rule-no-unknown": null, 11 | "scss/at-rule-no-unknown": true, 12 | }, 13 | }; 14 | -------------------------------------------------------------------------------- /8-1-tailwind/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | 6 | # local env files 7 | .env.local 8 | .env.*.local 9 | 10 | # Log files 11 | npm-debug.log* 12 | yarn-debug.log* 13 | yarn-error.log* 14 | pnpm-debug.log* 15 | 16 | # Editor directories and files 17 | .idea 18 | .vscode 19 | *.suo 20 | *.ntvs* 21 | *.njsproj 22 | *.sln 23 | *.sw? 24 | -------------------------------------------------------------------------------- /8-1-tailwind/README.md: -------------------------------------------------------------------------------- 1 | # ATOMITCSS Architecture with Vue 2 | 3 | ## Project setup 4 | 5 | ``` 6 | npm install 7 | ``` 8 | 9 | ### Compiles and hot-reloads for development 10 | 11 | ``` 12 | npm run serve 13 | ``` 14 | 15 | ### Compiles and minifies for production 16 | 17 | ``` 18 | npm run build 19 | ``` 20 | 21 | ### Lints and fixes files 22 | 23 | ``` 24 | npm run lint 25 | ``` 26 | 27 | ### Customize configuration 28 | 29 | See [Configuration Reference](https://cli.vuejs.org/config/). 30 | -------------------------------------------------------------------------------- /8-1-tailwind/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ["@vue/cli-plugin-babel/preset"] 3 | }; 4 | -------------------------------------------------------------------------------- /8-1-tailwind/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [require("tailwindcss"), require("autoprefixer")], 3 | }; 4 | -------------------------------------------------------------------------------- /8-1-tailwind/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-1-tailwind/public/favicon.ico -------------------------------------------------------------------------------- /8-1-tailwind/public/img/bg/cursos-codelytv-pro.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-1-tailwind/public/img/bg/cursos-codelytv-pro.png -------------------------------------------------------------------------------- /8-1-tailwind/public/img/bg/kayak.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-1-tailwind/public/img/bg/kayak.jpg -------------------------------------------------------------------------------- /8-1-tailwind/public/img/bg/plant.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-1-tailwind/public/img/bg/plant.jpg -------------------------------------------------------------------------------- /8-1-tailwind/public/img/cursos/arquitectura/refactoring-bloater-code-smells.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-1-tailwind/public/img/cursos/arquitectura/refactoring-bloater-code-smells.jpg -------------------------------------------------------------------------------- /8-1-tailwind/public/img/cursos/bash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-1-tailwind/public/img/cursos/bash.jpg -------------------------------------------------------------------------------- /8-1-tailwind/public/img/cursos/buenas-practicas-bdd-cucumber-behat.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-1-tailwind/public/img/cursos/buenas-practicas-bdd-cucumber-behat.jpg -------------------------------------------------------------------------------- /8-1-tailwind/public/img/cursos/comunicacion-microservicios.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-1-tailwind/public/img/cursos/comunicacion-microservicios.jpg -------------------------------------------------------------------------------- /8-1-tailwind/public/img/cursos/cqrs-event-sourcing-kotlin-axon-framework.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-1-tailwind/public/img/cursos/cqrs-event-sourcing-kotlin-axon-framework.jpg -------------------------------------------------------------------------------- /8-1-tailwind/public/img/cursos/curso-agile-retrospectivas.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-1-tailwind/public/img/cursos/curso-agile-retrospectivas.jpg -------------------------------------------------------------------------------- /8-1-tailwind/public/img/cursos/curso-api-http-scala.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-1-tailwind/public/img/cursos/curso-api-http-scala.jpg -------------------------------------------------------------------------------- /8-1-tailwind/public/img/cursos/curso-app-mean-webpack.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-1-tailwind/public/img/cursos/curso-app-mean-webpack.jpg -------------------------------------------------------------------------------- /8-1-tailwind/public/img/cursos/curso-app-vuejs-jest.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-1-tailwind/public/img/cursos/curso-app-vuejs-jest.jpg -------------------------------------------------------------------------------- /8-1-tailwind/public/img/cursos/curso-arquitectura-hexagonal.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-1-tailwind/public/img/cursos/curso-arquitectura-hexagonal.jpg -------------------------------------------------------------------------------- /8-1-tailwind/public/img/cursos/curso-aws-ec2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-1-tailwind/public/img/cursos/curso-aws-ec2.jpg -------------------------------------------------------------------------------- /8-1-tailwind/public/img/cursos/curso-aws-escalando-apps.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-1-tailwind/public/img/cursos/curso-aws-escalando-apps.jpg -------------------------------------------------------------------------------- /8-1-tailwind/public/img/cursos/curso-cqrs.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-1-tailwind/public/img/cursos/curso-cqrs.jpg -------------------------------------------------------------------------------- /8-1-tailwind/public/img/cursos/curso-introduccion-scala.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-1-tailwind/public/img/cursos/curso-introduccion-scala.jpg -------------------------------------------------------------------------------- /8-1-tailwind/public/img/cursos/curso-screenshot-testing-android.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-1-tailwind/public/img/cursos/curso-screenshot-testing-android.jpg -------------------------------------------------------------------------------- /8-1-tailwind/public/img/cursos/curso-screenshot-testing-ios.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-1-tailwind/public/img/cursos/curso-screenshot-testing-ios.jpg -------------------------------------------------------------------------------- /8-1-tailwind/public/img/cursos/curso-ui-testing-android.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-1-tailwind/public/img/cursos/curso-ui-testing-android.jpg -------------------------------------------------------------------------------- /8-1-tailwind/public/img/cursos/curso-ui-testing-ios.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-1-tailwind/public/img/cursos/curso-ui-testing-ios.jpg -------------------------------------------------------------------------------- /8-1-tailwind/public/img/cursos/ddd-en-php.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-1-tailwind/public/img/cursos/ddd-en-php.jpg -------------------------------------------------------------------------------- /8-1-tailwind/public/img/cursos/ddd-java.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-1-tailwind/public/img/cursos/ddd-java.jpg -------------------------------------------------------------------------------- /8-1-tailwind/public/img/cursos/docker-desde-0.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-1-tailwind/public/img/cursos/docker-desde-0.jpg -------------------------------------------------------------------------------- /8-1-tailwind/public/img/cursos/domain-driven-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-1-tailwind/public/img/cursos/domain-driven-design.jpg -------------------------------------------------------------------------------- /8-1-tailwind/public/img/cursos/dotfiles.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-1-tailwind/public/img/cursos/dotfiles.jpg -------------------------------------------------------------------------------- /8-1-tailwind/public/img/cursos/elastic-stack.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-1-tailwind/public/img/cursos/elastic-stack.jpg -------------------------------------------------------------------------------- /8-1-tailwind/public/img/cursos/git-introduccion-trabajo-en-equipo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-1-tailwind/public/img/cursos/git-introduccion-trabajo-en-equipo.jpg -------------------------------------------------------------------------------- /8-1-tailwind/public/img/cursos/github-actions-automatizacion.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-1-tailwind/public/img/cursos/github-actions-automatizacion.jpg -------------------------------------------------------------------------------- /8-1-tailwind/public/img/cursos/github-actions-integracion-continua.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-1-tailwind/public/img/cursos/github-actions-integracion-continua.jpg -------------------------------------------------------------------------------- /8-1-tailwind/public/img/cursos/go-primera-app.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-1-tailwind/public/img/cursos/go-primera-app.jpg -------------------------------------------------------------------------------- /8-1-tailwind/public/img/cursos/grafana-prometheus.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-1-tailwind/public/img/cursos/grafana-prometheus.jpg -------------------------------------------------------------------------------- /8-1-tailwind/public/img/cursos/intellij.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-1-tailwind/public/img/cursos/intellij.jpg -------------------------------------------------------------------------------- /8-1-tailwind/public/img/cursos/iterm-productividad.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-1-tailwind/public/img/cursos/iterm-productividad.jpg -------------------------------------------------------------------------------- /8-1-tailwind/public/img/cursos/kubernetes-para-desarrolladores.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-1-tailwind/public/img/cursos/kubernetes-para-desarrolladores.jpg -------------------------------------------------------------------------------- /8-1-tailwind/public/img/cursos/layouts-css.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-1-tailwind/public/img/cursos/layouts-css.jpg -------------------------------------------------------------------------------- /8-1-tailwind/public/img/cursos/makefiles.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-1-tailwind/public/img/cursos/makefiles.jpg -------------------------------------------------------------------------------- /8-1-tailwind/public/img/cursos/migracion-vuejs.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-1-tailwind/public/img/cursos/migracion-vuejs.jpg -------------------------------------------------------------------------------- /8-1-tailwind/public/img/cursos/notion.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-1-tailwind/public/img/cursos/notion.jpg -------------------------------------------------------------------------------- /8-1-tailwind/public/img/cursos/novedades-vue-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-1-tailwind/public/img/cursos/novedades-vue-3.jpg -------------------------------------------------------------------------------- /8-1-tailwind/public/img/cursos/programacion-funcional-refactor-typeclasses.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-1-tailwind/public/img/cursos/programacion-funcional-refactor-typeclasses.jpg -------------------------------------------------------------------------------- /8-1-tailwind/public/img/cursos/prometheus.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-1-tailwind/public/img/cursos/prometheus.jpg -------------------------------------------------------------------------------- /8-1-tailwind/public/img/cursos/reactjs-de-0-a-deploy.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-1-tailwind/public/img/cursos/reactjs-de-0-a-deploy.jpg -------------------------------------------------------------------------------- /8-1-tailwind/public/img/cursos/solid.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-1-tailwind/public/img/cursos/solid.jpg -------------------------------------------------------------------------------- /8-1-tailwind/public/img/cursos/terminal-zsh.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-1-tailwind/public/img/cursos/terminal-zsh.jpg -------------------------------------------------------------------------------- /8-1-tailwind/public/img/cursos/testing-introduccion-buenas-practicas.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-1-tailwind/public/img/cursos/testing-introduccion-buenas-practicas.jpg -------------------------------------------------------------------------------- /8-1-tailwind/public/img/cursos/testing-vuex.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-1-tailwind/public/img/cursos/testing-vuex.jpg -------------------------------------------------------------------------------- /8-1-tailwind/public/img/cursos/vistas-android.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-1-tailwind/public/img/cursos/vistas-android.jpg -------------------------------------------------------------------------------- /8-1-tailwind/public/img/icons/facebook.svg: -------------------------------------------------------------------------------- 1 | Facebook icon -------------------------------------------------------------------------------- /8-1-tailwind/public/img/icons/linkedin.svg: -------------------------------------------------------------------------------- 1 | LinkedIn icon -------------------------------------------------------------------------------- /8-1-tailwind/public/img/icons/twitter.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /8-1-tailwind/public/img/icons/youtube.svg: -------------------------------------------------------------------------------- 1 | YouTube icon -------------------------------------------------------------------------------- /8-1-tailwind/public/img/testimonios/antonio-manuel-rubio.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-1-tailwind/public/img/testimonios/antonio-manuel-rubio.jpg -------------------------------------------------------------------------------- /8-1-tailwind/public/img/testimonios/dani-madurell.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-1-tailwind/public/img/testimonios/dani-madurell.jpeg -------------------------------------------------------------------------------- /8-1-tailwind/public/img/testimonios/edu-salguero.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-1-tailwind/public/img/testimonios/edu-salguero.jpeg -------------------------------------------------------------------------------- /8-1-tailwind/public/img/testimonios/fernando-ripoll.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-1-tailwind/public/img/testimonios/fernando-ripoll.jpg -------------------------------------------------------------------------------- /8-1-tailwind/public/img/testimonios/joan-miralles.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-1-tailwind/public/img/testimonios/joan-miralles.jpg -------------------------------------------------------------------------------- /8-1-tailwind/public/img/testimonios/luis-rodriguez.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-1-tailwind/public/img/testimonios/luis-rodriguez.jpg -------------------------------------------------------------------------------- /8-1-tailwind/public/img/testimonios/marc-monguio.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-1-tailwind/public/img/testimonios/marc-monguio.jpg -------------------------------------------------------------------------------- /8-1-tailwind/public/img/testimonios/miguel-angel-sanchez.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-1-tailwind/public/img/testimonios/miguel-angel-sanchez.jpg -------------------------------------------------------------------------------- /8-1-tailwind/public/img/testimonios/sergio-de-candelario.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-1-tailwind/public/img/testimonios/sergio-de-candelario.jpg -------------------------------------------------------------------------------- /8-1-tailwind/src/App.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 20 | -------------------------------------------------------------------------------- /8-1-tailwind/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-1-tailwind/src/assets/logo.png -------------------------------------------------------------------------------- /8-1-tailwind/src/components/common/BusinessCallout.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 24 | -------------------------------------------------------------------------------- /8-1-tailwind/src/components/ui/atoms/Box.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /8-1-tailwind/src/components/ui/atoms/CoverBackground.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 25 | -------------------------------------------------------------------------------- /8-1-tailwind/src/components/ui/atoms/Lead.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /8-1-tailwind/src/components/ui/atoms/Pill.vue: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /8-1-tailwind/src/components/ui/atoms/Title.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 20 | -------------------------------------------------------------------------------- /8-1-tailwind/src/components/ui/molecules/Dropdown.vue: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /8-1-tailwind/src/components/ui/objects/Container.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 17 | -------------------------------------------------------------------------------- /8-1-tailwind/src/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from "vue"; 2 | import App from "./App.vue"; 3 | import router from "./router"; 4 | import "./assets/index.css"; 5 | 6 | createApp(App) 7 | .use(router) 8 | .mount("#app"); 9 | -------------------------------------------------------------------------------- /8-1-tailwind/src/router/index.js: -------------------------------------------------------------------------------- 1 | import { createRouter, createWebHistory } from "vue-router"; 2 | import Courses from "../views/Courses.vue"; 3 | 4 | const routes = [ 5 | { 6 | path: "/", 7 | name: "Courses", 8 | component: Courses 9 | } 10 | ]; 11 | 12 | const router = createRouter({ 13 | history: createWebHistory(process.env.BASE_URL), 14 | routes 15 | }); 16 | 17 | export default router; 18 | -------------------------------------------------------------------------------- /8-1-tailwind/src/services/api.js: -------------------------------------------------------------------------------- 1 | import courses from "./courses.json"; 2 | 3 | export const api = { 4 | getCourses() { 5 | return new Promise(resolve => { 6 | resolve(courses); 7 | }); 8 | } 9 | }; 10 | -------------------------------------------------------------------------------- /8-1-tailwind/stylelint.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: ["stylelint-config-standard", "stylelint-prettier/recommended"], 3 | plugins: ["stylelint-prettier"], 4 | rules: { 5 | "prettier/prettier": true, 6 | "at-rule-no-unknown": [ 7 | true, 8 | { 9 | ignoreAtRules: [ 10 | "tailwind", 11 | "layer", 12 | "apply", 13 | "variants", 14 | "responsive", 15 | "screen", 16 | ], 17 | }, 18 | ], 19 | "declaration-block-trailing-semicolon": null, 20 | "no-descending-specificity": null, 21 | }, 22 | }; 23 | -------------------------------------------------------------------------------- /8-2-styled-components/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /8-2-styled-components/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-2-styled-components/public/favicon.ico -------------------------------------------------------------------------------- /8-2-styled-components/public/img/bg/cursos-codelytv-pro.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-2-styled-components/public/img/bg/cursos-codelytv-pro.png -------------------------------------------------------------------------------- /8-2-styled-components/public/img/bg/kayak.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-2-styled-components/public/img/bg/kayak.jpg -------------------------------------------------------------------------------- /8-2-styled-components/public/img/bg/plant.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-2-styled-components/public/img/bg/plant.jpg -------------------------------------------------------------------------------- /8-2-styled-components/public/img/cursos/arquitectura/refactoring-bloater-code-smells.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-2-styled-components/public/img/cursos/arquitectura/refactoring-bloater-code-smells.jpg -------------------------------------------------------------------------------- /8-2-styled-components/public/img/cursos/bash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-2-styled-components/public/img/cursos/bash.jpg -------------------------------------------------------------------------------- /8-2-styled-components/public/img/cursos/buenas-practicas-bdd-cucumber-behat.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-2-styled-components/public/img/cursos/buenas-practicas-bdd-cucumber-behat.jpg -------------------------------------------------------------------------------- /8-2-styled-components/public/img/cursos/comunicacion-microservicios.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-2-styled-components/public/img/cursos/comunicacion-microservicios.jpg -------------------------------------------------------------------------------- /8-2-styled-components/public/img/cursos/cqrs-event-sourcing-kotlin-axon-framework.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-2-styled-components/public/img/cursos/cqrs-event-sourcing-kotlin-axon-framework.jpg -------------------------------------------------------------------------------- /8-2-styled-components/public/img/cursos/curso-agile-retrospectivas.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-2-styled-components/public/img/cursos/curso-agile-retrospectivas.jpg -------------------------------------------------------------------------------- /8-2-styled-components/public/img/cursos/curso-api-http-scala.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-2-styled-components/public/img/cursos/curso-api-http-scala.jpg -------------------------------------------------------------------------------- /8-2-styled-components/public/img/cursos/curso-app-mean-webpack.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-2-styled-components/public/img/cursos/curso-app-mean-webpack.jpg -------------------------------------------------------------------------------- /8-2-styled-components/public/img/cursos/curso-app-vuejs-jest.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-2-styled-components/public/img/cursos/curso-app-vuejs-jest.jpg -------------------------------------------------------------------------------- /8-2-styled-components/public/img/cursos/curso-arquitectura-hexagonal.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-2-styled-components/public/img/cursos/curso-arquitectura-hexagonal.jpg -------------------------------------------------------------------------------- /8-2-styled-components/public/img/cursos/curso-aws-ec2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-2-styled-components/public/img/cursos/curso-aws-ec2.jpg -------------------------------------------------------------------------------- /8-2-styled-components/public/img/cursos/curso-aws-escalando-apps.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-2-styled-components/public/img/cursos/curso-aws-escalando-apps.jpg -------------------------------------------------------------------------------- /8-2-styled-components/public/img/cursos/curso-cqrs.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-2-styled-components/public/img/cursos/curso-cqrs.jpg -------------------------------------------------------------------------------- /8-2-styled-components/public/img/cursos/curso-introduccion-scala.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-2-styled-components/public/img/cursos/curso-introduccion-scala.jpg -------------------------------------------------------------------------------- /8-2-styled-components/public/img/cursos/curso-screenshot-testing-android.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-2-styled-components/public/img/cursos/curso-screenshot-testing-android.jpg -------------------------------------------------------------------------------- /8-2-styled-components/public/img/cursos/curso-screenshot-testing-ios.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-2-styled-components/public/img/cursos/curso-screenshot-testing-ios.jpg -------------------------------------------------------------------------------- /8-2-styled-components/public/img/cursos/curso-ui-testing-android.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-2-styled-components/public/img/cursos/curso-ui-testing-android.jpg -------------------------------------------------------------------------------- /8-2-styled-components/public/img/cursos/curso-ui-testing-ios.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-2-styled-components/public/img/cursos/curso-ui-testing-ios.jpg -------------------------------------------------------------------------------- /8-2-styled-components/public/img/cursos/ddd-en-php.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-2-styled-components/public/img/cursos/ddd-en-php.jpg -------------------------------------------------------------------------------- /8-2-styled-components/public/img/cursos/ddd-java.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-2-styled-components/public/img/cursos/ddd-java.jpg -------------------------------------------------------------------------------- /8-2-styled-components/public/img/cursos/docker-desde-0.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-2-styled-components/public/img/cursos/docker-desde-0.jpg -------------------------------------------------------------------------------- /8-2-styled-components/public/img/cursos/domain-driven-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-2-styled-components/public/img/cursos/domain-driven-design.jpg -------------------------------------------------------------------------------- /8-2-styled-components/public/img/cursos/dotfiles.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-2-styled-components/public/img/cursos/dotfiles.jpg -------------------------------------------------------------------------------- /8-2-styled-components/public/img/cursos/elastic-stack.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-2-styled-components/public/img/cursos/elastic-stack.jpg -------------------------------------------------------------------------------- /8-2-styled-components/public/img/cursos/git-introduccion-trabajo-en-equipo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-2-styled-components/public/img/cursos/git-introduccion-trabajo-en-equipo.jpg -------------------------------------------------------------------------------- /8-2-styled-components/public/img/cursos/github-actions-automatizacion.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-2-styled-components/public/img/cursos/github-actions-automatizacion.jpg -------------------------------------------------------------------------------- /8-2-styled-components/public/img/cursos/github-actions-integracion-continua.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-2-styled-components/public/img/cursos/github-actions-integracion-continua.jpg -------------------------------------------------------------------------------- /8-2-styled-components/public/img/cursos/go-primera-app.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-2-styled-components/public/img/cursos/go-primera-app.jpg -------------------------------------------------------------------------------- /8-2-styled-components/public/img/cursos/grafana-prometheus.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-2-styled-components/public/img/cursos/grafana-prometheus.jpg -------------------------------------------------------------------------------- /8-2-styled-components/public/img/cursos/intellij.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-2-styled-components/public/img/cursos/intellij.jpg -------------------------------------------------------------------------------- /8-2-styled-components/public/img/cursos/iterm-productividad.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-2-styled-components/public/img/cursos/iterm-productividad.jpg -------------------------------------------------------------------------------- /8-2-styled-components/public/img/cursos/kubernetes-para-desarrolladores.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-2-styled-components/public/img/cursos/kubernetes-para-desarrolladores.jpg -------------------------------------------------------------------------------- /8-2-styled-components/public/img/cursos/layouts-css.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-2-styled-components/public/img/cursos/layouts-css.jpg -------------------------------------------------------------------------------- /8-2-styled-components/public/img/cursos/makefiles.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-2-styled-components/public/img/cursos/makefiles.jpg -------------------------------------------------------------------------------- /8-2-styled-components/public/img/cursos/migracion-vuejs.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-2-styled-components/public/img/cursos/migracion-vuejs.jpg -------------------------------------------------------------------------------- /8-2-styled-components/public/img/cursos/notion.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-2-styled-components/public/img/cursos/notion.jpg -------------------------------------------------------------------------------- /8-2-styled-components/public/img/cursos/novedades-vue-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-2-styled-components/public/img/cursos/novedades-vue-3.jpg -------------------------------------------------------------------------------- /8-2-styled-components/public/img/cursos/programacion-funcional-refactor-typeclasses.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-2-styled-components/public/img/cursos/programacion-funcional-refactor-typeclasses.jpg -------------------------------------------------------------------------------- /8-2-styled-components/public/img/cursos/prometheus.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-2-styled-components/public/img/cursos/prometheus.jpg -------------------------------------------------------------------------------- /8-2-styled-components/public/img/cursos/reactjs-de-0-a-deploy.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-2-styled-components/public/img/cursos/reactjs-de-0-a-deploy.jpg -------------------------------------------------------------------------------- /8-2-styled-components/public/img/cursos/solid.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-2-styled-components/public/img/cursos/solid.jpg -------------------------------------------------------------------------------- /8-2-styled-components/public/img/cursos/terminal-zsh.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-2-styled-components/public/img/cursos/terminal-zsh.jpg -------------------------------------------------------------------------------- /8-2-styled-components/public/img/cursos/testing-introduccion-buenas-practicas.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-2-styled-components/public/img/cursos/testing-introduccion-buenas-practicas.jpg -------------------------------------------------------------------------------- /8-2-styled-components/public/img/cursos/testing-vuex.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-2-styled-components/public/img/cursos/testing-vuex.jpg -------------------------------------------------------------------------------- /8-2-styled-components/public/img/cursos/vistas-android.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-2-styled-components/public/img/cursos/vistas-android.jpg -------------------------------------------------------------------------------- /8-2-styled-components/public/img/icons/facebook.svg: -------------------------------------------------------------------------------- 1 | Facebook icon -------------------------------------------------------------------------------- /8-2-styled-components/public/img/icons/linkedin.svg: -------------------------------------------------------------------------------- 1 | LinkedIn icon -------------------------------------------------------------------------------- /8-2-styled-components/public/img/icons/twitter.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /8-2-styled-components/public/img/icons/youtube.svg: -------------------------------------------------------------------------------- 1 | YouTube icon -------------------------------------------------------------------------------- /8-2-styled-components/public/img/testimonios/antonio-manuel-rubio.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-2-styled-components/public/img/testimonios/antonio-manuel-rubio.jpg -------------------------------------------------------------------------------- /8-2-styled-components/public/img/testimonios/dani-madurell.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-2-styled-components/public/img/testimonios/dani-madurell.jpeg -------------------------------------------------------------------------------- /8-2-styled-components/public/img/testimonios/edu-salguero.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-2-styled-components/public/img/testimonios/edu-salguero.jpeg -------------------------------------------------------------------------------- /8-2-styled-components/public/img/testimonios/fernando-ripoll.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-2-styled-components/public/img/testimonios/fernando-ripoll.jpg -------------------------------------------------------------------------------- /8-2-styled-components/public/img/testimonios/joan-miralles.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-2-styled-components/public/img/testimonios/joan-miralles.jpg -------------------------------------------------------------------------------- /8-2-styled-components/public/img/testimonios/luis-rodriguez.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-2-styled-components/public/img/testimonios/luis-rodriguez.jpg -------------------------------------------------------------------------------- /8-2-styled-components/public/img/testimonios/marc-monguio.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-2-styled-components/public/img/testimonios/marc-monguio.jpg -------------------------------------------------------------------------------- /8-2-styled-components/public/img/testimonios/miguel-angel-sanchez.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-2-styled-components/public/img/testimonios/miguel-angel-sanchez.jpg -------------------------------------------------------------------------------- /8-2-styled-components/public/img/testimonios/sergio-de-candelario.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-2-styled-components/public/img/testimonios/sergio-de-candelario.jpg -------------------------------------------------------------------------------- /8-2-styled-components/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-2-styled-components/public/logo192.png -------------------------------------------------------------------------------- /8-2-styled-components/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-architecture-course/c4488fdd946b816a87c712afe9139b5d3501e1c9/8-2-styled-components/public/logo512.png -------------------------------------------------------------------------------- /8-2-styled-components/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /8-2-styled-components/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /8-2-styled-components/src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /8-2-styled-components/src/components/ui/atoms/Box.js: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | export const Box = styled.div` 4 | padding: 1.63rem; 5 | color: ${(props) => props.theme.textInvertedColor}; 6 | background: rgba(24, 24, 24, 0.3); 7 | border-radius: 0.37rem; 8 | `; 9 | -------------------------------------------------------------------------------- /8-2-styled-components/src/components/ui/atoms/CoverBackground.js: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | export const CoverBackground = styled.section` 4 | color: ${(props) => props.theme.textInvertedColor}; 5 | background-color: ${(props) => props.theme.backgroundDarkColor}; 6 | background-repeat: no-repeat; 7 | background-position: center; 8 | background-size: cover; 9 | background-attachment: fixed; 10 | background-image: url(${(props) => 11 | (props.bg === "plant" && "/img/bg/plant.jpg") || 12 | (props.bg === "kayak" && "/img/bg/kayak.jpg")}); 13 | `; 14 | -------------------------------------------------------------------------------- /8-2-styled-components/src/components/ui/atoms/Lead.js: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | export const Lead = styled.p` 4 | font-size: ${(props) => props.theme.fsLead}; 5 | line-height: 1.65; 6 | `; 7 | -------------------------------------------------------------------------------- /8-2-styled-components/src/components/ui/atoms/Pill.js: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | export const Pill = styled.div` 4 | display: inline-block; 5 | padding: 0.5rem 0.65rem; 6 | color: ${(props) => props.theme.textInvertedColor}; 7 | font-weight: 700; 8 | font-size: ${(props) => props.theme.fsPill}; 9 | letter-spacing: 0.5px; 10 | text-align: center; 11 | text-transform: uppercase; 12 | background: ${(props) => props.theme.backgroundDarkerColor}; 13 | border-radius: 50px; 14 | `; 15 | -------------------------------------------------------------------------------- /8-2-styled-components/src/components/ui/atoms/Title.js: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | export const Title = styled.h1` 4 | font-size: ${(props) => props.theme.fsTitleL}; 5 | `; 6 | -------------------------------------------------------------------------------- /8-2-styled-components/src/components/ui/objects/Container.js: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | export const Container = styled.div` 4 | max-width: ${(props) => props.theme.maxWidth}; 5 | margin: 0 auto; 6 | padding: ${(props) => props.theme.spacing} ${(props) => props.theme.spacingS}; 7 | `; 8 | -------------------------------------------------------------------------------- /8-2-styled-components/src/components/ui/objects/Justify.js: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | export const Justify = styled.div.attrs((props) => ({ 4 | alignItems: props.alignItems || "center", 5 | }))` 6 | > * { 7 | display: flex; 8 | flex-wrap: wrap; 9 | align-items: ${(props) => props.alignItems}; 10 | justify-content: space-between; 11 | } 12 | `; 13 | -------------------------------------------------------------------------------- /8-2-styled-components/src/components/ui/objects/UiList.js: -------------------------------------------------------------------------------- 1 | import styled, { css } from "styled-components"; 2 | 3 | const List = styled.ul` 4 | margin: 0; 5 | padding: 0; 6 | list-style: none; 7 | 8 | ${(props) => 9 | props.horizontal && 10 | css` 11 | display: flex; 12 | flex-wrap: wrap; 13 | gap: 1rem; 14 | align-items: center; 15 | `} 16 | `; 17 | 18 | export function UiList(props) { 19 | return ( 20 | 21 | {props.children.map((child) => ( 22 |
  • {child}
    • 23 | ))} 24 |     25 | ); 26 | } 27 | -------------------------------------------------------------------------------- /8-2-styled-components/src/components/ui/utils/includeSidebar.js: -------------------------------------------------------------------------------- 1 | export function includeSidebar({ 2 | gap = "1rem", 3 | sidebarPosition = "last-child", 4 | sidebarWidth = "auto", 5 | minWidth = "50%", 6 | }) { 7 | return ` 8 | display: flex; 9 | flex-wrap: wrap; 10 | gap: ${gap}; 11 | 12 | > * { 13 | flex-basis: ${sidebarWidth}; 14 | flex-grow: 1; 15 | } 16 | 17 | > ${":" + sidebarPosition} { 18 | min-width: ${minWidth}; 19 | flex-basis: 0; 20 | flex-grow: 999; 21 | } 22 | `; 23 | } 24 | -------------------------------------------------------------------------------- /8-2-styled-components/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /8-2-styled-components/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | ReactDOM.render( 8 | 9 | 10 | , 11 | document.getElementById('root') 12 | ); 13 | 14 | // If you want to start measuring performance in your app, pass a function 15 | // to log results (for example: reportWebVitals(console.log)) 16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 17 | reportWebVitals(); 18 | -------------------------------------------------------------------------------- /8-2-styled-components/src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /8-2-styled-components/src/services/api.js: -------------------------------------------------------------------------------- 1 | import courses from "./courses.json"; 2 | 3 | export const api = { 4 | getCourses() { 5 | return courses; 6 | }, 7 | }; 8 | -------------------------------------------------------------------------------- /8-2-styled-components/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /8-2-styled-components/src/styles/elements/_body.scss: -------------------------------------------------------------------------------- 1 | body { 2 | color: $text-color; 3 | font-family: $font-family; 4 | font-size: $fs-body; 5 | line-height: 1.8; 6 | } 7 | -------------------------------------------------------------------------------- /8-2-styled-components/src/styles/elements/_headings.scss: -------------------------------------------------------------------------------- 1 | h1, 2 | h2, 3 | h3 { 4 | font-weight: 300; 5 | line-height: 1.13; 6 | } 7 | 8 | h1 { 9 | font-size: $fs-title-l; 10 | } 11 | 12 | h2 { 13 | font-size: $fs-title-m; 14 | } 15 | 16 | h3 { 17 | font-size: $fs-title-s; 18 | } 19 | -------------------------------------------------------------------------------- /8-2-styled-components/src/styles/elements/_img.scss: -------------------------------------------------------------------------------- 1 | img { 2 | max-width: 100%; 3 | } 4 | -------------------------------------------------------------------------------- /8-2-styled-components/src/styles/elements/_links.scss: -------------------------------------------------------------------------------- 1 | a { 2 | color: $primary-color; 3 | text-decoration: underline; 4 | 5 | &:hover, 6 | &:focus { 7 | color: $primary-dark-color; 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /8-2-styled-components/src/styles/generic/_box-sizing.scss: -------------------------------------------------------------------------------- 1 | *, 2 | *::before, 3 | *::after { 4 | box-sizing: border-box; 5 | } 6 | -------------------------------------------------------------------------------- /8-2-styled-components/src/styles/index.scss: -------------------------------------------------------------------------------- 1 | // Variables 2 | @import "settings/variables"; 3 | 4 | // Generic 5 | @import "generic/normalize"; 6 | @import "generic/box-sizing"; 7 | 8 | // Elements 9 | @import "elements/body"; 10 | @import "elements/headings"; 11 | @import "elements/img"; 12 | @import "elements/links"; 13 | 14 | // Utilities 15 | @import "utilities/error"; 16 | -------------------------------------------------------------------------------- /8-2-styled-components/src/styles/settings/_layout.scss: -------------------------------------------------------------------------------- 1 | $max-width: 71.25rem; 2 | 3 | // Spacing 4 | $spacing-s: 1rem; 5 | $spacing: 1.6rem; 6 | $spacing-l: 3.25rem; 7 | -------------------------------------------------------------------------------- /8-2-styled-components/src/styles/settings/_typography.scss: -------------------------------------------------------------------------------- 1 | $font-family: "Open Sans", sans-serif; 2 | 3 | // Typography scale 4 | $fs-base: 16; 5 | 6 | $_fs-9: 9 / $fs-base + rem; 7 | $_fs-12: 12 / $fs-base + rem; 8 | $_fs-14: 14 / $fs-base + rem; 9 | $_fs-19: 19 / $fs-base + rem; 10 | $_fs-25: 25 / $fs-base + rem; 11 | $_fs-33: 33 / $fs-base + rem; 12 | $_fs-44: 44 / $fs-base + rem; 13 | 14 | // Typography applications 15 | $fs-pill: $_fs-9; 16 | $fs-btn: $_fs-12; 17 | $fs-footer: $_fs-12; 18 | $fs-menu: $_fs-14; 19 | $fs-body: $_fs-14; 20 | $fs-lead: $_fs-19; 21 | $fs-title-s: $_fs-25; 22 | $fs-title-m: $_fs-33; 23 | $fs-title-l: $_fs-44; 24 | -------------------------------------------------------------------------------- /8-2-styled-components/src/styles/settings/_variables.scss: -------------------------------------------------------------------------------- 1 | @import "./colors"; 2 | @import "./layout"; 3 | @import "./typography"; 4 | @import "./z-index"; 5 | -------------------------------------------------------------------------------- /8-2-styled-components/src/styles/settings/_z-index.scss: -------------------------------------------------------------------------------- 1 | $_z1: 1; 2 | $_z2: 2; 3 | $_z3: 3; 4 | $_z4: 4; 5 | $_z5: 5; 6 | $_z6: 6; 7 | $_z7: 7; 8 | $_z8: 8; 9 | $_z9: 9; 10 | $_z10: 10; 11 | 12 | $z-menu: $_z9; 13 | -------------------------------------------------------------------------------- /8-2-styled-components/src/styles/utilities/_error.scss: -------------------------------------------------------------------------------- 1 | .is-error { 2 | color: tomato !important; 3 | } 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # CSS Architecture Course 2 | 3 | Code related to the [CSS Architecture Course](https://pro.codely.tv/library/arquitectura-css/) 4 | --------------------------------------------------------------------------------