{"id":403,"date":"2021-11-01T10:31:00","date_gmt":"2021-11-01T10:31:00","guid":{"rendered":"https:\/\/marcosrego.com\/account\/?p=403"},"modified":"2022-02-07T19:48:36","modified_gmt":"2022-02-07T19:48:36","slug":"mrdev-framework","status":"publish","type":"post","link":"https:\/\/marcosrego.com\/account\/development\/mrdev-framework\/","title":{"rendered":"Mr.Dev.&#8217;s Framework"},"content":{"rendered":"\n<!--more-->\n\n\n\n<figure class=\" fixed-video_mobile mr-fadein  wp-block-video fixed-video_mobile mr-fadein\"><video autoplay loop muted preload=\"none\" src=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/mrdev-framework_mobile.mp4\" playsinline><\/video><\/figure>\n\n\n\n<figure class=\" fixed-video_desktop mr-fadein  wp-block-video fixed-video_desktop mr-fadein\"><video autoplay loop muted preload=\"none\" src=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/mrdev-framework_desktop.mp4\" playsinline><\/video><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"mr-dev-is-your-provider-of-developing-tools\"><strong>Mr.Dev. is your provider of developing tools!<\/strong><\/h2>\n\n\n\n<h3 class=\"  wp-block-heading\" id=\"he-gives-you-a-theme-framework-with-optional-features-and-add-ons-that-extend-the-natural-workflow-of-wordpress\"><strong>He gives you a theme framework with optional features and add-ons that extend the natural workflow of WordPress.<\/strong><\/h3>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex\">\n<div class=\"   wp-block-button\"><a class=\"wp-block-button__link has-invert-color-color has-link-color-background-color has-text-color has-background\" href=\"https:\/\/marcosrego.com\/account\/client-area\/downloads\/?product=mrdevs-framework\"><strong>Get it now<\/strong><\/a><\/div>\n\n\n\n<div class=\"   wp-block-button\"><a class=\"wp-block-button__link has-main-background-color-color has-main-text-color-background-color has-text-color has-background\" href=\"#features\">Features<\/a><\/div>\n\n\n\n<div class=\"   wp-block-button\"><a class=\"wp-block-button__link has-main-background-color-color has-main-text-color-background-color has-text-color has-background\" href=\"#all-framework-features-work-with-any-theme\">STARTER THEMES<\/a><\/div>\n<\/div>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"  wp-block-spacer\"><\/div>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"  wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-4\">\n<div class=\"wp-block-column is-layout-flow\">\n<h4 class=\"  wp-block-heading\" id=\"how\"><strong>How?<\/strong><\/h4>\n\n\n\n<p class=\"\"><strong>This framework focus exclusively on adding <a href=\"#features\">optional functionalities<\/a> that WordPress doesn&#8217;t bring by default in its interface, avoiding bloating even more the system.<\/strong><\/p>\n\n\n\n<p class=\"\">Because those are all optional, you the developer can decide and control which <a href=\"#features\">features<\/a> are needed on a project basis. This also helps your clients to easily navigate the backend and customize the site with the options that you want them to see.<\/p>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"  wp-block-spacer\"><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow\">\n<h4 class=\"  wp-block-heading\" id=\"why\"><strong>Why?<\/strong><\/h4>\n\n\n\n<p class=\"\">WordPress already comes with the blocks editor. When you add a legacy theme or a site builder you increase the bloat of the system.<\/p>\n\n\n\n<p class=\"\">They usually come full of features <em>(many times repeated ones)<\/em>, adding extra layers, changing the original workflow and decreasing the overall speed and longevity. <strong>That&#8217;s why it&#8217;s important to have a light framework that focus on <a href=\"#features\">optional extensions<\/a> only.<\/strong><\/p>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"  wp-block-spacer\"><\/div>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"  wp-block-heading\" id=\"features\"><strong>Which features are available?<\/strong><\/h3>\n\n\n\n<figure class=\"   wp-block-gallery has-nested-images columns-1 wp-block-gallery-5 is-layout-flex\">\n<figure class=\"     wp-block-image size-large\"><a href=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/mrdev-framework_configuration.jpg\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"693\" data-id=\"954\" src=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/mrdev-framework_configuration-1024x693.jpg\" alt=\"Mr.Dev.&#039;s Framework - Configuration page\" class=\"wp-image-954\" srcset=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/mrdev-framework_configuration-1024x693.jpg 1024w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/mrdev-framework_configuration-300x203.jpg 300w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/mrdev-framework_configuration-768x520.jpg 768w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/mrdev-framework_configuration.jpg 1342w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" title=\"-\"><\/a><figcaption>Enable only the options that you need on the configuration page. Including a maintenance mode and the use of Mr.Utils (CSS classes and JS functions).<\/figcaption><\/figure>\n\n\n\n<figure class=\"     wp-block-image size-large\"><a href=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/mrdev-framework_styles.jpg\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"693\" data-id=\"958\" src=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/mrdev-framework_styles-1024x693.jpg\" alt=\"Mr.Dev.&#039;s Framework - Styles\" class=\"wp-image-958\" srcset=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/mrdev-framework_styles-1024x693.jpg 1024w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/mrdev-framework_styles-300x203.jpg 300w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/mrdev-framework_styles-768x520.jpg 768w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/mrdev-framework_styles.jpg 1342w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" title=\"-\"><\/a><figcaption>Optionally use the plugin settings, the customizer or the block editor, to control global colors (with light and dark mode support), fonts, sizes and breakpoints everywhere.<\/figcaption><\/figure>\n\n\n\n<figure class=\"     wp-block-image size-large\"><a href=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/mrdev-framework_layout.jpg\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"693\" data-id=\"957\" src=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/mrdev-framework_layout-1024x693.jpg\" alt=\"Mr.Dev.&#039;s Framework - Layout\" class=\"wp-image-957\" srcset=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/mrdev-framework_layout-1024x693.jpg 1024w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/mrdev-framework_layout-300x203.jpg 300w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/mrdev-framework_layout-768x520.jpg 768w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/mrdev-framework_layout.jpg 1342w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" title=\"-\"><\/a><figcaption>Optionally add sections inside the Header, Main, Footer and Offcanvas. Include reusable blocks into those sections or create widget sidebars.<\/figcaption><\/figure>\n\n\n\n<figure class=\"     wp-block-image size-large\"><a href=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/mrdev-framework_files.jpg\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"693\" data-id=\"956\" src=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/mrdev-framework_files-1024x693.jpg\" alt=\"Mr.Dev.&#039;s Framework - Files page\" class=\"wp-image-956\" srcset=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/mrdev-framework_files-1024x693.jpg 1024w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/mrdev-framework_files-300x203.jpg 300w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/mrdev-framework_files-768x520.jpg 768w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/mrdev-framework_files.jpg 1342w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" title=\"-\"><\/a><figcaption>Optionally add files or external urls, choose where and when to load each one <em>(on a specific page, posts, blog, category)<\/em> and edit them directly in WordPress with the default plugins editor.<\/figcaption><\/figure>\n\n\n\n<figure class=\"     wp-block-image size-large\"><a href=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/mrdev-framework_media.jpg\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"693\" data-id=\"1331\" src=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/mrdev-framework_media-1024x693.jpg\" alt=\"Mr.Dev.&#039;s Framework - Media\" class=\"wp-image-1331\" srcset=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/mrdev-framework_media-1024x693.jpg 1024w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/mrdev-framework_media-300x203.jpg 300w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/mrdev-framework_media-768x520.jpg 768w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/mrdev-framework_media.jpg 1342w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" title=\"-\"><\/a><figcaption>Optionally create more sizes to your images (scaled or cropped). Those sizes will appear on the srcset and also on the block and classic editors.<\/figcaption><\/figure>\n<\/figure>\n\n\n\n<h3 class=\"  wp-block-heading\" id=\"all-framework-features-work-with-any-theme\"><strong>All framework features work with any theme!<\/strong><\/h3>\n\n\n\n<p class=\"\">But if you want to start from scratch and focus on the features given by the framework, then <strong>Mr.Dev. gives you two optional boilerplate themes<\/strong> that you can use.<\/p>\n\n\n\n<p class=\"\">Despite being boilerplates, you can develop complete websites without needing to add or edit their code, that&#8217;s thanks to the features of the Framework together with the block editor.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-11\">\n<div class=\"wp-block-column is-layout-flow\">\n<figure class=\"    wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"768\" src=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/11\/screenshot-1024x768.png\" alt=\"Mr.Dev.&#039;s Theme Screenshot\" class=\"wp-image-2481\" srcset=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/11\/screenshot-1024x768.png 1024w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/11\/screenshot-300x225.png 300w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/11\/screenshot-768x576.png 768w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/11\/screenshot.png 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" title=\"-\"><\/figure>\n\n\n\n<p class=\"\">The <a href=\"https:\/\/marcosrego.com\/account\/client-area\/downloads\/?product=theme-mrdevtheme\">Mr.Dev&#8217;s Theme<\/a> is a boilerplate that <strong>works with the default Full Site Editor<\/strong>. By joining the Framework, you can control the default styles that appear on the FSE. With this theme, you&#8217;ll be up to date with all the new features that are coming to WordPress.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex\">\n<div class=\"   wp-block-button\"><a class=\"wp-block-button__link has-main-background-color-color has-main-text-color-background-color has-text-color has-background\" href=\"https:\/\/marcosrego.com\/account\/client-area\/downloads\/?product=theme-mrdevtheme\">DOWNLOAD<\/a><\/div>\n\n\n\n<div class=\"   wp-block-button\"><a class=\"wp-block-button__link has-main-background-color-color has-main-text-color-background-color has-text-color has-background\" href=\"https:\/\/github.com\/marcosrego-web\/mrdev-theme#mrdevs-theme\" target=\"_blank\" rel=\"noreferrer noopener\">+INFO<\/a><\/div>\n<\/div>\n\n\n\n<p class=\"\"> <\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow\">\n<figure class=\"    wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"768\" src=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/11\/screenshot-1-1024x768.png\" alt=\"Mr.Dev_s screenshot\" class=\"wp-image-2483\" srcset=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/11\/screenshot-1-1024x768.png 1024w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/11\/screenshot-1-300x225.png 300w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/11\/screenshot-1-768x576.png 768w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/11\/screenshot-1.png 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" title=\"-\"><\/figure>\n\n\n\n<p class=\"\">The&nbsp;<a href=\"https:\/\/marcosrego.com\/account\/client-area\/downloads\/?product=theme-mrdevs\">Mr.Dev_s<\/a>&nbsp;theme is based on&nbsp;<strong><a href=\"https:\/\/underscores.me\/\" target=\"_blank\" rel=\"noreferrer noopener\">Underscores<\/a><\/strong>&nbsp;and it has extra compatibilities to work with the block editor (but not with the full site editor). This is the ideal theme if you don&#8217;t want to give too much  control on how the website will look and don\u2019t want the full site editor experience.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex\">\n<div class=\"   wp-block-button\"><a class=\"wp-block-button__link has-main-background-color-color has-main-text-color-background-color has-text-color has-background\" href=\"https:\/\/marcosrego.com\/account\/client-area\/downloads\/?product=theme-mrdevs\">DOWNLOAD<\/a><\/div>\n\n\n\n<div class=\"   wp-block-button\"><a class=\"wp-block-button__link has-main-background-color-color has-main-text-color-background-color has-text-color has-background\" href=\"https:\/\/github.com\/marcosrego-web\/mrdev_s#mrdev_s\" target=\"_blank\" rel=\"noreferrer noopener\">+INFO<\/a><\/div>\n<\/div>\n\n\n\n<p class=\"\"> <\/p>\n<\/div>\n<\/div>\n\n\n\n<p class=\"\"> <\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-left is-layout-flex wp-container-12\">\n<div class=\"   wp-block-button\"><a class=\"wp-block-button__link has-invert-color-color has-link-color-background-color has-text-color has-background\" href=\"https:\/\/marcosrego.com\/account\/client-area\/downloads\/?product=mrdevs-framework\"><strong>Get THE FRAMEWORK<\/strong><\/a><\/div>\n<\/div>\n\n\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":363,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[44],"tags":[24,26,35,33,50,23],"_links":{"self":[{"href":"https:\/\/marcosrego.com\/account\/wp-json\/wp\/v2\/posts\/403"}],"collection":[{"href":"https:\/\/marcosrego.com\/account\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/marcosrego.com\/account\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/marcosrego.com\/account\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/marcosrego.com\/account\/wp-json\/wp\/v2\/comments?post=403"}],"version-history":[{"count":21,"href":"https:\/\/marcosrego.com\/account\/wp-json\/wp\/v2\/posts\/403\/revisions"}],"predecessor-version":[{"id":2505,"href":"https:\/\/marcosrego.com\/account\/wp-json\/wp\/v2\/posts\/403\/revisions\/2505"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/marcosrego.com\/account\/wp-json\/wp\/v2\/media\/363"}],"wp:attachment":[{"href":"https:\/\/marcosrego.com\/account\/wp-json\/wp\/v2\/media?parent=403"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/marcosrego.com\/account\/wp-json\/wp\/v2\/categories?post=403"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/marcosrego.com\/account\/wp-json\/wp\/v2\/tags?post=403"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}